/* ============================================================
   KING KHOE: CINEMATIC HERO
   Scroll-pinned hero engine styles. Additive to style.css:
   does not modify any existing rule.
   ============================================================ */

.cine-hero{
  position:relative;
  height:100vh; /* JS expands this once initialized; safe default before/without JS */
  min-height:640px;
  background:#000;
}

.cine-pin{
  position:sticky;
  top:0;
  height:100svh;
  min-height:640px;
  width:100%;
  overflow:hidden;
  background:#000;
}
.cine-pin--sticky{ position:sticky; }
.cine-hero--static .cine-pin{ position:relative; }

.cine-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.cine-layer,
.cine-fallback-img,
.cine-static-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  will-change:opacity;
  backface-visibility:hidden;
}

.cine-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0) 22%, rgba(6,6,6,0) 60%, rgba(6,6,6,0.92) 100%);
}

/* ---------------- Loading state ---------------- */
.cine-loading{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  transition:opacity .7s cubic-bezier(.4,0,.2,1), visibility 0s linear .7s;
}
.cine-loading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.cine-loading-mark{
  font-family:var(--display, sans-serif);
  font-size:15px;
  letter-spacing:0.28em;
  color:var(--text-1, #A3A3A3);
  animation:cine-pulse 1.8s ease-in-out infinite;
}
@keyframes cine-pulse{
  0%,100%{ opacity:0.35; }
  50%{ opacity:0.9; }
}

/* ---------------- Reveal / handoff content ---------------- */
.cine-reveal{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  padding:0 var(--gutter, 40px) clamp(64px,9vw,108px);
  opacity:0;
  pointer-events:none;
  transition:opacity .1s linear;
}
.cine-reveal.is-visible{ pointer-events:auto; }
/* #home: invisible, zero-size anchor inside the reveal block (the logo's target). Takes no space. */
.home-anchor{ position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; pointer-events:none; }
/* Reuses .hero-kicker / .hero-headline / .hero-sub / .hero-cta typography
   rules already defined in style.css: no duplicate type rules here.
   Those rules default to opacity:0 and only reveal themselves under a
   parent .hero.is-ready class from the OLD hero, which no longer exists
   in this DOM. Here .cine-reveal's own opacity (driven by hero-controller.js)
   is the single source of truth for visibility, so the inner elements are
   reset to their natural visible state. */
.cine-reveal .hero-kicker,
.cine-reveal .hero-headline,
.cine-reveal .hero-sub,
.cine-reveal .hero-cta{
  opacity:1;
  transform:none;
}
/* Headline: two intentional lines (each its own block), first in brand orange.
   The shared 15ch/13ch cap was sized for the old wording, so it is lifted for this
   headline only; each line balances itself if a narrow phone has to wrap it. */
.cine-reveal .hero-headline{ max-width:none; }
.cine-reveal .hero-headline .hl-accent,
.cine-reveal .hero-headline .hl-line{ display:block; text-wrap:balance; }
.cine-reveal .hero-headline .hl-accent{ color:var(--orange); }

/* ---------------- Scroll cue ----------------
   Purely a visual overlay: hero-controller.js already fades this whole
   container out at progress>0.02 and back in at the very start (line ~247),
   generically by id, so none of that logic needed to change here, only
   the cue's own content, styling and looping animation. */
.cine-scrollcue{
  position:absolute;
  left:50%; bottom:30px; transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:opacity .5s ease;
}
.cine-scrollcue span{
  font-size:14px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-1, #A3A3A3); white-space:nowrap;
}
.cine-scrollcue-arrow{
  color:var(--orange, #F97316);
  filter:drop-shadow(0 0 3px rgba(249,115,22,0.5));
  animation:cine-cue-arrow 2.6s ease-in-out infinite;
}
.cine-scrollcue .stem{
  position:relative;
  width:1px; height:30px;
  background:linear-gradient(rgba(249,115,22,0.45), rgba(249,115,22,0));
}
.cine-scrollcue .stem::after{
  content:'';
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:3px; height:12px; border-radius:2px;
  background:linear-gradient(rgba(249,115,22,0), var(--orange, #F97316), rgba(249,115,22,0));
  box-shadow:0 0 6px rgba(249,115,22,0.65);
  animation:cine-cue-travel 2.6s ease-in-out infinite;
}
@keyframes cine-cue-arrow{
  0%,100%{ transform:translateY(0); opacity:.8; }
  50%{ transform:translateY(3px); opacity:1; }
}
@keyframes cine-cue-travel{
  0%{ top:-4px; opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ top:26px; opacity:0; }
}

@media (max-width:760px){
  .cine-scrollcue{ bottom:22px; gap:8px; }
  .cine-scrollcue span{ font-size:11px; letter-spacing:0.12em; }
  .cine-scrollcue .stem{ height:24px; }
  @keyframes cine-cue-travel{
    0%{ top:-4px; opacity:0; }
    20%{ opacity:1; }
    80%{ opacity:1; }
    100%{ top:20px; opacity:0; }
  }
}

/* ---------------- Debug overlay ---------------- */
.cine-debug{
  position:fixed;
  left:16px; bottom:16px;
  z-index:999;
  max-width:340px;
  background:rgba(0,0,0,0.82);
  border:1px solid rgba(255,255,255,0.15);
  color:#8ef58e;
  font-family:'SF Mono', Menlo, Consolas, monospace;
  font-size:11px;
  line-height:1.6;
  padding:12px 14px;
  border-radius:6px;
  white-space:pre;
  pointer-events:none;
}

/* ---------------- Static / reduced-motion fallback ---------------- */
.cine-hero--static{ height:100vh; }
.cine-hero--static .cine-static-img{ position:absolute; inset:0; object-position:50% 38%; }
.cine-hero--static .cine-reveal{ opacity:1 !important; pointer-events:auto; position:absolute; }
.cine-hero--static .cine-vignette{ z-index:2; }

/* ---------------- Mobile ---------------- */
@media (max-width:760px){
  .cine-layer,
  .cine-fallback-img,
  .cine-static-img{ object-position:50% 34%; }
}

@media (prefers-reduced-motion: reduce){
  .cine-loading-mark{ animation:none; opacity:0.7; }
  .cine-scrollcue .stem{ animation:none; }
  .cine-scrollcue .stem::after{ animation:none; top:26px; opacity:.7; }
  .cine-scrollcue-arrow{ animation:none; }
}

/* ---------------- Nav visibility during cinematic hero ----------------
   Hidden by default only once JS adds body.cine-nav-hidden (progressive
   enhancement: with JS disabled, or in the reduced-motion fallback, the
   nav is never hidden). hero-controller.js removes the class once the
   cinematic timeline reaches its handoff, so the UI never competes with
   the cinematic sequence for attention. */
body.cine-nav-hidden .nav{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  /* fades out over .5s exactly as before, then stops being painted at all: the
     scrolled header carries a backdrop blur, which must not be evaluated over
     the playing hero video while it is invisible. Coming back is instant, as before. */
  transition:opacity .5s ease, visibility 0s linear .5s;
}

/* ---------------- Idle-state ambient particles ----------------
   Purely decorative "the page is alive" layer shown only while the
   hero sits at its initial First Signal state, before the visitor has
   scrolled. Pure CSS-driven (compositor-only transform/opacity
   animation, no rAF loop): hero-controller.js only ever toggles the
   .is-active class, so there is zero ongoing JS cost while idle and
   zero interaction with the scroll-driven timeline itself. Sits above
   the vignette but below the loading mark, the reveal copy and the
   scroll cue, so it never competes with any of those. */
.cine-idle-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  /* hidden state: after the 1.1s fade-out finishes the whole particle layer (46 blurred,
     will-change layers) stops being painted/composited while the hero scrubs */
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
.cine-idle-layer.is-active{ opacity:1; visibility:visible; transition:opacity 1.1s ease, visibility 0s; }

.cine-idle-particle{
  position:absolute;
  left:var(--ix, 50%);
  top:var(--iy, 50%);
  width:var(--isize, 3px);
  height:var(--isize, 3px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(253,160,70,1), rgba(249,124,28,0.17) 55%, rgba(249,115,22,0) 82%);
  filter: blur(var(--iblur, 0px));
  opacity:0;
  animation: cine-idle-flow var(--idur, 7s) linear infinite;
  animation-delay: var(--idelay, 0s);
  animation-play-state: paused;
  will-change: transform, opacity;
}
.cine-idle-layer.is-active .cine-idle-particle{ animation-play-state: running; }

/* Continuous right-to-left flow: each particle fades in, travels
   leftward (with a small per-particle vertical component for organic
   variation) over its own duration/delay, then fades out just before
   the loop resets, so the reset itself is invisible and the motion
   reads as one continuous stream rather than a visible "snap back". */
@keyframes cine-idle-flow{
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  9%   { opacity: var(--iop-a, 0.45); }
  45%  { transform: translate3d(calc(var(--iflowx, -80px) * 0.5), calc(var(--iflowy, 0px) * 0.5), 0); opacity: var(--iop-b, 0.65); }
  88%  { opacity: var(--iop-a, 0.45); }
  100% { transform: translate3d(var(--iflowx, -80px), var(--iflowy, 0px), 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cine-idle-layer{ display:none; }
}

/* ---------------- Cinematic typography ----------------
   Three sequential text beats (MARKETING / that+BREAKS / THROUGH):
   mutually exclusive, each with its own enter/hold/exit window driven
   continuously from scroll progress in hero-controller.js. No CSS
   transitions here: the motion must be scrubbable frame-by-frame in
   both directions, so JS sets the exact opacity/transform/filter for
   the current progress every frame rather than easing toward a target.
   Sits above the particle layer (3), below the loading mark / website
   reveal / scroll cue (5/6). */
.cine-type-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.cine-beat2{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  display:block;
  width:min(1400px, 90vw);
  text-align:center;
  font-family:'Montserrat', var(--display, sans-serif);
  font-weight:800;
  color:var(--text-0, #fff);
  letter-spacing:-0.01em;
  line-height:1.05;
  font-size:clamp(40px, 7vw, 100px);
  text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.9);
  opacity:0;
  pointer-events:none;
  will-change:opacity, transform, filter, background-position;
}
.cine-beat2--phrase{
  font-weight:800;
  font-size:clamp(32px, 5.2vw, 78px);
  will-change:opacity, transform, filter, background-position;
}
.cine-phrase-line1{ display:inline-block; }
.cine-phrase-line2{
  display:inline-block;
  font-weight:900;
  font-size:1.16em;
}
.cine-beat2--glow{
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
  text-shadow:none;
  filter:blur(1.2px);
}

@media (max-width:760px){
  /* Mobile: same two-line phrase, kept legible and centered rather than a
     literal shrink of the desktop composition. */
  .cine-beat2{ width:92vw; font-size:clamp(30px, 9vw, 48px); }
  .cine-beat2--phrase{ font-size:clamp(26px, 7.4vw, 38px); }
}

@media (prefers-reduced-motion: reduce){
  .cine-type-layer{ display:none; }
}