/* ═══════════════════════════════════════════════════════════════
   Step Into Wonder — 1:1 rebuild of Figma template #3
   Type   : Italiana (display) + Jost (UI)
   Motion : compositor-only (transform/opacity). No scroll hijack: the page
            scrolls natively, one sticky stage reads its own progress.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Italiana';
  src:url('../fonts/Italiana-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --display:'Italiana', 'Didot', 'Bodoni MT', serif;
  --ui:'Jost', 'Futura', system-ui, sans-serif;

  /* sampled from the reference frames */
  --white:#fff;
  --lede:#e9e4e1;
  --dim:rgba(255,255,255,.62);
  --accent:#f0805c;

  --blush:#f3c6c5;
  --mint:#e2f3c6;
  --sky:#c8e8f6;
  --cream:#f4e9c6;
  --lilac:#cac5f4;

  --ink:#2a2530;

  --gut:5.8vw;              /* nav / page gutter */
  --p:0;                    /* portal scroll progress 0-1 */
  --q:0;                    /* reality scroll progress 0-1 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#0b070d; color:var(--white);
  font-family:var(--ui); font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}

.skip{position:absolute; left:-9999px; top:0; z-index:99}
.skip:focus{left:1rem; top:1rem; padding:.6rem 1rem; background:#fff; color:#000; border-radius:6px}

:where(a,button):focus-visible{
  outline:2px solid var(--white); outline-offset:4px; border-radius:4px;
}

/* ───────── nav ───────── */
.nav{position:fixed; inset:0 0 auto; z-index:40; padding:2.6vh var(--gut) 0}
.nav__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:clamp(1rem,4vw,4rem);
}
.nav__group{display:flex; justify-content:space-between; gap:clamp(1rem,3vw,3rem)}
.nav__group--end{justify-content:space-between}
.nav a{
  font-size:clamp(.72rem,1.02vw,1.16rem); font-weight:300;
  letter-spacing:.012em; color:var(--dim);
  transition:color .35s ease;
}
.nav a:hover,.nav a.is-active{color:var(--white)}
.nav__mark{display:grid; place-items:center; width:clamp(24px,2.44vw,44px)}
.nav__mark svg{
  width:100%; height:auto; fill:#f6e7dd;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transition:rotate .8s cubic-bezier(.4,0,.2,1);
}
.nav__mark:hover svg{rotate:60deg}

/* ───────── shared display type ───────── */
.display{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase;
  line-height:.95; letter-spacing:.008em;
  margin:0; text-wrap:balance;
  text-shadow:0 2px 34px rgba(20,6,26,.45);
}
.display__sm,.display__lg{display:block}
.display__sm{font-size:clamp(2.2rem,4.44vw,5.3rem); letter-spacing:.02em}
.display__lg{font-size:clamp(2.9rem,5.62vw,6.7rem); letter-spacing:.105em}
.chev{color:var(--accent); font-family:var(--ui); font-weight:300; padding:0 .12em; vertical-align:.06em}

/* the compass needle riding inside the letter O */
.nb{white-space:nowrap}          /* keeps BEY-o-ND from breaking across lines */
.needle-o{position:relative; display:inline-block}
.needle{
  position:absolute; left:50%; top:50%;
  width:.17em; height:.56em;
  transform:translate(-50%,-50%) rotate(18deg);
  fill:currentColor; opacity:.92; pointer-events:none;
}

/* ═══════════ one pinned camera ═══════════
   The whole story happens inside a single sticky stage, so the reader is never
   "lowered" into a next section - the arch grows past the camera and the sky
   behind it is already there. Phase variables come from main.js.
   --copy hero text · --dolly push through the arch · --fade arch dissolves
   --rise sky arrives · --head h2 · --cards the five cards            */
.cinema__track{height:400vh}
.cinema__stage{
  position:sticky; top:0; height:100svh; overflow:clip;
  display:grid; place-items:center;
  background:#0b070d;
}
.anchor{position:absolute; inset:0; pointer-events:none}

/* layer 0 — the other side of the arch */
.reality__scene{
  position:absolute; inset:0; z-index:0;
  opacity:var(--rise,0);
  transform:scale(calc(1.22 - var(--rise,0) * .22));
  transform-origin:51% 44%;
  will-change:transform,opacity;
}
/* layer 1 — the arch */
.portal__scene{
  position:absolute; inset:0; z-index:1;
  transform:scale(calc(1 + var(--dolly,0) * 3.4));
  transform-origin:51% 44%;
  opacity:calc(1 - var(--fade,0));
  will-change:transform,opacity;
}
.portal__scene img{width:100%; height:100%; object-fit:cover; object-position:50% 52%}
.portal__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:calc(1 - var(--fade,0));
  background:
    radial-gradient(78% 62% at 50% 46%, transparent 38%, rgba(8,4,12,.42) 100%),
    linear-gradient(180deg, rgba(8,4,12,.46) 0%, transparent 26%);
}
/* layer 2 — hero copy */
.portal__content{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  opacity:var(--copy,1);
  transform:translateY(calc((1 - var(--copy,1)) * -4vh)) scale(calc(1 + (1 - var(--copy,1)) * .06));
  will-change:transform,opacity;
}

