/* 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:1475svh }         /* extra chair/logo arrival + resolved-title holds */
@media(max-width:720px){ .cine{ height:340svh } .cine-short{ height:280svh } .cine-long{ height:1220svh } }

.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 }

/* --- Bright finish: the hero ends in full white light ---------------------
   JS flips .cine-bright on the section past data-bright-from; the dark
   scrim lifts and copy/line go ink, the .cine-light palette. */
.cine-scrim{ transition:opacity .55s ease }
.cine-bright .cine-scrim{ opacity:0 }
.cine-bright .cine-copy{ color:var(--ink,#0B0C0E) }
.cine-bright .cine-copy h2{ color:var(--ink,#0B0C0E) }
.cine-bright .cine-copy .eyebrow{ color:var(--red-ink,#C41219) }
.cine-bright .cine-copy p{ color:var(--muted,#6B7178) }
.cine-bright .cine-copy .cine-cta{ color:var(--ink,#0B0C0E);border-bottom-color:var(--red,#ED1C24) }
.cine-bright .cine-line{ background:rgba(11,12,14,.14) }
.cine-bright .cine-line i{ background:var(--ink,#0B0C0E) }

/* --- Journey titles -------------------------------------------------------
   Large, centred and deliberately slow. A blur-to-sharp transition gives the
   requested cloud-like arrival without rasterising the accessible HTML copy.
   The white-stage finale is a two-step composition: the Seraphin logo above
   the chair, then Made to Travel centred underneath the held final frame. */
.cine-title-center,
.cine-title-top,
.cine-title-bottom{
  --cine-title-reduction:2.6667px; /* exactly 2pt */
  left:50%;
  right:auto;
  width:min(90vw,1160px);
  max-width:none;
  text-align:center;
  opacity:0;
  filter:blur(20px);
  transition:
    opacity 1.9s cubic-bezier(.22,.6,.22,1),
    filter 2.35s cubic-bezier(.22,.6,.22,1),
    transform 2.35s cubic-bezier(.22,.6,.22,1);
  will-change:opacity,filter,transform;
}
.cine-title-center,
.cine-title-top{
  transform:translate(-50%,calc(-50% + 18px)) scale(.985);
}
.cine-title-bottom{
  transform:translate(-50%,18px) scale(.985);
}
.cine-title-center{ top:50% }
.cine-title-top{ top:18svh;width:min(92vw,1240px) }
.cine-title-bottom{ bottom:8svh;width:min(92vw,1240px) }
.cine-title-center.on,
.cine-title-top.on{
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1);
}
.cine-title-bottom.on{
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,0) scale(1);
}
.cine-title:not(.cine-brand-title) h2{
  font-family:var(--body);
  font-weight:700;
}
.cine-title h2{
  margin:0;
  font-size:clamp(
    calc(3.6rem - var(--cine-title-reduction)),
    calc(7.2vw - var(--cine-title-reduction)),
    calc(7.5rem - var(--cine-title-reduction))
  );
  line-height:.93;
  letter-spacing:-.048em;
  text-wrap:balance;
}
.cine-title-top h2{ font-size:clamp(4rem,8vw,8rem) }
.cine-brand-logo{
  display:block;
  width:min(78vw,680px);
  height:auto;
  margin:0 auto;
}
.cine-title-bottom h2{
  font-size:clamp(
    calc(3.6rem - var(--cine-title-reduction)),
    calc(6.4vw - var(--cine-title-reduction)),
    calc(6.8rem - var(--cine-title-reduction))
  );
}
.cine-title em{ font-style:normal;color:var(--red,#ED1C24) }

@media(max-width:720px){
  .cine-title-center{ top:48%;width:90vw }
  .cine-title-top{ top:18svh;width:92vw }
  .cine-title-bottom{ bottom:8svh;width:92vw }
  .cine-title h2{
    font-size:clamp(
      calc(2.65rem - var(--cine-title-reduction)),
      calc(11.2vw - var(--cine-title-reduction)),
      calc(4.4rem - var(--cine-title-reduction))
    );
    line-height:.97;
    letter-spacing:-.042em;
  }
  /* The desktop finale selector is more specific than .cine-title h2. Keep an
     equally-specific mobile rule so the closing line cannot stay oversized. */
  .cine-title-bottom h2{
    font-size:clamp(
      calc(2.65rem - var(--cine-title-reduction)),
      calc(11.2vw - var(--cine-title-reduction)),
      calc(4.4rem - var(--cine-title-reduction))
    );
  }
}

/* --- 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;
  filter:none; transform:none; padding:var(--gap-xl,6rem) 0 0 }
.no-js .cine-line{ display:none }

@media (prefers-reduced-motion: reduce){
  .cine{ height:auto;background:#FFFFFF }
  .cine-stage{
    position:relative;
    height:auto;
    min-height:100svh;
    overflow:visible;
    background:#FFFFFF;
    padding:clamp(3rem,8vw,7rem) var(--bleed,6vw);
  }
  .cine-canvas,
  .cine-scrim{ display:none }
  .cine-copy,
  .cine-title-center,
  .cine-title-top,
  .cine-title-bottom,
  .cine-title-center.on,
  .cine-title-top.on,
  .cine-title-bottom.on{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:min(100%,1160px);
    max-width:none;
    margin:0 auto;
    padding:0;
    color:var(--ink,#0B0C0E);
    opacity:1;
    filter:none;
    transform:none;
  }
  .cine-copy + .cine-copy{ margin-top:clamp(3.5rem,8vw,7rem) }
  .cine-copy h2{ color:var(--ink,#0B0C0E) }
  .cine-line{ display:none }
}