/* The Package: page-specific skin over the inherited base.
   Palette sampled off HIS brand: deep blue night, electric blue accent,
   paper text. The world opens employee-grey (age-feel drains chapters
   before the mentor) and arrives in full color. */

:root{
  --night:#070b18;
  --night-2:#0c1226;
  --lt:#eef1f8;
  --lt-2:#8b93ad;
  --lt-3:#c6cbdd;
  --gold:#6f8cff;            /* the accent slot the base css reads */
  --line:rgba(238,241,248,.14);
}
html{ background:var(--night) }
body{ background:var(--night); color:var(--lt) }

/* ---- the opening sentence ---- */
.open{
  min-height:100svh; display:grid; place-content:center; text-align:center;
  padding:0 1.5rem;
}
.open__line{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.7rem,4.2vw,3.2rem); line-height:1.25;
  max-width:24ch; margin:0;
}
.open__hint{
  margin-top:3rem; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--lt-2);
}

/* ---- the journey bleeds ---- */
.jour .bleed{
  position:relative; margin:0; width:100%;
  min-height:92svh; overflow:hidden;
  background:var(--night-2);
}
.jour .bleed img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.jour .bleed figcaption{
  position:absolute; left:clamp(1.2rem,5vw,4rem); bottom:clamp(1.2rem,5vw,3rem);
  max-width:34ch; font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.5;
  color:var(--lt);
  text-shadow:0 1px 18px rgba(7,11,24,.85);
}
.jour .bleed figcaption b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,2.8vw,2.3rem); font-weight:600; line-height:1.1;
  margin-bottom:.35rem;
}

/* ---- the mentor ---- */
.mentor{ padding:clamp(4rem,10vw,8rem) 0 }
.mentor .wrap{ max-width:60rem; margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem) }
.mentor__real{
  display:block; width:100%; height:auto; margin:clamp(2rem,5vw,3rem) 0;
}
.mentor__line{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.35; max-width:34ch;
}

/* ---- proof ---- */
.proof{ padding:clamp(3rem,8vw,6rem) 0 }
.proof .wrap{ max-width:60rem; margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem) }
.proof__shot{ display:block; width:100%; height:auto; margin-top:1.6rem;
  border:1px solid var(--line) }

/* ---- ask ---- */
.ask{ padding:clamp(4rem,10vw,8rem) 0; text-align:center }
.ask .wrap{ max-width:44rem; margin:0 auto; padding:0 1.5rem }

/* base.css carries .sec__tag, .lede, .btn, [data-rise], .age-line, .legal */


/* ==== v2: the film stations (NMN framework) ============================== */
.hero__track{ height:340vh; position:relative }
.hero__stage, .st__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--night-2);
}
.hero__stage video, .st__stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--night-2);
}
.hero__head{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; text-align:center;
  background:rgba(7,11,24,.55);
  transition:opacity .8s ease;
  padding:0 1.5rem;
}
.hero__head.is-gone{ opacity:0; pointer-events:none }
.st__track{ height:260vh; position:relative }
.st__cap{
  position:absolute; z-index:2;
  left:clamp(1.2rem,5vw,4rem); bottom:clamp(1.2rem,5vw,3rem);
  max-width:34ch; font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.5;
  color:var(--lt); text-shadow:0 1px 18px rgba(7,11,24,.85);
}
.st__cap b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,2.8vw,2.3rem); font-weight:600; line-height:1.1;
  margin-bottom:.35rem;
}
/* the mentor chapter: his real set breathing behind the words */
.mentor{ position:relative; overflow:hidden }
.mentor__setfilm video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.22; pointer-events:none;
}
.mentor .wrap{ position:relative; z-index:1 }
.mentor__film video{ display:block; width:100%; height:auto }
@media (max-width:860px){
  .hero__track{ height:auto }
  .hero__stage{ position:static; height:92svh }
  .st__track{ height:auto }
  .st__stage{ position:static; height:76svh }
}