.portal__content .display{position:absolute; left:14.3vw; top:23.6vh}
.lede{
  position:absolute; left:18.1vw; top:44.4vh;
  margin:0; max-width:14vw;
  font-size:clamp(.94rem,1.19vw,1.38rem); line-height:1.4;
  font-weight:300; color:var(--lede);
  text-shadow:0 1px 18px rgba(20,6,26,.55);
}

/* ── hero reel ── */
.reel{position:absolute; right:0; top:31vh; width:min(37vw,640px)}
.reel__rail{
  display:flex; gap:1.6vw; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 0 0 .5vw; scrollbar-width:none; overscroll-behavior-x:contain;
}
.reel__rail::-webkit-scrollbar{display:none}
.tile{
  position:relative; flex:0 0 auto; scroll-snap-align:start;
  width:clamp(150px,13.8vw,270px); aspect-ratio:1/1.145;
  border-radius:clamp(16px,1.6vw,30px); overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.09);
  box-shadow:0 20px 50px -18px rgba(10,4,14,.7), inset 0 0 0 1px rgba(255,255,255,.22);
}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.tile::after{            /* legibility scrim, painted over the photo */
  content:''; position:absolute; inset:auto 0 0; height:66%; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,4,12,.46) 46%,rgba(8,4,12,.88));
}
.tile__cta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:.65em;
  padding:0 1em 1.05em; text-align:left; line-height:1.16;
  font-size:clamp(.74rem,.92vw,1.05rem); font-weight:300; color:#f1f3f3;
  text-shadow:0 1px 10px rgba(10,4,14,.85);
}
.play{
  flex:0 0 auto; display:grid; place-items:center;
  width:2.55em; height:2.55em; border-radius:50%; background:#fff;
  transition:transform .3s cubic-bezier(.3,1.2,.5,1);
}
.play::after{
  content:''; border-style:solid; border-width:.42em 0 .42em .68em;
  border-color:transparent transparent transparent var(--accent);
  margin-left:.16em;
}
.tile__cta:hover .play{transform:scale(1.12)}
.tile__cta--stat b{font-family:var(--display); font-size:2.05em; font-weight:400; line-height:.8}

.reel__dots{display:flex; gap:.55vw; margin:1.3vh 0 0 .5vw}
.reel__dots button{
  width:clamp(16px,1.5vw,30px); height:3px; border-radius:2px;
  background:rgba(255,255,255,.42); transition:background .3s ease;
}
.reel__dots button[aria-selected="true"]{background:#fff}

/* ── enter badge ── */
.enter{
  position:absolute; left:50%; bottom:9.3vh; translate:-50% 0;
  display:grid; place-items:center;
  width:clamp(70px,5.1vw,104px); aspect-ratio:1;
}
.enter__ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 22s linear infinite;
}
.enter__ring text{
  font-family:var(--ui); font-size:9.6px; font-weight:400;
  letter-spacing:.185em; fill:rgba(255,255,255,.85);
}
.enter__chevrons{
  display:grid; place-items:center; gap:.14em; overflow:hidden;
  width:44%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.94);
  font-size:clamp(70px,5.1vw,104px);
}
.enter__chevrons i{
  width:.1em; height:.1em;
  border-right:1.5px solid #2a2530; border-bottom:1.5px solid #2a2530;
  rotate:45deg; opacity:.8;
}
.enter__chevrons i:first-child{rotate:225deg}
.enter:hover .enter__chevrons{background:#fff}
@keyframes spin{to{rotate:360deg}}

/* ═══════════ 2. CREATE BEYOND REALITY (same pinned stage) ═══════════ */
.reality__scene img{width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.reality__scene::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,14,42,.62) 0%,rgba(28,14,42,.24) 26%,transparent 42%);
}
.reality__head{
  position:absolute; z-index:5; left:50%; top:17.4vh; translate:-50% 0;
  width:min(88vw,1180px); text-align:center;
  opacity:var(--head,0);
  transform:translateY(calc((1 - var(--head,0)) * 4vh));
  will-change:transform,opacity;
}
.display--h2{font-size:clamp(2.1rem,5.6vw,6.6rem); line-height:1; letter-spacing:.008em}
.reality__sub{
  margin:1.35em auto 0; max-width:46ch;
  font-size:clamp(.9rem,1.12vw,1.3rem); line-height:1.45; font-weight:300;
  color:#fdf9fe; text-shadow:0 1px 16px rgba(30,10,44,.5);
}

