/* ============================================================
   neoSKiN — the cinematic film hero
   From the approved direction study (neoskin-hero-directions/
   motion-video.html): a pine field, one oversized statement with
   a single italic phrase, and a centred 3:4 portrait held in a
   film frame. On desktop, scroll opens the frame to full bleed
   and then WALKS the clinic — the continuous reception → corridor
   → treatment-suite walkthrough, scrubbed by scroll position.

   Layering contract:
     default CSS state  = the static editorial hero. This is what
       mobile, tablet, no-JS, reduced-motion, save-data and any
       media failure all see. It is a complete design, not a
       degraded one.
     .cine.is-scrub     = added by hero-film.js ONLY on a fine
       pointer, wide viewport, motion allowed, JS running. All
       pinning, geometry and scrub styling lives under it.

   Tokens come from base.css. The two blush stops are hero-only
   accents introduced by the direction study; they are declared
   in base.css beside --salmon.
   ============================================================ */

.cine{
  position:relative;
  background:var(--hero-pine);
  color:var(--bg);
}

/* ---- the stage: one viewport, everything composed on it ---- */
.cine-stage{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  padding-top:var(--nav-h);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(124,131,112,.19), rgba(124,131,112,.055) 27%, transparent 54%),
    linear-gradient(118deg, rgba(239,233,222,.025), transparent 42%, rgba(33,29,24,.16)),
    var(--hero-pine);
}

/* ---- type ---- */
.cine-title{
  position:absolute;z-index:6;
  top:clamp(128px,17vh,205px);left:clamp(24px,3.2vw,56px);
  max-width:11ch;margin:0;
  font-family:'Expose','Bespoke Sans',sans-serif;font-weight:400;
  font-size:clamp(48px,5.7vw,88px);
  line-height:.95;letter-spacing:-.04em;
  text-wrap:balance;
  color:var(--bg);
}
.cine-title em,
.cine-line em,
.cine-close-line em{
  font-family:'PP Editorial New','Iowan Old Style',Baskerville,'Times New Roman',serif;
  font-style:italic;font-weight:400;
  letter-spacing:-.02em;
}
.cine-title em{color:var(--blush)}
.cine-line{
  position:absolute;z-index:6;
  right:clamp(24px,3.2vw,56px);bottom:clamp(34px,5vh,48px);
  max-width:14ch;margin:0;
  font-family:'PP Editorial New','Iowan Old Style',Baskerville,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(27px,2.25vw,38px);
  line-height:1.02;letter-spacing:-.03em;
  text-align:left;
  color:var(--bg);
}
.cine-line em{color:var(--blush)}
.cine-meta{
  position:absolute;z-index:6;
  left:clamp(24px,3.2vw,56px);bottom:clamp(34px,5vh,48px);
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-label);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  line-height:1.5;
  color:rgba(239,233,222,.72);
}

/* ---- scroll cue ---- */
.cine-cue{
  position:absolute;z-index:6;
  left:50%;bottom:28px;
  width:32px;height:32px;
  border:1px solid rgba(239,233,222,.38);
  border-radius:50%;
  transform:translateX(-50%);
  display:grid;place-items:center;
}
.cine-cue::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--bg);
}
@media (prefers-reduced-motion:no-preference){
  .cine-cue::after{animation:cine-cue-pulse 2.2s var(--ease-soft) infinite}
  @keyframes cine-cue-pulse{
    0%,100%{transform:translateY(-3px);opacity:.55}
    50%{transform:translateY(3px);opacity:1}
  }
}

