/* ==========================================================================
   Cinematic workshop opening — sits ABOVE the existing measuring-tape Hero,
   never touches it. No pin, no scrub, no scroll-hold: the section is a
   plain full-height block that scrolls away immediately and continuously
   like any normal section — the Hero follows with zero gap because the
   wrap's height simply matches the intro's own natural height (no extra
   reserved runway to create a gap in the first place). A pinned/held
   scroll-scrub was tried and explicitly rejected (felt unresponsive —
   "stuck" until several scroll attempts accumulated, then jumped); plain
   native scrolling is deliberately simpler and always 1:1 responsive.
   ========================================================================== */

.cinematic-intro-wrap{
  position: relative;
  height: auto; /* always matches .cinematic-intro's natural height exactly */
}

.cinematic-intro{
  position: relative;
  z-index: 5; /* .hero's inner z-indexes are isolated (isolation:isolate on
    .hero-scene) so this only needs to clear .hero's own default stacking,
    but must do so explicitly since this section comes first in the DOM. */
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #17140f;
}

.cinematic-intro-media{
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform; /* pointer-parallax x/y only */
}
.cinematic-intro-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover, not contain — contain letterboxed with visible black bars on
     wide viewports, which read as broken, not cinematic. cover fills
     completely; object-position is pulled down so the crop comes off the
     top (spare headroom/shelving) rather than off the bottom, where her
     hands and the workbench are — keeps both requirements: no black bars,
     hands stay in frame. */
  object-fit: cover;
  object-position: 50% 75%;
}

/* Vignette, not a flat scrim — darkens just enough at the top (header
   legibility) and bottom (scroll-cue legibility), leaves the middle of the
   frame clear so the workshop scene itself stays the star. */
.cinematic-intro-veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,17,17,0.5) 0%,
    rgba(17,17,17,0) 24%,
    rgba(17,17,17,0) 62%,
    rgba(17,17,17,0.55) 100%
  );
  pointer-events: none;
}

.cinematic-intro-scrolldown{
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-white);
  pointer-events: none;
}
.cinematic-intro-scrolldown-line{
  width: 1.5px;
  height: 30px;
  background: rgba(255,255,255,0.4);
  overflow: hidden;
  position: relative;
}
.cinematic-intro-scrolldown-line::after{
  content: '';
  position: absolute;
  inset: -100% 0 auto 0;
  height: 50%;
  background: var(--color-lime);
  animation: cinematicScrollCue 1.9s ease-in-out infinite;
}
@keyframes cinematicScrollCue{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(300%); }
}
.cinematic-intro-scrolldown-label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce){
  .cinematic-intro-scrolldown-line::after{ animation: none; top: 25%; }
}

@media (max-width: 700px){
  .cinematic-intro{ min-height: 480px; }
}