/* ================================================
   KUMAYA WORLD — CINEMATIC FILM
   film.css
   Palette: #0b0c0f (black), #e8e4dd (cream),
            #D4AF37 (gold), #b0a99e (muted)
   Fonts: Cormorant Garamond, Inter
   ================================================ */

/* ── FILM OVERLAY ────────────────────────────── */

.kw-film-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #000;
  overflow: hidden;
}

.kw-film-overlay[hidden] {
  display: none;
}

/* ── EXIT BUTTON (top-right, always visible) ── */

.kw-film-exit-top {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.kw-film-exit-top:hover,
.kw-film-exit-top:focus-visible {
  border-color: #D4AF37;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  outline: none;
}

.kw-film-exit-label {
  color: rgba(212, 175, 55, 0.95);
}

/* ── MEDIA LAYER ─────────────────────────────── */

.kw-film-media-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* contain internal media z-indexes in their own stacking context */
}

.kw-film-img,
.kw-film-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  will-change: opacity, transform;
}

/* Portrait mode — fill the screen edge-to-edge; no black bars above/below.
   Both images and videos use cover so there are no bars in portrait. */
.kw-film-img,
.kw-film-vid {
  object-fit: cover;
}

/* Deterministic paint order inside the media layer:
   img buffers get z 1/2 inline (A/B crossfade), video sits above
   both, scrim above media, blackout above all media, gate panels
   and breach glow on top of the blackout. */
.kw-film-vid          { z-index: 3; }
.kw-film-scrim        { z-index: 4; }
.kw-film-blackout     { z-index: 5; }
.kw-film-gate         { z-index: 6; }
.kw-film-breach-glow  { z-index: 7; }

.kw-film-img.kw-media-active {
  opacity: 1;
}

.kw-film-vid.kw-media-active {
  opacity: 1;
}

.kw-film-img              { transition: opacity 0.5s ease; }
.kw-film-img.kw-cut       { transition: opacity 0.08s linear; }
.kw-film-img.kw-dissolve  { transition: opacity 0.9s ease; }
.kw-film-img.kw-dissolve-slow { transition: opacity 1.6s ease; }
.kw-film-vid.kw-cut       { transition: opacity 0.08s linear; }
.kw-film-vid.kw-dissolve  { transition: opacity 0.9s ease; }
.kw-film-vid.kw-dissolve-slow { transition: opacity 1.6s ease; }

/* Blackout layer (Phase 1–4) */
.kw-film-blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.kw-film-blackout.kw-black-active {
  opacity: 1;
}

/* ── NARRATION SCRIM (world section) ─────────── */
/* A quiet radial veil that keeps narration legible
   over imagery without dimming the scene edges.   */

.kw-film-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 65% at center,
              rgba(0, 0, 0, 0.44) 0%,
              rgba(0, 0, 0, 0.18) 55%,
              rgba(0, 0, 0, 0.02) 100%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.kw-film-scrim.kw-scrim-on {
  opacity: 1;
}

/* ── THE GATE OF LIGHT ───────────────────────── */
/* Two matte-black panels part like great doors.
   A hairline gold seam draws itself first.       */

.kw-film-gate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.kw-film-gate.kw-gate-active {
  visibility: visible;
}

.kw-gate-panel {
  position: absolute;
  top: -1%;
  bottom: -1%;
  width: 51%;
  background: #000;
  transition: transform 3s cubic-bezier(0.7, 0, 0.25, 1);
  will-change: transform;
}

.kw-gate-panel--l { left: 0; }
.kw-gate-panel--r { right: 0; }

.kw-film-gate.kw-gate-open .kw-gate-panel--l { transform: translateX(-103%); }
.kw-film-gate.kw-gate-open .kw-gate-panel--r { transform: translateX(103%); }

.kw-gate-seam {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  background: linear-gradient(to bottom,
              rgba(212, 175, 55, 0)    0%,
              rgba(212, 175, 55, 0.85) 18%,
              rgba(212, 175, 55, 0.85) 82%,
              rgba(212, 175, 55, 0)    100%);
  box-shadow: 0 0 22px 2px rgba(212, 175, 55, 0.4);
  opacity: 1;
  transition: transform 1.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.4s ease;
  will-change: transform, opacity;
}