/* ---- the film frame ---- */
.cine-shell{
  position:absolute;z-index:4;
  top:50%;left:50%;
  width:min(27vw,340px);
  aspect-ratio:3/4;
  transform:translate(-50%,-50%);
  overflow:hidden;
  border-radius:2px;
  background:var(--pine-deep);
  box-shadow:0 28px 80px rgba(26,29,22,.45);
}
.cine-poster,.cine-video,.cine-portrait{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.cine-poster{z-index:1;object-position:50% 50%}
.cine-video{z-index:2;object-position:50% 50%}
.cine-portrait{z-index:3;object-position:50% 38%}
.cine-edge{
  position:absolute;z-index:5;inset:0;
  border:1px solid rgba(239,233,222,.22);
  border-radius:inherit;pointer-events:none;
}

/* ============================================================
   THE ENTRANCE — the picture rises into the frame.

   The frame is a fixed aperture on the field; what arrives is what
   is inside it. So the edge is painted first and the portrait is
   unmasked bottom-up within it, with .cine-plate-in counter-moving
   so the picture RISES rather than merely being uncovered.

   Deliberately a CSS animation and not a JS-armed transition:
     - it starts at parse, so there is no flash of the settled
       image before anything arms it;
     - it has no JS dependency at all, so a hero-film.js failure
       cannot strand the portrait behind a mask;
     - fill-mode BACKWARDS, not both, so once it has played the
       elements are back under normal cascade — hero-film.js writes
       inline opacity/transform on every .cine-exit each frame, and
       a lingering `both` would outrank it and hold the type on
       screen for a second after the reader had begun scrolling.

   Chosen over the alternative studied in _preview-hero-rise.html
   (the whole frame lifting in from below): the two cancel, because
   a frame that is itself travelling upward hides the fact that the
   picture is rising inside it.

   Explored in _preview-hero-rise.html, which also carries the three
   hand-offs. The bottom-up WIPE was taken (hero-film.js, FEATHER) so
   the clinic rises through the portrait the same way the portrait
   rises into the frame here — one verb, done twice. The push variant
   was not.
   ============================================================ */
.cine{--cine-rise:1100ms;--cine-rise-type:880ms}

/* geometry-neutral wrappers: absolutely positioned to inset:0, so
   the frame, the scrub geometry and the portrait's own 3:4 plate
   inside the 16:9 shell are all unchanged by their presence */
.cine-plate,.cine-plate-in{position:absolute;inset:0}

/* hero-film.js sets this when the page did not start at the top */
.cine.no-enter .cine-plate,
.cine.no-enter .cine-plate-in,
.cine.no-enter .cine-exit{animation:none}

@media (prefers-reduced-motion:no-preference){
  .cine-plate{animation:cine-rise var(--cine-rise) var(--ease-rise) backwards}
  .cine-plate-in{animation:cine-rise-in var(--cine-rise) var(--ease-rise) backwards}

  .cine-exit{animation:cine-rise-type var(--cine-rise-type) var(--ease-rise) backwards}
  .cine-title{animation-delay:110ms}
  .cine-line{animation-delay:250ms}
  .cine-meta{animation-delay:330ms}
  /* the cue is centred by translateX(-50%); a bare translateY would
     drop it, so it rises on its own keyframes */
  .cine-cue{animation-name:cine-rise-cue;animation-delay:540ms}

  @keyframes cine-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes cine-rise-in{from{transform:translateY(9%)}to{transform:translateY(0)}}
  @keyframes cine-rise-type{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  @keyframes cine-rise-cue{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* Desktop immediately paints the finished opening composition. The scroll
   choreography supplies the motion here; running a second entrance mask at
   the same time caused a brief half-painted portrait on first load. */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  .cine-plate,.cine-plate-in,.cine-exit{animation:none}
}

/* ---- walk furniture: only exists in scrub mode ---- */
.cine-chapters,.cine-rule,.cine-close{display:none}

/* ============================================================
   SCRUB MODE — desktop, fine pointer, motion allowed, JS on.
   hero-film.js owns the numbers; this block owns the look.
   ============================================================ */
/* 680vh, up from 520 (and 430 before that): CP wanted the walk slower
   again. The footage is a fixed 27.4s at 24fps, so scrub speed is set
   entirely by this scroll runway — this is THE knob, and the only one.
   At a 900px viewport the walk now spans ~3800px of scroll instead of
   ~2700, i.e. ~140px of scroll per second of footage against ~98.
   Slower also reads as smoother: fewer video frames per scroll pixel
   means each seek is a shorter hop. */
.cine.is-scrub{height:680vh}
.cine.is-scrub .cine-stage{
  position:sticky;top:0;height:100svh;
}
.cine.is-scrub .cine-shell{
  /* JS sizes the shell at its FINAL 16:9 dimensions and holds the
     opening 3:4 window with transform:scale + clip-path, so the
     expansion never triggers layout. */
  aspect-ratio:auto;
  will-change:transform,clip-path;
}
/* inside the 16:9 shell the portrait keeps its own 3:4 plate,
   centred — so the opening window shows the portrait exactly as
   composed, not a blown-up centre crop of a 16:9 cover fit */
.cine.is-scrub .cine-portrait{
  left:50%;right:auto;inset-block:0;
  width:auto;height:100%;aspect-ratio:3/4;
  transform:translateX(-50%);
}
.cine.is-scrub .cine-exit{will-change:transform,opacity}

.cine.is-scrub .cine-chapters{
  display:flex;flex-direction:column;gap:var(--s5);
  position:absolute;z-index:6;
  right:clamp(20px,3.4vw,48px);top:50%;
  transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  text-align:right;
  opacity:0;transition:opacity var(--dur-state) var(--ease-soft);
  pointer-events:none;
}
.cine.is-scrub.is-walking .cine-chapters{opacity:1}
.cine-ch{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);
  color:rgba(247,244,238,.78);
  text-shadow:0 1px 3px rgba(26,29,22,.9),0 2px 18px rgba(26,29,22,.85);
  transition:color var(--dur-state) var(--ease-soft);
}
.cine-ch::after{
  content:"";width:26px;height:1px;background:currentColor;
  transform:scaleX(.4);transform-origin:right;
  transition:transform var(--dur-state) var(--ease-soft);
}
.cine-ch.is-on{color:#C3CDB2}
.cine-ch.is-on::after{transform:scaleX(1)}

.cine.is-scrub .cine-rule{
  display:block;
  position:absolute;z-index:7;left:0;right:0;bottom:0;height:2px;
  background:rgba(247,244,238,.16);
  opacity:0;transition:opacity var(--dur-state) var(--ease-soft);
}
.cine.is-scrub.is-walking .cine-rule{opacity:1}
.cine-rule i{
  display:block;height:100%;width:0%;
  background:var(--champagne);
  transform-origin:left;
}

/* the closing move: the walk arrives at the treatment suite and
   the page offers the next step. Fades in over the final metres. */
.cine.is-scrub .cine-close{
  display:block;
  position:absolute;z-index:6;
  left:clamp(24px,3.2vw,56px);bottom:clamp(48px,8vh,88px);
  opacity:0;transform:translateY(14px);
  pointer-events:none;
}
.cine.is-scrub.is-closing .cine-close{pointer-events:auto}
.cine-close-line{
  max-width:15ch;margin:0 0 var(--s5);
  font-family:'PP Editorial New','Iowan Old Style',Baskerville,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(26px,2.1vw,36px);
  line-height:1.04;letter-spacing:-.03em;
  color:var(--bg);
  text-shadow:0 1px 3px rgba(26,29,22,.65),0 2px 22px rgba(26,29,22,.6);
}
.cine-close-line em{color:var(--blush)}
/* the close CTA was a solid putty pill so it could sit on the film's
   dark ground; the glass clears 8:1 there, so it joins the rest */
.cine-close .btn{background:var(--glass-fill);color:var(--bone);
  border-color:var(--glass-edge-strong)}
.cine-close .btn .btn-orb{color:currentColor;background:rgba(247,244,238,.16)}
.cine-close-call{
  margin-left:var(--s5);
  font-family:'JetBrains Mono',monospace;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,233,222,.78);text-decoration:none;
  border-bottom:1px solid rgba(247,244,238,.3);padding-bottom:3px;
}
.cine-close-call:hover,.cine-close-call:focus-visible{color:var(--bg);border-bottom-color:var(--sage-on-dark)}

/* a light scrim only while walking, so the chapter marks and the
   closing copy hold against the bright clinic footage */
.cine-scrim{
  position:absolute;z-index:5;inset:0;pointer-events:none;
  opacity:0;transition:opacity var(--dur-enter) var(--ease-soft);
  background:
    radial-gradient(120% 90% at 6% 104%, rgba(26,29,22,.72) 0%, rgba(26,29,22,.34) 34%, transparent 62%),
    linear-gradient(to left, rgba(26,29,22,.42) 0%, rgba(26,29,22,.10) 14%, transparent 28%);
}
.cine.is-scrub.is-walking .cine-scrim{opacity:1}

/* ============================================================
   NARROW & STATIC — tablets, phones, and every fallback.
   The frame sits under the headline; nothing pins, nothing loads
   video. This is the concept's own mobile composition.
   ============================================================ */
@media (max-width:1024px){
  .cine-stage{min-height:max(700px,100svh)}
  .cine-title{
    top:calc(var(--nav-h) + 26px);left:18px;
    max-width:11ch;
    font-size:clamp(39px,8vw,52px);line-height:.97;
  }
  /* the frame anchors under the headline, as the concept's own
     mobile composition does */
  .cine-shell{
    top:clamp(250px,36vh,330px);bottom:auto;left:50%;
    width:min(44vw,280px);
    transform:translate(-50%,0);
    border-radius:10px;
  }
  /* 110px floor clears the homepage quick-action dock */
  .cine-line{
    right:18px;bottom:110px;left:auto;
    max-width:13ch;
    font-size:clamp(22px,5.6vw,29px);
  }
  .cine-meta{left:18px;bottom:110px}
  .cine-cue{display:none}
}
@media (max-width:640px){
  .cine-meta{display:none}
  .cine-line{right:16px;left:16px;max-width:19ch}
  .cine-title{left:16px;font-size:clamp(37px,10.2vw,46px)}
  .cine-shell{width:min(56vw,240px);top:clamp(240px,33vh,300px)}
}

/* reduced motion: identical static composition, and the cue stops
   pulsing (handled above by the no-preference gate). JS also bails,
   so scrub mode never engages. */
@media (prefers-reduced-motion:reduce){
  .cine-video{display:none}
}