/* ============================================================================
   KEY JOURNEY LAYER — additive r28 extension (light liquid-glass, site tokens)
   Everything here is scoped under .kj-root / html.kj-lock so the mother theme
   (keylight.css) is never overridden outside the home journey experience.
   ============================================================================ */

/* ---------- Instant scroll lock while the film warms up (JS removes it) --- */
html.kj-lock, html.kj-lock body { overflow: hidden; height: 100%; }

.kj-root { position: relative; }

/* ---------- Loader (site-flavoured liquid glass) -------------------------- */
.kj-loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background:
    radial-gradient(ellipse 60% 44% at 50% 30%, rgba(140, 240, 255, .16), transparent 70%),
    var(--bg, #07080B);
  transition: opacity .7s ease, visibility .7s ease;
}
.kj-loader.kj-done { opacity: 0; visibility: hidden; pointer-events: none; }
.kj-loader-mark { filter: drop-shadow(0 6px 24px rgba(75, 234, 255, .25)); animation: kj-breathe 2.4s ease-in-out infinite; }
@keyframes kj-breathe { 50% { transform: translateY(-6px) scale(1.04); } }
.kj-loader-word { font-weight: 700; letter-spacing: .34em; font-size: .78rem; color: var(--text-muted); }
.kj-loader-track {
  width: min(240px, 60vw); height: 3px; border-radius: 99px; overflow: hidden;
  background: rgba(245, 247, 250, .10);
}
.kj-loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3D7BFF, #4BEAFF);
  border-radius: 99px;
  transition: width .25s ease;
}
.kj-loader-pct { font-size: .72rem; font-weight: 600; color: var(--text-dim); letter-spacing: .08em; }

/* ---------- The pinned corner film (top-LEFT, flush; feather right/bottom) */
.kj-film {
  /* top edge sits flush with the header's bottom edge (measured in JS,
     fallback is the header's geometry on wide screens) */
  position: fixed; top: var(--kj-hdr-bottom, 92px); left: 0; right: auto;
  width: clamp(390px, 34vw, 594px); aspect-ratio: 16 / 9;
  z-index: 90; pointer-events: none;
  contain: strict;
}
.kj-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* feathered right + bottom edges done by the compositor (zero per-frame canvas work) */
.kj-film.kj-cssmask canvas {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26%), linear-gradient(to top, transparent 0, #000 32%);
  mask-image: linear-gradient(to left, transparent 0, #000 26%), linear-gradient(to top, transparent 0, #000 32%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* soft wiggle once the last frame lands — origin near the corner pivot */
@keyframes kj-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30%      { transform: rotate(-1.1deg) scale(1.035); }
  65%      { transform: rotate(.7deg) scale(1.028); }
}
.kj-film.kj-at-end canvas { animation: kj-wiggle 2.8s cubic-bezier(.36, .07, .19, .97) 1; transform-origin: 18% 18%; }

/* once the story is told the film dissolves and lets the page breathe */
.kj-film.kj-gone {
  opacity: 0; visibility: hidden;
  transform: scale(.94); transform-origin: top left;
}
.kj-film { transition: opacity .85s ease, visibility .85s, transform .85s ease; }

/* ---------- Text films OVER the corner film + feathered protective halo ----
   The page copy must never be crisped by the pinned film: every mother's
   content section stacks above it, and the hero copy rides on a soft-edged
   (feathered) ink halo so it stays readable where it crosses the video. */
.kj-root > section.section { position: relative; z-index: 95; }

/* hero: pull the first texts up — tighter top gap, less dead air — and
   centre the whole hero copy vertically inside the first screen */
.kj-root > section.section:first-of-type {
  margin-top: -26px;
  padding-block-start: clamp(14px, 2.6vh, 28px) !important;
  padding-block-end: clamp(40px, 5.4vh, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--kj-hdr-bottom, 92px) - 26px);
}
.kj-root > section.section:first-of-type .container { position: relative; z-index: 1; }

/* the feathered protective box: a dark oval halo behind the hero copy —
   soft edges on all sides (feather), blurring whatever of the film runs
   beneath it so the words always win */