/* ── orbital wheel ── */
.wheel{
  position:absolute; inset:0; z-index:4; overflow:clip;
  opacity:var(--cards,0);
  transform:translateY(calc((1 - var(--cards,0)) * 5vh));
  will-change:transform,opacity;
}
.wheel__hub{
  --R:66vw;
  --cw:clamp(170px,15.2vw,290px);
  --ch:clamp(190px,17.4vw,330px);
  position:absolute; left:50%; top:74vh; width:0; height:0;
}
.pill{
  position:absolute; left:0; top:0;
  width:var(--cw); height:var(--ch);
  margin-left:calc(var(--cw) / -2); margin-top:calc(var(--ch) * -1);
  transform-origin:50% calc(var(--R) + var(--ch));
  transform:translateY(var(--dy,0px)) rotate(var(--ang,0deg));
  will-change:transform;
}
.pill__in{
  position:relative;
  width:100%; height:100%; padding:1.45em 1.25em 1.2em;
  display:flex; flex-direction:column;
  border-radius:clamp(18px,2vw,38px);
  background:var(--tint); color:var(--ink);
  transform:scale(var(--sc,1));
  box-shadow:0 26px 60px -24px rgba(48,22,60,.55);
}
.pill h3{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.72vw,2.15rem); line-height:1.14; letter-spacing:.004em;
}
.pill p{
  margin:.7em 0 0; max-width:16ch;
  font-size:clamp(.7rem,.82vw,.96rem); line-height:1.36;
  font-weight:300; color:#4b4553;
}
.pill__go{
  position:absolute; right:.9em; top:.9em;
  width:2.15em; height:2.15em; border-radius:50%;
  background:rgba(255,255,255,.42);
  display:grid; place-items:center;
}
.pill__go::after{
  content:''; width:.62em; height:.62em;
  border-top:1.4px solid rgba(60,50,70,.75); border-right:1.4px solid rgba(60,50,70,.75);
  rotate:45deg; margin:0 0 .1em -.1em;
}
/* the generated cloudscape already carries the marble plinth */
.wheel__plinth{display:none}

/* ───────── mobile ───────── */
@media (max-width:900px){
  :root{--gut:6vw}
  .nav{padding-top:2vh}
  .nav__group--start li:nth-child(3),.nav__group--end li:nth-child(1){display:none}

  /* the phone crop puts the bright opening right behind the copy */
  .portal__vignette{
    background:
      radial-gradient(92% 52% at 50% 30%, transparent 26%, rgba(8,4,12,.5) 100%),
      linear-gradient(180deg, rgba(8,4,12,.55) 0%, rgba(8,4,12,.1) 20%,
                      transparent 30%, rgba(8,4,12,.34) 56%, rgba(8,4,12,.7) 100%);
  }
  .portal__content .display{left:var(--gut); top:19vh}
  .lede{left:var(--gut); top:39vh; bottom:auto; max-width:26ch}
  .reel{right:0; top:auto; bottom:19vh; width:100%}
  .reel__rail{padding-left:var(--gut)}
  .reel__dots{margin-left:var(--gut)}
  .enter{bottom:4vh}

  .reality__head{top:10vh}

  /* the orbital wheel needs width it does not have on a phone:
     below 900px the same five cards become a snap rail instead. */
  .wheel{display:flex; align-items:flex-end; padding-bottom:12vh}
  .wheel__hub{
    position:static; display:flex; gap:4vw; width:100%; height:auto;
    padding:0 var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain;
    --cw:min(62vw,280px); --ch:min(74vw,330px);
  }
  .wheel__hub::-webkit-scrollbar{display:none}
  .pill{
    position:static; flex:0 0 auto; scroll-snap-align:center;
    width:var(--cw); height:var(--ch); margin:0;
    transform:none !important;
  }
  .pill__in{transform:none !important}
}

@media (max-width:520px){
  .cinema__track{height:400vh}
  .display__sm{font-size:2.35rem}
  .display__lg{font-size:3.6rem}
}

/* ───────── reduced motion: no dolly, no spin, no wheel ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portal__scene{transform:none; opacity:1}
  .portal__content{opacity:1; transform:none}
  .enter__ring{animation:none}
  .pill{transform:rotate(var(--ang-static,0deg))}
}