/* Independent homepage experiment. The formal index.html is intentionally untouched. */
.home-cinematic .cinematic-hero {
  position: relative;
  width: 100%;
  height: 330vh;
  min-height: 0;
  overflow: visible;
  background: #020706;
  color: var(--c-white);
}

.home-cinematic .cinematic-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: #020706;
}

.home-cinematic .cinematic-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
}

.home-cinematic .cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #020706;
}

.home-cinematic .cinematic-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 7, 9, .28) 0%, transparent 34%, transparent 68%, rgba(0, 3, 2, .62) 100%),
    linear-gradient(90deg, rgba(0, 6, 8, .34) 0%, transparent 52%);
  will-change: opacity;
}

.home-cinematic .cinematic-intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 7rem var(--gutter) 4rem;
  pointer-events: none;
}

.home-cinematic .cinematic-intro h1 {
  max-width: 12em;
  margin: 0;
  font-family: var(--f-cjk);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(4.8rem, 6.4vw, 8.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .22);
}

.home-cinematic .cinematic-terminal {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 900px;
  height: 600px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 0;
  background: transparent;
  color: rgba(19, 18, 15, .9);
  font: 650 16px/1.56 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  pointer-events: none;
  will-change: transform, opacity;
}
.home-cinematic .cinematic-terminal .hero-terminal-scroll {
  position: absolute;
  z-index: 1;
  inset: 9% 9%;
  overflow: hidden;
}
.home-cinematic .cinematic-terminal .hero-terminal-output {
  display: inline;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

.home-cinematic .cinematic-terminal .hero-terminal-cursor {
  color: #171714;
}

.home-cinematic .s-work {
  z-index: 6;
  margin-top: -100vh;
  opacity: 0;
  will-change: opacity;
}

@media (max-width: 768px) {
  .home-cinematic .cinematic-hero { height: 270vh; }
  .home-cinematic .cinematic-sticky { min-height: 100svh; }
  .home-cinematic .cinematic-video { object-position: 58% center; }
  .home-cinematic .cinematic-intro {
    justify-content: flex-start;
    padding: 10.5rem 1.5rem 2.5rem;
  }
  .home-cinematic .cinematic-intro h1 {
    max-width: 8.7em;
    font-size: clamp(3.7rem, 11.8vw, 5.2rem);
    line-height: 1.08;
  }
  .home-cinematic .cinematic-terminal {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-cinematic .cinematic-hero { height: 100svh; }
  .home-cinematic .s-work { margin-top: 0; opacity: 1; }
}