/* the kilometer chip: quiet, present, screenshotable */
.km{
  position:fixed; top:1.1rem; right:1.2rem; z-index:40;
  font-size:.82rem; letter-spacing:.08em; color:var(--lt-3);
  background:rgba(7,11,24,.55); border:1px solid var(--line);
  padding:.45rem .8rem; border-radius:999px;
  opacity:0; transition:opacity .5s ease;
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.km b{ color:var(--lt); font-weight:600 }
.km.is-on{ opacity:1 }
.km.is-done{ opacity:1; border-color:var(--gold); color:var(--lt) }

/* the stance: the honest villain named */
.stance{ padding:clamp(4rem,10vw,7rem) 0; text-align:center }
.stance .wrap{ max-width:44rem; margin:0 auto; padding:0 1.5rem }
.stance p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.35;
}
.stance p b{ color:var(--gold); font-weight:600 }

/* ==== the ring: sci-fi voice carousel ==================================== */
.ringsec{ padding:clamp(4rem,9vw,7rem) 0 0 }
.ring__hint{ color:var(--lt-2); font-size:.95rem }
.ring{
  height:clamp(22rem,50vh,30rem); margin-top:2rem;
  perspective:1400px; touch-action:pan-y;
  display:grid; place-items:center;
  cursor:grab; user-select:none;
  overflow:hidden;
}
.ring:active{ cursor:grabbing }
.ring__wheel{
  position:relative; width:280px; height:280px;
  transform-style:preserve-3d;
  will-change:transform;
}
.ring__card{
  position:absolute; inset:0;
  padding:1.1rem 1.2rem;
  background:linear-gradient(160deg, rgba(20,28,58,.92), rgba(9,13,30,.94));
  border:1px solid rgba(111,140,255,.35);
  border-radius:14px;
  box-shadow:0 0 24px rgba(111,140,255,.12), inset 0 0 30px rgba(111,140,255,.05);
  backface-visibility:hidden;
  display:flex; flex-direction:column; gap:.5rem;
  transition:box-shadow .3s ease, border-color .3s ease;
}
.ring__card p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem; line-height:1.35; margin:0;
  color:var(--lt);
}
.ring__rec{
  font-size:.64rem; letter-spacing:.3em; color:#6f8cff;
  font-variant-numeric:tabular-nums;
}
.ring__play{
  margin-top:auto; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(111,140,255,.5); position:relative;
}
.ring__play::before{
  content:""; position:absolute; left:12px; top:9px;
  border-left:10px solid #9db2ff; border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.ring__card.is-front{
  border-color:rgba(111,140,255,.85);
  box-shadow:0 0 44px rgba(111,140,255,.35), inset 0 0 30px rgba(111,140,255,.1);
}
.ring__card.is-playing .ring__play{
  border-color:#fff; animation:pulse 1.2s ease infinite;
}
.ring__card.is-playing .ring__play::before{
  border:0; width:10px; height:14px; left:12px; top:10px;
  border-left:4px solid #fff; border-right:4px solid #fff;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(111,140,255,.5) }
  50%{ box-shadow:0 0 0 10px rgba(111,140,255,0) }
}
@media (max-width:860px){
  .ring{ perspective:1000px }
  .ring__wheel{ width:240px; height:180px }
}

.ring__card video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:13px;
}
.ring__card[data-video]{ padding:0; overflow:hidden }
.ring__card[data-video] .ring__rec{
  position:absolute; top:.7rem; left:.8rem; z-index:2;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.ring__snd{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(7,11,24,.45);
}
.ring__snd::before{
  content:"\1F507"; position:absolute; inset:0;
  display:grid; place-content:center; font-size:14px;
}
.ring__card.is-playing .ring__snd::before{ content:"\1F50A" }

.offer__list{
  margin:1.4rem auto 0; max-width:34rem; text-align:left;
  display:grid; gap:.6rem; padding:0;
}
.offer__list li{
  list-style:none; padding-left:1.5rem; position:relative;
  color:var(--lt-3); line-height:1.5;
}
.offer__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.45rem; height:.45rem; border-radius:50%;
  background:var(--gold);
}