.kw-gate-seam.kw-seam-drawn {
  transform: translateX(-50%) scaleY(1);
}

.kw-film-gate.kw-gate-open .kw-gate-seam {
  opacity: 0;
}

/* ── THE BREACH (hallway reveal) ─────────────── */
/* A thin vertical blade of light opens in the
   darkness, holds for a breath, then widens.     */

.kw-film-img.kw-breach-prep {
  clip-path: inset(-1% 50.05%);
  transition: clip-path 1.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.08s linear;
}

.kw-film-img.kw-breach-sliver {
  clip-path: inset(-1% 49.35%);
}

.kw-film-img.kw-breach-open {
  clip-path: inset(-1% -1%);
  transition: clip-path 3.4s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.08s linear;
}

.kw-film-breach-glow {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
              rgba(212, 175, 55, 0)     0%,
              rgba(232, 205, 130, 0.5) 30%,
              rgba(232, 205, 130, 0.5) 70%,
              rgba(212, 175, 55, 0)    100%);
  filter: blur(7px);
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}

.kw-film-breach-glow.kw-glow-on {
  opacity: 1;
}

/* ── CHAPTER MARK (world section) ────────────── */

.kw-film-chapter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* optical centering vs trailing letter-space */
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.85);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.kw-film-chapter.kw-chapter-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .kw-gate-panel { transition-duration: 0.6s; }
  .kw-gate-seam  { transition-duration: 0.6s, 0.6s; }
  /* The blanket reduced-motion rule further down forces
     `transition: opacity !important` on .kw-film-img, which would make
     the breach clip snap open. Restate the full transition here with
     !important — the higher specificity wins — so the hall still opens
     with one gentle 0.8s motion. */
  .kw-film-img.kw-breach-prep,
  .kw-film-img.kw-breach-open {
    transition: clip-path 0.8s ease, opacity 0.3s ease !important;
  }
}

/* ── KEN BURNS ───────────────────────────────── */

@keyframes kw-kb-zoom-in {
  from { transform: scale(1.0) translateZ(0); }
  to   { transform: scale(1.09) translateZ(0); }
}

@keyframes kw-kb-zoom-out {
  from { transform: scale(1.09) translateZ(0); }
  to   { transform: scale(1.0) translateZ(0); }
}

@keyframes kw-kb-drift-left {
  from { transform: scale(1.06) translate(1%, 0) translateZ(0); }
  to   { transform: scale(1.06) translate(-1%, 0) translateZ(0); }
}

@keyframes kw-kb-drift-up {
  from { transform: scale(1.06) translate(0, 0.5%) translateZ(0); }
  to   { transform: scale(1.06) translate(0, -0.5%) translateZ(0); }
}

/* The walk — immersive forward push that mimics actually walking
   into a room: aggressive scale, floor-anchored transform origin
   so the zoom pulls from ground level, and an upward Y drift so
   the horizon stays level exactly as a person's eye-line does when
   walking forward. Easing starts slow (stepping through the
   threshold) then accelerates — never plateaus or stalls. */
@keyframes kw-kb-walk {
  0%   { transform: scale(1.0)  translateY(0)    translateZ(0); }
  100% { transform: scale(1.20) translateY(-3%)  translateZ(0); }
}

.kw-kb-in   { animation: kw-kb-zoom-in  var(--kb-dur, 6s) ease-out forwards; }
.kw-kb-out  { animation: kw-kb-zoom-out var(--kb-dur, 6s) ease-in-out forwards; }
.kw-kb-drift-left { animation: kw-kb-drift-left var(--kb-dur, 7s) ease-in-out forwards; }
.kw-kb-drift-up   { animation: kw-kb-drift-up   var(--kb-dur, 7s) ease-in-out forwards; }
.kw-kb-walk {
  animation: kw-kb-walk var(--kb-dur, 10s) cubic-bezier(0.08, 0, 0.35, 1) forwards;
  transform-origin: center 68%;
}

/* ── SEAL LAYER ──────────────────────────────── */

.kw-film-seal-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  transform: translateY(-4%);
}

.kw-film-seal-layer.kw-seal-active {
  opacity: 1;
}