.kj-root > section.section:first-of-type .container::before {
  content: ""; position: absolute; z-index: -1; inset: -20px -26px -34px;
  background:
    radial-gradient(58% 52% at 50% 45%, rgba(5, 7, 11, 0.90) 0%, rgba(5, 7, 11, 0.68) 44%, rgba(5, 7, 11, 0.30) 68%, transparent 86%);
  border-radius: 56px;
  -webkit-mask-image: radial-gradient(58% 52% at 50% 45%, #000 38%, transparent 80%);
  mask-image: radial-gradient(58% 52% at 50% 45%, #000 38%, transparent 80%);
  pointer-events: none;
}

/* the glass blur re-renders on every film frame: keep it only where a real GPU + pointer
   exist (desktop); phones/tablets get the same halo without the per-frame blur cost */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .kj-root > section.section:first-of-type .container::before {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}

/* the hero copy no longer dodges the film — it floats above it, protected by
   the feathered halo, so the old lateral offset is intentionally gone */

/* the hero copy fades away (JS sets inline opacity) before it can slide under the pinned film */
.kj-root > section.section:first-of-type { will-change: opacity; }

/* ---------- Scroll cue, pinned to the hero's bottom edge ------------------ */
.kj-root > section.section:first-of-type { position: relative; }
.kj-cue {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: .78rem; font-weight: 500;
}
.kj-cue .kj-line { width: 1px; height: 46px; background: linear-gradient(180deg, #4BEAFF, transparent); position: relative; overflow: hidden; }
.kj-cue .kj-line::after { content: ''; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: #F5F7FA; animation: kj-drip 2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes kj-drip { to { top: 130%; } }

/* ---------- Journey chapters (right lane, mother typography) -------------- */
.kj-journey { position: relative; }
.kj-chapter {
  min-height: 100svh; display: flex; align-items: center;
  padding-inline: clamp(24px, 9vw, 130px); position: relative;
}
.kj-ch-inner {
  max-width: min(560px, 88vw);
  opacity: .22; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
[dir="rtl"] .kj-ch-inner { margin-inline-end: auto; margin-inline-start: 0; }
[dir="ltr"] .kj-ch-inner { margin-inline-start: auto; margin-inline-end: 0; }
.kj-chapter.kj-active .kj-ch-inner { opacity: 1; transform: none; }
.kj-ch-num { display: inline-block; margin-block-end: 16px !important; }
.kj-ch-title {
  font-size: clamp(1.55rem, 3.6vw, 2.5rem); font-weight: 700; line-height: 1.55;
  color: var(--text-main); text-wrap: balance; margin: 0;
}
.kj-ch-body {
  margin: 16px 0 0; color: var(--text-muted);
  font-size: clamp(.92rem, 1.4vw, 1.05rem); line-height: 2.05; text-wrap: balance;
}
.kj-amb {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 26% at 24% 22%, rgba(140, 240, 255, .10), transparent 70%);
  opacity: 0; transition: opacity .8s ease;
}
[dir="ltr"] .kj-amb { background: radial-gradient(ellipse 34% 26% at 76% 22%, rgba(140, 240, 255, .10), transparent 70%); }
.kj-chapter.kj-active .kj-amb { opacity: 1; }

/* ---------- Journey progress rail (light glass edge dots) ----------------- */
.kj-rail {
  position: fixed; inset-inline-end: clamp(14px, 2.6vw, 32px); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 95;
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.kj-rail.kj-show { opacity: 1; pointer-events: auto; }
.kj-count { font-size: .68rem; font-weight: 600; letter-spacing: .12em; color: var(--text-dim); }
.kj-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(75, 234, 255, .45); background: rgba(13, 15, 20, .55);
  transition: background .3s, box-shadow .3s, scale .3s, border-color .3s;
}
.kj-dot:hover { border-color: #8CF0FF; }
.kj-dot.kj-on { background: #4BEAFF; border-color: #4BEAFF; box-shadow: 0 0 0 4px rgba(75, 234, 255, .18), 0 0 14px rgba(75, 234, 255, .55); scale: 1.35; }

/* ---------- Staggered reveal (armed only by JS; safe without it) ---------- */
body.kj-rv [data-kj-rv] {
  opacity: 0; translate: 0 30px;
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1), translate .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--kj-rvd, 0ms);
}
body.kj-rv [data-kj-rv].kj-rv-on { opacity: 1; translate: 0 0; }

/* ---------- Mobile / tablet (stacked layout) -------------------------------
   The film is a wide pinned card at the top. Chapter copy used to scroll up *under*
   it. Now each chapter is only a scroll spacer; its copy is pinned right below the
   film and cross-fades, so text and video can never overlap — in any language. */
@media (max-width: 960px) {
  .kj-root { --kj-film-h: calc(clamp(270px, 83vw, 430px) * .5625); }
  .kj-film { width: clamp(270px, 83vw, 430px); }
  .kj-root > section.section:first-of-type { padding-block-start: clamp(20px, 3.4vh, 36px) !important; }
  .kj-chapter { min-height: 88svh; display: block; padding-inline: 0; }
  .kj-journey .kj-chapter .kj-ch-inner {
    position: fixed; z-index: 96;
    top: calc(var(--kj-hdr-bottom, 70px) + var(--kj-film-h) + clamp(14px, 3vh, 26px));
    inset-inline: clamp(20px, 6vw, 40px);
    width: auto; max-width: 560px;
    margin: 0 !important;
    padding-inline-end: 26px;           /* keeps the copy clear of the progress rail */
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
  }
  [dir="rtl"] .kj-ch-inner, [dir="ltr"] .kj-ch-inner { margin: 0 !important; }
  .kj-journey.kj-in .kj-chapter.kj-active .kj-ch-inner { opacity: 1; transform: none; pointer-events: auto; }
  /* the hero's blurred halo is wider than the container (-26px each side): on a phone that widened the whole
     page by ~27px (empty strip on the left in RTL, clipped fixed UI). Clip it. */
  .kj-root > section.section:first-of-type { overflow-x: clip; }
  .kj-amb { display: none; }
  .kj-ch-title { font-size: clamp(1.4rem, 6.2vw, 2rem); line-height: 1.5; }
  .kj-ch-body { font-size: clamp(.9rem, 3.7vw, 1rem); line-height: 1.95; }
  .kj-cue { display: none; }
  .kj-rail { inset-inline-end: 9px; gap: 11px; }
  .kj-dot { width: 8px; height: 8px; }
}

/* ---------- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kj-loader-mark, .kj-cue .kj-line::after { animation: none; }
  .kj-film.kj-at-end canvas { animation: none; }
  html.kj-lock, html.kj-lock body { overflow: auto; height: auto; }
  .kj-loader { display: none !important; }
  .kj-ch-inner, .kj-film, [data-kj-rv] { transition-duration: .01ms !important; }
}