/* ============================================================
   THE PATH — cinematic film as the Hero's scroll visual.
   Replaces the canvas "market-night" scenes (market/blockchain/path)
   INSIDE the existing pinned #home cine-stage. The formal hero (act 0)
   and the final invitation (act 4) are kept; the film is scrubbed by
   the existing cine scroll controller (window.__cineP).
   ============================================================ */

/* --- the old canvas cinematic (market / blockchain / path captions) is RETIRED.
   It is hidden as soon as this module is active (.tp-armed) — not when the film
   finishes loading — so a slow or failed film can never resurrect old content.
   Only the hero's own act-0 ambience stays underneath. --- */
#home.tp-armed .cine-bg,
#home.tp-armed .cine-dots,
#home.tp-armed .cine-act[data-act="1"],
#home.tp-armed .cine-act[data-act="2"],
#home.tp-armed .cine-act[data-act="3"] {
  display: none !important;
}

/* The hero's own canvas ambience keeps playing UNDER the film, so the top of
   the page still looks like the branded hero (not a black hole). The film
   fades in above it as soon as the user scrolls. */
#home.tp-armed #cine-canvas { z-index: 0 !important; }

/* --- the film layer --- */
#home .cine-stage { background: #050608; }

/* While the film is still proving itself (or if it never can), the stage shows
   the film's own opening frame instead of an empty void — same artwork, so the
   handover to the video is invisible, and a failure still looks deliberate. */
#home.tp-armed:not(.tp-ready) .cine-stage::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--tp-poster, none) center/cover no-repeat;
  opacity: .6;
  pointer-events: none;
}

.tp-video {
  position: absolute;
  inset: 0;
  z-index: 1;                         /* above bg, below vignette + acts */
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* desktop / landscape: full-bleed */
  object-position: center;
  background: transparent;
  opacity: 0;                         /* stays hidden until the user scrolls */
  will-change: opacity;
  pointer-events: none;
}
/* driven by scroll progress (--tp-film-op) so the hero is never competed with */
#home.tp-ready .tp-video { opacity: var(--tp-film-op, 0); }

/* live ambient glow (JS-created canvas): the current frame, tiny + blurred,
   filling the letterbox space with the scene's own light. Only when contained. */
#tp-ambient {
  position: absolute;
  left: -12%; top: -12%; width: 124%; height: 124%;
  z-index: 0;
  filter: blur(54px) saturate(1.35) brightness(0.5);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
#home.tp-contain.tp-ready #tp-ambient { opacity: calc(var(--tp-film-op, 0) * .85); }

/* blurred backdrop — only meaningful when the film is letterboxed (contain) */
.tp-backdrop {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.32) saturate(0.9);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* keep the existing filmic vignette above the video for a cinematic edge */
#home .cine-vignette { z-index: 2; }

/* --- formal hero (act 0) ---
   The cine controller keeps it at full opacity well past the point where the
   film arrives, so the two overlap. While the film is driving we own its fade
   via --tp-hero-op: hero recedes completely BEFORE the film appears. */
#home.tp-ready .cine-act[data-act="0"] {
  opacity: var(--tp-hero-op, 1) !important;
  pointer-events: none !important;
}
#home.tp-ready.tp-hero-on .cine-act[data-act="0"] { pointer-events: auto !important; }

/* --- final invitation (act 4) ---
   The cine controller fades act 4 in from ~76% of the hero, which lands it on
   top of the bright certificate scene (unreadable, cluttered). While the film
   is driving, we re-time it via --tp-cta-op so it only arrives over the calm
   ending frames. A stylesheet !important beats the controller's inline style,
   so the original controller stays untouched. */
#home.tp-ready .cine-act[data-act="4"] {
  opacity: var(--tp-cta-op, 0) !important;
  pointer-events: none;
}
#home.tp-ready.tp-cta-on .cine-act[data-act="4"] { pointer-events: auto; }

/* readability scrim behind the invitation, fading in with it */
#home.tp-ready .cine-stage::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: var(--tp-cta-op, 0);
  background: radial-gradient(ellipse at 50% 55%, rgba(3,4,8,.82) 0%, rgba(3,4,8,.62) 45%, rgba(3,4,8,.25) 75%, transparent 100%);
}

/* ---------- never crop the 16:9 composition ----------
   JS adds .tp-contain whenever the viewport aspect strays far enough from 16:9
   that `cover` would cut key subjects/UI (wide laptops AND portrait phones).
   The blurred backdrop fills the remaining space so it still reads cinematic. */
#home.tp-contain .tp-video { object-fit: contain; }
#home.tp-contain.tp-ready .tp-backdrop { opacity: var(--tp-film-op, 0); }

/* CSS-only backstop for portrait, in case JS hasn't measured yet */
@media (max-aspect-ratio: 3/2) {
  .tp-video { object-fit: contain; }
  #home.tp-ready .tp-backdrop { opacity: var(--tp-film-op, 0); }
}

/* ---------- reduced motion: cine controller bails → formal hero only ----------
   The film never loads; the poster/backdrop stay hidden and act 0 shows. */
@media (prefers-reduced-motion: reduce) {
  .tp-video, .tp-backdrop { display: none !important; }
}