.kw-film-seal-layer img {
  width: clamp(250px, 54vw, 460px);
  height: auto;
  filter: drop-shadow(0 0 48px rgba(212,175,55,0.25));
}

/* Wordmark — lands beneath the seal with the boom, pure white. */
.kw-seal-wordmark {
  margin: 30px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 5.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em; /* recenters letter-spaced caps */
  color: #ffffff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.kw-film-seal-layer.kw-seal-word-on .kw-seal-wordmark {
  opacity: 1;
  transform: translateY(0);
}

/* Slogan — quiet gold line under the wordmark. */
.kw-seal-slogan {
  margin: 16px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 3.8vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #D4AF37;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kw-film-seal-layer.kw-seal-slogan-on .kw-seal-slogan {
  opacity: 1;
  transform: translateY(0);
}

/* The bloom is keyed to activation — not to page load — so the
   scale-in genuinely plays on the climax frame, every run/replay. */
.kw-film-seal-layer.kw-seal-active img {
  animation: kw-seal-bloom 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Landscape: anchor images to the top ──────────
   In landscape mode phones hold the viewport wide and
   short. `cover` still fills edge-to-edge (no bars) but
   the default `center center` crops heads off the top.
   Switching to `center top` anchors the subject's head/
   top of frame to the top of the viewport so faces are
   never clipped, while still filling the full screen.
   Applies to all landscape viewports (phones + tablets).
   (Must sit after the base rules above to win cascade.)  */
@media (orientation: landscape) {
  .kw-film-img {
    object-fit: contain;
    object-position: center center;
  }
  /* The archetype videos are framed tight on their subjects; `cover`
     on a wide, short screen crops top/bottom and pushes faces even
     closer. `contain` shows the video's ENTIRE frame — the maximum
     zoom-out the footage allows — matted onto black. */
  .kw-film-vid {
    object-fit: contain;
  }
  .kw-film-seal-layer img {
    width: clamp(140px, 38vh, 260px);
  }
  .kw-seal-wordmark { margin-top: 18px; font-size: clamp(1.1rem, 5vh, 1.6rem); }
  .kw-seal-slogan   { margin-top: 10px; font-size: 1rem; }
}

@keyframes kw-seal-bloom {
  from { transform: scale(0.2); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── TEXT LAYER ──────────────────────────────── */

.kw-film-text-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px clamp(28px, 10vw, 140px) 80px;
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

.kw-film-text-layer.kw-text-lower {
  justify-content: flex-end;
  padding-bottom: clamp(100px, 18vh, 180px);
}

.kw-film-line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  margin: 0;
  padding: 0;
  font-style: normal;
}

.kw-film-line.kw-line-in {
  opacity: 1;
  transform: translateY(0);
}

.kw-film-line.kw-line-out {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Second sentence of a card, revealed while the first stays.
   The animation starts when the line enters the DOM (showAt),
   so the delay is relative to the line's own reveal. */
.kw-line-late {
  display: block;
  margin-top: 0.55em;
  opacity: 0;
  color: #D4AF37;
  animation: kw-line-late-in 0.7s ease 3s forwards;
}

@keyframes kw-line-late-in {
  to { opacity: 1; }
}

/* Primary text */
.kw-film-line--primary {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  color: #e8e4dd;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 820px;
}

/* "The Turn" — larger, for Phase 4 and "This is not that" */
.kw-film-line--primary.kw-size-turn {
  font-size: clamp(1.8rem, 5.5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.015em;
}

/* Phase 7 closing lines */
.kw-film-line--primary.kw-size-final {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 400;
}

/* Archetype label (Phase 6) */
.kw-film-line--label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.65rem, 1.4vw, 0.78rem);
  color: var(--color-gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ── CONTROLS ────────────────────────────────── */

.kw-film-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  z-index: 10;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: auto;
}

.kw-film-ctrl {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.kw-film-ctrl:hover,
.kw-film-ctrl:focus-visible {
  color: var(--color-gold);
  outline: none;
}

.kw-film-ctrl svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kw-film-progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.12);
  position: relative;
  cursor: pointer;
  transition: height 0.15s ease;
}
/* Expand tap target without changing the visual line */
.kw-film-progress-bar::before {
  content: '';
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: 0;
  right: 0;
}

.kw-film-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-gold);
  transition: width 0.6s linear;
  pointer-events: none;
}