/* ==== the cake: one stage, films as dissolving layers ==================== */
.jn__track{ position:relative }
.jn__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--night-2);
}
.jn__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--night-2);
  opacity:0;
}
.jn__film:first-of-type{ opacity:1 }
.jn__cap{
  position:absolute; z-index:30;
  left:clamp(1.2rem,5vw,4rem); bottom:clamp(1.2rem,5vw,3rem);
  max-width:34ch; font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.5;
  color:var(--lt); text-shadow:0 1px 18px rgba(7,11,24,.85);
  opacity:0; transform:translateY(.6rem);
  transition:opacity .5s ease, transform .5s ease;
}
.jn__cap.is-on{ opacity:1; transform:none }
.jn__cap b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,2.8vw,2.3rem); font-weight:600; line-height:1.1;
  margin-bottom:.35rem;
}
@media (max-width:860px){
  .jn__track{ height:auto !important }
  .jn__stage{ position:static; height:auto; overflow:visible }
  .jn__film{ position:static; height:72svh; opacity:1 !important }
  .jn__cap{ position:static; opacity:1; transform:none; margin:.8rem 1.2rem 2rem;
    text-shadow:none }
}

/* ==== the manga: ink chapters with narration boxes ======================= */
.manga{ padding:clamp(3rem,7vw,5rem) 0 0; overflow:hidden }
.mg__panel{
  position:relative; margin:clamp(2rem,5vw,3.5rem) auto;
  width:min(72rem, 92vw);
  border:6px solid #eef1f8; border-radius:4px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  transform:rotate(-.5deg);
  background:#0c1226;
}
.mg__panel--r{ transform:rotate(.5deg) }
.mg__panel img{ display:block; width:100%; height:auto; min-height:200px }
.mg__box{
  position:absolute; top:-1px; left:-1px;
  max-width:44ch;
  background:#eef1f8; color:#0c1226;
  padding:.8rem 1.1rem .9rem;
  font-size:clamp(.9rem,1.4vw,1.05rem); line-height:1.45;
  border-bottom-right-radius:4px;
}
.mg__box b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.1; margin-bottom:.2rem;
}
.mg__real{
  width:min(60rem, 88vw); margin:clamp(2.5rem,6vw,4rem) auto;
}
.mg__real video{ display:block; width:100%; height:auto }
.mg__realtag{
  margin:.7rem 0 0; text-align:center; color:var(--lt-2);
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:860px){
  .mg__box{ position:static; max-width:none }
}

/* ==== the manga cake ==================================================== */
.mk__track{ position:relative }
.mk__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:#0a0e1e;
}
.mk__layer{
  position:absolute; inset:0; opacity:0;
}
.mk__layer:first-child{ opacity:1 }
.mk__layer img, .mk__layer video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform-origin:center;
  will-change:transform;
}
.mk__box{
  position:absolute; top:clamp(1rem,4vh,3rem); left:clamp(1rem,4vw,3.5rem);
  max-width:46ch; z-index:5;
  background:#eef1f8; color:#0c1226;
  padding:.85rem 1.15rem .95rem;
  font-size:clamp(.92rem,1.4vw,1.08rem); line-height:1.45;
  border-radius:3px; box-shadow:0 10px 40px rgba(0,0,0,.45);
  opacity:0; transform:translateY(-.5rem);
  transition:opacity .45s ease, transform .45s ease;
}
.mk__box.is-on{ opacity:1; transform:none }
.mk__box b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.1; margin-bottom:.25rem;
}
@media (max-width:860px){
  .mk__track{ height:auto !important }
  .mk__stage{ position:static; height:auto; overflow:visible }
  .mk__layer{ position:static; opacity:1 !important; margin-bottom:1.5rem }
  .mk__layer img, .mk__layer video{ position:static; height:auto; transform:none !important }
  .mk__box{ position:static; opacity:1; transform:none; margin:.6rem 1rem 0 }
}

