.cine{background:var(--ink-900);color:var(--text-on-dark)}
.cine__pin{height:700vh;position:relative}
.cine__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.cine__poster,.cine__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine__video{opacity:0;transition:opacity .6s ease}
.cine.is-live .cine__video{opacity:1}
.cine__overlays{position:absolute;inset:0;z-index:2}
.cine__scene{position:absolute;right:6vw;bottom:11vh;left:auto;top:auto;text-align:right;
  width:min(62vw,44ch);
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.cine__scene > *{display:block}
.cine__scene .eyebrow{margin-bottom:.7rem;text-wrap:balance}
.cine__scene.is-active{opacity:1;transform:translateY(0)}
.cine__line{font-size:var(--step-3);font-weight:700;text-wrap:balance;line-height:1.05}
/* magical text materialise: each letter rises + de-blurs + glows in, staggered.
   Rested state is visible so that on scene exit the whole block fades out via the
   scene's opacity transition instead of the letters snapping to hidden. */
.cine__line .word,.eyebrow .word{white-space:nowrap}
.cine__line .ch,.eyebrow .ch{display:inline-block}
.cine__scene.is-active .cine__line:not(.cine__fin) .ch,
.cine__scene.is-active .eyebrow .ch{animation:chIn .6s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i) * .028s)}
@keyframes chIn{
  0%{opacity:0;transform:translateY(.45em) scale(.5);filter:blur(7px);text-shadow:0 0 14px rgba(224,120,90,.95)}
  60%{opacity:1;text-shadow:0 0 8px rgba(224,120,90,.5)}
  100%{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 0 rgba(224,120,90,0)}}
/* per-scene placement variants */
.cine__scene--tr{top:12vh;bottom:auto}          /* upper-right */
.cine__scene--bl{left:6vw;right:auto;text-align:left}  /* lower-left */
/* final scene: centered, on a white backdrop, revealed in two parts, scales up at the end */
.cine__whiteout{position:absolute;inset:0;background:var(--white);opacity:0;z-index:1;pointer-events:none}
.cine__scene--onlight{right:auto;bottom:auto;left:0;top:0;width:100%;height:100%;
  display:grid;place-content:center;text-align:center;padding:2rem;color:var(--ink-900)}
.cine__scene--onlight .cine__line{color:var(--ink-900);max-width:30ch;margin-inline:auto;
  transform:scale(var(--fin,1));transform-origin:center;will-change:transform,opacity}
.cine__fin{opacity:0}
.cine__fin--2{margin-top:.4em;font-size:var(--step-2)}
.cine__scene--onlight .cine__fin--2{color:var(--gray-500)}
.cine__cue{position:absolute;bottom:1.6rem;left:50%;translate:-50%;z-index:2;color:var(--white);opacity:.8}
.scroller{display:block;width:26px;height:42px;border:2px solid currentColor;border-radius:14px;position:relative;opacity:.9}
.scroller__dot{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:currentColor;transform:translate(-50%,0);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}70%{opacity:1;transform:translate(-50%,14px)}100%{opacity:0;transform:translate(-50%,16px)}}
.cine.is-live .cine__cue{opacity:.55}
/* reduced-motion / mobile: stack scenes, cross-fade on scroll, no pin */
.cine.is-reduced .cine__pin{height:auto}
.cine.is-reduced .cine__stage{position:relative;height:auto;display:block}
.cine.is-reduced .cine__video{display:none}
.cine.is-reduced .cine__scene{position:relative;right:auto;bottom:auto;left:auto;top:auto;
  transform:none;filter:none;text-align:center;justify-items:center;width:auto;
  min-height:80vh;display:grid;place-content:center;opacity:.25}
.cine.is-reduced .cine__scene.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){
  .scroller__dot{animation:none}
  .cine__scene .cine__line,.cine__scene .eyebrow{animation:none!important}
  .cine__line .ch,.eyebrow .ch{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .brandmark__tile{animation:none;opacity:1;transform:none}
  .price::before{animation:none}
}