/* ── Seek (drag) state ───────────────────────── */
/* While dragging, grow the bar and show a gold thumb dot */
.kw-film-progress-bar.kw-seeking {
  height: 3px;
}
.kw-film-progress-bar.kw-seeking .kw-film-progress-fill {
  transition: none !important;
}
/* Gold dot thumb at the right edge of the fill */
.kw-film-progress-bar.kw-seeking .kw-film-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(212,175,55,0.5);
}

/* ── THE FINAL GATE (end reveal) ─────────────── */
/* At the film's end the overlay turns transparent behind the closed
   gate panels and every other film layer fades out. When the panels
   part, the live homepage is standing behind them. The overlay is
   pointer-transparent so the page is usable the moment it appears. */

.kw-film-overlay.kw-film-reveal {
  background: transparent;
  pointer-events: none;
}

.kw-film-reveal .kw-film-img,
.kw-film-reveal .kw-film-vid,
.kw-film-reveal .kw-film-blackout,
.kw-film-reveal .kw-film-scrim,
.kw-film-reveal .kw-film-breach-glow,
.kw-film-reveal .kw-film-seal-layer,
.kw-film-reveal .kw-film-text-layer,
.kw-film-reveal .kw-film-chapter,
.kw-film-reveal .kw-film-controls,
.kw-film-reveal .kw-film-exit-top {
  opacity: 0 !important;
  transition: opacity 1.1s ease !important;
  pointer-events: none !important;
}

/* ── MOBILE ADJUSTMENTS ──────────────────────── */

@media (max-width: 600px) {
  .kw-film-line--primary {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }

  .kw-film-line--primary.kw-size-turn {
    font-size: clamp(1.55rem, 6.5vw, 2.4rem);
  }

  .kw-film-text-layer {
    padding: 70px 24px;
  }

  .kw-film-ctrl svg {
    width: 20px;
    height: 20px;
  }
}

/* ── REDUCED MOTION ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .kw-film-img,
  .kw-film-vid,
  .kw-film-line,
  .kw-film-seal-layer,
  .kw-film-seal-layer img {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
  /* Wordmark + slogan keep their opacity fade but lose the rise. */
  .kw-seal-wordmark,
  .kw-seal-slogan {
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
}

/* ── SOUND HINT ──────────────────────────────── */

.kw-film-sound-hint {
  background: transparent;
  border: none;
  color: rgba(212, 175, 55, 0.75);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 4px;
  margin-left: -4px;
  white-space: nowrap;
  animation: kwSoundHintIn 1.2s ease both;
  /* Eliminate iOS 300 ms tap delay and suppress highlight ring */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.kw-film-sound-hint:hover,
.kw-film-sound-hint:focus-visible {
  color: #D4AF37;
  outline: none;
}

@keyframes kwSoundHintIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kw-film-sound-hint { animation: none; }
}

@media (max-width: 480px) {
  .kw-film-sound-hint { letter-spacing: 0.12em; }
  .kw-film-controls.kw-hint-on .kw-film-progress-bar { display: none; }
}

/* ── NO WHITE CAN EVER FLASH AT THE FRAME EDGES ──
   The homepage body is warm white. On mobile, compositor layer
   teardown at scene transitions (image → black card) and browser
   toolbar resizes can expose a sub-pixel seam around the fixed
   overlay for a frame — which flashed the white page beneath.
   Two guarantees kill this permanently, whatever the cause:
   1. While the film is live the page beneath is itself black,
      so anything that leaks through leaks black.
   2. The overlay paints a thick black ring beyond its own box,
      covering any fractional-pixel gap at the viewport edges. */
body.kw-film-live {
  background: #000 !important;
}

.kw-film-overlay {
  outline: 12px solid #000;
}

/* ── PAGE WIDGETS DURING FILM ────────────────────
   While the film is live every page widget disappears —
   only the film's own controls may occupy the corners. */
body.kw-film-live .language-selector,
body.kw-film-live .uwy,
body.kw-film-live .userway_buttons_wrapper,
body.kw-film-live #userwayAccessibilityIcon,
body.kw-film-live #kw-chat-widget {
  display: none !important;
  visibility: hidden !important;
}