/* ==== the constellation hero: flying through real voices ================= */
.hero__stage[data-field]{
  perspective:900px; perspective-origin:50% 50%;
  background:radial-gradient(120% 100% at 50% 20%, #101736 0%, #070b18 60%);
}
.field__world{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.field__card{
  position:absolute; left:50%; top:50%;
  width:clamp(180px,20vw,300px); aspect-ratio:1;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(111,140,255,.4);
  box-shadow:0 0 30px rgba(111,140,255,.18);
  cursor:pointer;
  transition:box-shadow .3s ease;
}
.field__card video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.field__card .ring__rec{
  position:absolute; top:.6rem; left:.7rem;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.field__card.is-loud{
  border-color:#fff;
  box-shadow:0 0 60px rgba(140,170,255,.5);
}
@media (max-width:860px){
  .field__card{ width:150px }
}

/* ==== the seamless pass: no frames, no boxes, one world ================== */
/* manga narration: ink on the art, not paper over it */
.mk__box{
  background:none; color:var(--lt);
  box-shadow:none; border-radius:0;
  padding:0;
  top:auto; bottom:clamp(1.4rem,6vh,3.5rem); left:clamp(1.2rem,5vw,4rem);
  max-width:38ch;
  text-shadow:0 2px 24px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8);
  font-size:clamp(1rem,1.5vw,1.15rem);
}
.mk__box b{
  font-size:clamp(1.7rem,3vw,2.6rem);
  margin-bottom:.35rem;
}
/* his real film breaks through FULL SCREEN, no box */
.mg__real{ width:100%; margin:0 }
.mg__real video{ width:100%; height:100svh; object-fit:cover }
.mg__realtag{
  position:relative; margin:-3.4rem 0 0; padding-bottom:1.6rem;
  text-shadow:0 1px 12px rgba(0,0,0,.8);
}
/* mentor chapter film full bleed too */
.mentor__film video{ width:100vw; margin-left:calc(50% - 50vw); height:80svh; object-fit:cover }
/* cards lose their hard borders, keep only light */
.field__card, .ring__card{ border:0 }
.field__card{ box-shadow:0 0 40px rgba(111,140,255,.22) }
/* proof shots full width, no hairline */
.proof__shot{ border:0 }

/* ==== the three rendered worlds =========================================== */
.hero__stage[data-field]{
  background:url('../img/canyon_bg.webp?v=1') center/cover no-repeat #070b18;
}
.field__card{
  width:clamp(240px,26vw,420px);
}
.hero__head{
  background:none;
  display:block;
  top:auto; left:clamp(1.2rem,5vw,4rem); bottom:clamp(1.4rem,6vh,3.2rem);
  right:auto;
}
.hero__head .open__line{
  text-align:left; font-size:clamp(1.4rem,2.6vw,2.3rem); max-width:26ch;
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.hero__head .open__hint{ text-align:left; margin-top:1rem }
.ask{
  background:url('../img/vortex_bg.webp?v=1') center/cover no-repeat #070b18;
  padding:clamp(8rem,18vw,14rem) 0;
}
.ask h2, .ask .lede, .ask .offer__list li{ text-shadow:0 2px 20px rgba(0,0,0,.85) }
.stance{
  background:url('../img/calm_bg.webp?v=1') center/cover no-repeat #070b18;
  padding:clamp(7rem,16vw,12rem) 0;
}
.stance p{ text-shadow:0 2px 22px rgba(0,0,0,.9) }

/* ==== the story veil ===================================================== */
.veil{ position:fixed; inset:0; z-index:-1; background:var(--night) }
.veil video{ width:100%; height:100%; object-fit:cover; opacity:.55 }
body{ background:transparent }
html{ background:var(--night) }
/* sections that PERFORM stay opaque; sections that SPEAK are glass */
.mentor, .proof, .ringsec{ background:transparent }
.stance{ background:none; padding:clamp(6rem,14vw,10rem) 0 }
.inter{ padding:clamp(7rem,16vw,11rem) 0 }
.inter__line{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.35;
  max-width:34ch; text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.inter__line b{ display:block; font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:.3rem }

/* the hero opens on the veil itself: cards over drawn Beijing rain */
.hero__stage[data-field]{ background:transparent }

/* ==== holo tiles: the cards become glass instruments ===================== */
.field__card, .ring__card{
  background:rgba(14,20,44,.32);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  padding:10px; border-radius:16px;
  box-shadow:0 0 0 1px rgba(140,170,255,.28), 0 0 44px rgba(111,140,255,.16);
}
.field__card video, .ring__card video{
  position:static; width:100%; height:calc(100% - 0px);
  border-radius:10px; opacity:.94;
}
.field__card{ display:flex; }
/* HUD corner brackets */
.field__card::before, .ring__card::before{
  content:""; position:absolute; inset:4px; pointer-events:none;
  background:
    linear-gradient(#9db2ff,#9db2ff) top left/14px 1.5px,
    linear-gradient(#9db2ff,#9db2ff) top left/1.5px 14px,
    linear-gradient(#9db2ff,#9db2ff) bottom right/14px 1.5px,
    linear-gradient(#9db2ff,#9db2ff) bottom right/1.5px 14px;
  background-repeat:no-repeat; opacity:.75;
}
/* a slow holo sheen crossing the glass */
.field__card::after, .ring__card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background:linear-gradient(115deg, transparent 30%, rgba(160,190,255,.14) 45%, transparent 60%);
  background-size:280% 100%;
  animation:sheen 5.5s linear infinite;
}
@keyframes sheen{ from{ background-position:120% 0 } to{ background-position:-160% 0 } }
.field__card .ring__rec{ color:#b8c8ff; text-shadow:0 0 12px rgba(140,170,255,.8) }
.field__card.is-loud{
  background:rgba(20,30,66,.5);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8), 0 0 70px rgba(140,170,255,.55);
}

/* the footer stands on solid ground, always readable */
.legal{ background:var(--night); position:relative; z-index:1;
  padding-top:2.5rem; }

/* ==== the cinema: his own films =========================================== */
.cinema{ padding:clamp(4rem,9vw,7rem) 0 0 }
.cinema__film{
  display:block; width:min(72rem,94vw); margin:1.6rem auto 0;
  border-radius:6px; background:#000;
}
.cinema__film--sq{ width:min(34rem,90vw) }

.cinema__sound{
  display:block; margin:1rem auto 0;
  background:var(--gold); color:#101426; border:0;
  font-weight:600; font-size:.95rem;
  padding:.8rem 1.7rem; border-radius:999px; cursor:pointer;
}

/* the ask stays a storm, but the words win: night tint over the vortex */
.ask{
  background:
    linear-gradient(rgba(7,11,24,.68), rgba(7,11,24,.68)),
    url('../img/vortex_bg.webp?v=1') center/cover no-repeat #070b18;
}
.ask .offer__list li{ color:var(--lt) }

/* the 3D plane must never eat its children's clicks */
.field__world{ pointer-events:none }
.field__card{ pointer-events:auto }

/* ==== the tribe: three reels of the real life ============================ */
.tribe{ padding:clamp(4rem,9vw,7rem) 0 0 }
.tribe__row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.5vw,1.4rem);
  width:min(80rem,96vw); margin:2rem auto 0;
}
.tribe__reel{ margin:0; position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:9/16; cursor:pointer;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.tribe__reel video{ width:100%; height:100%; object-fit:cover; display:block }
.tribe__reel.is-loud{ box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 0 60px rgba(140,170,255,.4) }
@media (max-width:860px){
  .tribe__row{ grid-template-columns:1fr; width:min(26rem,92vw) }
}

/* ==== the tribe fan: glossy screens in perspective ======================= */
.tribe{ padding:0; background:#05070f }
.tribe__stage{
  position:relative; min-height:100svh; overflow:hidden;
  perspective:1300px;
}
.tribe__head{ position:absolute; top:clamp(2rem,6vh,4rem); left:clamp(1.2rem,5vw,4rem); z-index:5; max-width:34ch }
.tribe__word{
  font-family:'Archivo Black',Inter,sans-serif;
  font-size:clamp(3rem,8vw,7rem); letter-spacing:.01em; line-height:.95;
  margin:0; color:#eef1f8;
}
.tribe__copy{ margin-top:1rem; color:var(--lt-3); font-size:clamp(.95rem,1.4vw,1.1rem); line-height:1.5 }
.tribe__fan{
  position:absolute; inset:0; transform-style:preserve-3d;
}
.tribe__reel{
  position:absolute; margin:0; overflow:hidden; cursor:pointer;
  border-radius:26px;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  animation:bob 7s ease-in-out infinite;
}
.tribe__reel video{ width:100%; height:100%; object-fit:cover; display:block }
.tribe__reel::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:26px;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 62%);
}
@keyframes bob{ 0%,100%{ margin-top:0 } 50%{ margin-top:-14px } }
.tp1{ width:19vw; aspect-ratio:9/16; left:4vw;  top:24svh; transform:rotateY(38deg) rotateZ(-5deg) translateZ(-160px); animation-delay:0s }
.tp2{ width:20vw; aspect-ratio:9/16; left:22vw; top:16svh; transform:rotateY(26deg) rotateZ(-2deg) translateZ(-60px); animation-delay:.9s }
.tp3{ width:22vw; aspect-ratio:9/16; left:41vw; top:12svh; transform:rotateY(-6deg) translateZ(30px); animation-delay:1.7s }
.tp4{ width:26vw; aspect-ratio:16/10; left:63vw; top:22svh; transform:rotateY(-28deg) rotateZ(3deg) translateZ(-80px); animation-delay:2.4s }
.tp5{ width:24vw; aspect-ratio:16/10; left:76vw; top:52svh; transform:rotateY(-40deg) rotateZ(6deg) translateZ(-180px); animation-delay:3.1s }
.tribe__reel.is-loud{ box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 40px 100px rgba(140,170,255,.45) }
@media (max-width:860px){
  .tribe__stage{ min-height:auto; padding:3rem 0 2rem; perspective:none }
  .tribe__head{ position:static; margin:0 1.2rem 1.5rem }
  .tribe__fan{ position:static; display:grid; grid-template-columns:1fr; gap:1rem; width:min(26rem,92vw); margin:0 auto }
  .tribe__reel{ position:static; transform:none !important; width:100%; aspect-ratio:9/16; animation:none }
  .tp4,.tp5{ aspect-ratio:16/10 }
}

/* the ask belongs to the story: transparent over the veil's golden door */
.ask{ background:none }

/* ==== the growing card ==================================================== */
.cinema{ padding:0 }
.grow__track{ height:260vh; position:relative }
.grow__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem;
}
.grow__head{ text-align:center }
.grow__media{
  display:block; width:38vw; max-height:76svh;
  margin:0; border-radius:26px; background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
@media (max-width:860px){
  .grow__track{ height:auto }
  .grow__stage{ position:static; height:auto; padding:3rem 0 }
  .grow__media{ width:94vw !important; border-radius:14px !important }
}

/* tribe screens: JS owns the transforms now; CSS keeps anchors and look */
.tribe__reel{ animation:none; will-change:transform; transition:box-shadow .3s ease }
.tp1{ transform:none } .tp2{ transform:none } .tp3{ transform:none }
.tp4{ transform:none } .tp5{ transform:none }

/* the tribe copy tucks small into the dark corner, clear of the screens */
.tribe__head{ max-width:22ch }
.tribe__copy{
  font-size:.85rem; line-height:1.55; max-width:22ch;
  color:var(--lt-2);
}

/* ==== the entry gate ===================================================== */
.gate{
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(120% 100% at 50% 30%, #101736 0%, #05070f 70%);
  display:grid; place-content:center; text-align:center;
  transition:opacity .8s ease;
}
.gate.is-gone{ opacity:0; pointer-events:none }
.gate__line{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.4rem); color:var(--lt);
  margin:0 1.5rem 1.8rem;
}
.gate__btn{
  margin:0 auto; display:block;
  background:var(--gold); color:#101426; border:0; cursor:pointer;
  font-weight:600; font-size:1.05rem;
  padding:1rem 2.4rem; border-radius:999px;
}
.gate__btn:hover{ filter:brightness(1.08) }
.gate__mute{
  margin:1.1rem auto 0; display:block;
  background:none; border:0; cursor:pointer;
  color:var(--lt-2); font-size:.85rem; text-decoration:underline;
}

/* phones get a real flight: pinned stage, the whole constellation passes */
@media (max-width:860px){
  .hero__track{ height:240vh !important; position:relative }
  .hero__stage[data-field]{ position:sticky; top:0; height:100svh }
  .field__card{ width:min(64vw, 260px) }
}

.grow__media{ will-change:transform; transform-origin:center center }
.grow__stage{ z-index:2 }

/* the cinema is a framed embed now: same growth, zero server weight */
.grow__frame{ position:relative; aspect-ratio:16/9; width:38vw; overflow:hidden }
.grow__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.yt-shell{ cursor:pointer }
.yt-shell__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block }
.yt-shell__play{
  position:absolute; left:50%; top:64%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:#eaf0ff; background:rgba(7,11,24,.55);
  border:1px solid rgba(140,170,255,.55);
  box-shadow:0 0 34px rgba(111,140,255,.35), inset 0 0 18px rgba(111,140,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.yt-shell:hover .yt-shell__play{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 48px rgba(111,140,255,.55), inset 0 0 18px rgba(111,140,255,.25) }
.yt-shell.is-lit .yt-shell__poster, .yt-shell.is-lit .yt-shell__play{ display:none }
@media (max-width:860px){ .grow__frame{ width:94vw !important } }