/* Seraphin — cinematic scroll sequences.
   Dark full-bleed stage on the white page: the footage is the surface. */

.cine{
  position:relative;
  height:420svh;                      /* scroll runway for the sequence */
  background:#0B0C0E;
}
.cine-short{ height:320svh }          /* secondary sequences get a shorter runway */
.cine-long{ height:500svh }           /* the hero breathes */
@media(max-width:720px){ .cine{ height:340svh } .cine-short{ height:280svh } .cine-long{ height:400svh } }

.cine-stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:#0B0C0E;
}
.cine-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Legibility scrim — never a heavy vignette. */
.cine-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,12,14,.34) 0%,
    rgba(11,12,14,0) 26%,
    rgba(11,12,14,0) 62%,
    rgba(11,12,14,.52) 100%);
}

/* --- Copy acts ---------------------------------------------------- */
.cine-copy{
  position:absolute;
  left:var(--bleed, 6vw);
  right:var(--bleed, 6vw);
  z-index:2;
  color:#F2F3F4;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;
  max-width:20ch;
}
.cine-copy.on{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.cine-copy h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem,7vw,5.5rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.25rem;
}
.cine-copy .eyebrow{
  color:rgba(242,243,244,.72);
  margin-bottom:1.1rem;
}
.cine-copy p{
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5;
  color:rgba(242,243,244,.86);
  margin:0;
  max-width:44ch;
}
.cine-copy .cine-cta{
  display:inline-block;
  margin-top:2rem;
  font-size:var(--s-small,.95rem);
  font-weight:600;
  color:#F2F3F4;
  text-decoration:none;
  border-bottom:1px solid var(--red,#ED1C24);
  padding-bottom:2px;
}
.cine-pos-b{ bottom:14svh }
.cine-pos-c{ top:50%; transform:translateY(calc(-50% + 26px)) }
.cine-pos-c.on{ transform:translateY(-50%) }

/* --- Progress line ------------------------------------------------- */
.cine-line{
  position:absolute;
  left:var(--bleed, 6vw);
  right:var(--bleed, 6vw);
  bottom:5svh;
  height:2px;
  background:rgba(242,243,244,.22);
  z-index:2;
}
.cine-line i{
  display:block;
  height:100%;
  background:#F2F3F4;
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* word-level stagger for the hero caption */
.cine-copy h2 .w{
  display:inline-block;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
  letter-spacing:.22em;
}
.cine-copy h2 .w.on{ opacity:1;transform:none }
.cine-copy h2 .w + .w{ margin-left:.5em }

/* --- Light stage variant (studio sections like the exploded view) ------- */
.cine-light{ background:#FFFFFF }
.cine-light .cine-stage{ background:#FFFFFF }
.cine-light .cine-scrim{
  background:linear-gradient(180deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.55) 100%);
}
.cine-light .cine-copy{ color:var(--ink,#0B0C0E) }
.cine-light .cine-copy .eyebrow{ color:var(--red-ink,#C41219) }
.cine-light .cine-copy h2{ color:var(--ink,#0B0C0E) }
.cine-light .cine-copy p{ color:var(--muted,#6B7178) }
.cine-light .cine-copy .cine-cta{ color:var(--ink,#0B0C0E);border-bottom-color:var(--red,#ED1C24) }
.cine-light .cine-line{ background:rgba(11,12,14,.14) }
.cine-light .cine-line i{ background:var(--ink,#0B0C0E) }

/* --- Fallbacks ----------------------------------------------------------*/
.no-js .cine{ height:auto }
.no-js .cine-stage{ position:relative; height:80svh }
.no-js .cine-copy{ position:relative; left:auto; right:auto; opacity:1;
  transform:none; padding:var(--gap-xl,6rem) 0 0 }
.no-js .cine-line{ display:none }

@media (prefers-reduced-motion: reduce){
  .cine{ height:auto }
  .cine-stage{ position:relative; height:80svh }
  .cine-copy{ position:relative; left:auto; right:auto; opacity:1;
    transform:none; padding:var(--gap-xl,6rem) 0 0 }
  .cine-line{ display:none }
}