/* THE DRIVE — prototype page. Clone styling (Anton, purple→blue→yellow) kept on purpose so the only
   variable is the sideways camera. */
@font-face { font-family: 'Ringold'; src: url('fonts/Ringold-Soft.woff') format('woff'); font-weight: 400; font-display: swap; }
html.drive-page { --font-head: 'Ringold', 'Anton', Impact, sans-serif; }
html.drive-page { --violet: #5B2BD6; --amber: #FFB800; --purple: var(--violet); --purple-deep: #3F1A9E; --yellow: var(--amber); --yellow-light: #FFC933; --coral: var(--violet); --lime: var(--amber); }
html.drive-page, html.drive-page body { margin: 0; background: #5B2BD6; }
html.drive-page .headline { font-family: var(--font-head); }
/* the glossy 3D lockup replaces the icon + wordmark; it carries its own colour so no menu-open swap */
.site-header__logo--lockup img { height: clamp(40px, 4.2vw, 60px) !important; width: auto !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.drive { position: relative; height: 700vh; }
.drive__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.drive__gl, .drive__css { position: absolute; inset: 0; width: 100%; height: 100%; }
.drive__css { pointer-events: none; }
.drive__css .say { pointer-events: auto; }

/* slogans live inside CSS3D; sizes are in layout px and scaled into world units by drive.js */
.say { width: 1600px; margin: 0; text-align: center; color: #fff; font-size: 128px; line-height: .95; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 .05em 0 rgba(0,0,0,.14); }
.say--hero { font-size: 104px; }
.say--hero span { display: block; white-space: nowrap; }
.say--hero .big { line-height: .88; }
/* both lines are set to the SAME rendered width: each is scaled horizontally by a factor drive.js measures on
   load (and on resize), so "SMALL GAMES" and "BIG PERSONALITY" line up flush on both edges */
.say--hero .l1, .say--hero .l2 { transform-origin: 50% 100%; }
/* highlight words: amber fill, thick ink outline, solid ink extrusion straight down (the sticker look). The clone
   lives on each LETTER (not the word) so it scatters with it. */
.say em, .say em.yellow { font-style: normal; color: var(--amber); display: inline-block; padding: 0 .02em; text-shadow: none; }
.say em .L { position: relative; z-index: 0; }
.say em .L::before { content: attr(data-ch); position: absolute; inset: 0; z-index: -1; color: var(--ink); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: 0 .03em 0 var(--ink), 0 .06em 0 var(--ink), 0 .09em 0 var(--ink), 0 .12em 0 var(--ink), 0 .15em 0 var(--ink), 0 .18em 0 var(--ink), 0 .2em 0 var(--ink); }
.say--game { color: #fff; text-shadow: 0 .05em 0 rgba(0,0,0,.14); }
.say--game small { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.say--game .big { display: block; font-size: 1.55em; line-height: .9; }
.say--game .sub { display: block; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.25; text-transform: none; margin: 22px auto 0; max-width: 1100px; }
/* store badges live under the Letter Legends slogan (in the 3D world, so they ride with it when it sticks) */
.say--game .store { display: flex; gap: 28px; justify-content: center; align-items: center; margin-top: 30px; pointer-events: auto;
  /* the badges arrive with the headline: --k is the slogan's letter-assembly (0 → 1), and they only start once
     the letters are mostly home, so they never appear before the Letter Legends section exists */
  --kb: clamp(0, calc((var(--k, 0) - 0.55) / 0.45), 1);
  opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 40px)); }
.say--game .store img { height: 88px; width: auto; display: block; border-radius: 14px; filter: drop-shadow(0 10px 0 rgba(0,0,0,.18)); } /* google-play-badge.png is trimmed to its artwork, so both badges share one height */
.say--game .store a { transition: transform .2s ease; } .say--game .store a:hover { transform: translateY(-4px); }

/* the mascot sits CENTRED at the bottom of the viewport, half of him above the edge, waving gently.
   The wrapper's position is owned by drive.js (GSAP yPercent) — never set a transform on .peek in CSS or the
   two fight and the mascot flickers on the first scroll frame. */
/* he starts fully below the fold and RISES after the hero text has flipped in (CSS handles the entrance so the
   frame loop's yPercent stays the single source of scroll movement — see peek-rise's delay) */
.peek { position: absolute; left: 50%; bottom: 0; z-index: 3; visibility: hidden; animation: peek-show 0s linear .95s forwards; width: clamp(240px, 34vh, 460px); margin-left: calc(clamp(240px, 34vh, 460px) / -2); pointer-events: none; will-change: transform; }
.peek img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 26px rgba(0,0,0,.3)); transform-origin: 50% 100%;
  /* rise once (after the headline), then wave forever */
  animation: peek-rise .72s cubic-bezier(.2, .9, .3, 1.25) .95s both, peek-wave 3.4s ease-in-out 1.7s infinite; }
@keyframes peek-rise { from { transform: translateY(78%); } to { transform: translateY(0); } }
@keyframes peek-show { to { visibility: visible; } }
@keyframes peek-wave { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.scroll-hint { position: absolute; right: 42px; bottom: 32px; width: 54px; height: 32px; border: 2px solid #fff; border-radius: 999px; opacity: .85; }
.scroll-hint span { position: absolute; top: 50%; left: 10px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; animation: hint-slide 1.6s ease-in-out infinite; }
@keyframes hint-slide { 0%, 100% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(24px); opacity: .2; } 71% { opacity: 0; } 72% { transform: translateX(0); opacity: 0; } }

/* the end section IS one viewport of purple: headline + doors centred in the space above the crew, the crew
   centred along the bottom edge, and the footer's cream slab begins exactly at the fold (its top edge is 30px
   above the footer box, so the section is 100vh + 30px tall). --crew-w sizes the crew by both axes. */
html.drive-page { --crew-w: clamp(560px, min(74vw, 92vh), 1320px); }
.drive-end { box-sizing: border-box; min-height: calc(100vh + 30px); display: grid; align-content: center; justify-items: center; gap: 28px; text-align: center; padding: 12vh 20px calc(var(--crew-w) * 0.35 - 40px); background: var(--coral); color: #fff; }
.drive-end__h { margin: 0; font-size: clamp(56px, 9vw, 160px); line-height: .95; text-transform: uppercase; }
.drive-end__doors { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.drive-end__note { opacity: .7; font-weight: 700; }

@media (max-width: 640px) {
  .drive { height: 560vh; }
  .peek { width: 56vw; margin-left: -28vw; }
  .scroll-hint { right: 18px; bottom: 18px; }
}
/* the footer band on the drive is the end card's purple, not the sky colour the body carries at the end */
html.drive-page .home-site-footer { background: var(--coral); padding-top: 0; overflow: visible; position: relative; }
html.drive-page .home-site-footer__box { margin-top: 0; }
html.drive-page .home-site-footer .home-site-footer__crew { left: 50%; transform: translateX(-50%); width: var(--crew-w); bottom: calc(100% - 64px); }
@media (max-width: 767.98px) { html.drive-page { --crew-w: min(96vw, 560px); } }
/* the Letter Legends slogan sits on VIOLET like the end card */
.say--game { color: #fff; }
.say--game small { color: var(--amber); }
.say--game .store img { filter: drop-shadow(0 10px 0 rgba(0,0,0,.14)); }
html.drive-page .footer-content__socials__wrapper a { background: var(--violet); }
html.drive-page .footer-content__socials__wrapper a:hover { background: var(--ink); color: var(--amber); }
.site-header__button[data-style="ink"] { background: var(--ink); color: var(--cream); }

/* ── drive footer: no cream slab. The end card is content-height; the footer below it is violet, holds the link
   columns + socials + badges in cream, and the crew stands flat along its bottom with their feet on the dark
   copyright bar. ── */
html.drive-page .drive-end { min-height: 0; padding: 10vh 20px 3vh; }
html.drive-page .home-site-footer { background: var(--violet); padding-top: 0; overflow: visible; }
html.drive-page .home-site-footer__box { position: relative; margin-top: 0; padding: 0 clamp(18px, 4vw, 42px) calc(var(--crew-w) * 0.351 + 1vh); }
html.drive-page .home-site-footer__box::after { display: none; } /* the slanted cream slab */
html.drive-page .footer-content, html.drive-page .footer-content__list > li > a, html.drive-page .footer-content__list .sub-menu a, html.drive-page .footer-content__socials__title { color: var(--cream); }
html.drive-page .footer-content__socials__wrapper a { background: rgba(255,255,255,.14); color: var(--cream); }
html.drive-page .footer-content__socials__wrapper a:hover { background: var(--cream); color: var(--violet); }
html.drive-page .footer-content__notice { display: none; }
/* the crew is anchored to the FOOTER (not the box) and stands ON the dark copyright bar: its feet sit at the bar's
   top edge, and z-index 5 keeps it above the bar (z 4) so nothing paints over them */
html.drive-page .home-site-footer > .home-site-footer__crew,
html.drive-page .home-site-footer .home-site-footer__crew { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(55px - var(--crew-w) * 0.351 * 0.075); width: var(--crew-w); z-index: 5; filter: none; } /* sunk ~8% of its height behind the bar so the arms rest ON the ledge, not hover above it */
html.drive-page .home-site-footer__copyright { position: relative; z-index: 4; }
@media (max-width: 767.98px) { html.drive-page .home-site-footer__box { padding-bottom: calc(var(--crew-w) * 0.351 + 2vh); }
  html.drive-page .home-site-footer .home-site-footer__crew { bottom: calc(119px - var(--crew-w) * 0.351 * 0.075); } /* the bar is taller on phones (stacked text) */ }
html.drive-page .footer-content__store { display: none; } /* the badges already sit under the Letter Legends slogan */
/* breathing room between the end card's door buttons and the footer's link columns */
html.drive-page .home-site-footer__box { padding-top: clamp(56px, 7vh, 96px); }
/* site-wide now (every page carries .drive-page): the store badges live in the Letter Legends scene, not the footer */
html.drive-page .footer-content__store { display: none; }
/* the slogans are DOM over the WebGL canvas, but CSS3D sorts them by depth against each other only; make sure the
   text layer always sits above the canvas on every browser (phones were showing a prop over the words) */
.drive__css { z-index: 2; }
.drive__gl { z-index: 1; }


/* words stay whole: letters are inline-blocks, so wrap only at the spaces between them */
.say.scatter .w { display: inline-block; white-space: nowrap; }
/* letter scatter: each letter converges from its own scatter pose (--sx/--sy in em, --sz px, --sr deg) as --k goes
   0 → 1, with a per-letter delay (--sd) so the line ripples together. Inline-block so transforms apply; the
   slogan box has preserve-3d so the z travel reads in perspective. */
.say.scatter { transform-style: preserve-3d; }
.say.scatter { --out: 0; }
.say.scatter .L { display: inline-block; font-style: normal; --kk: clamp(0, calc((var(--k) - var(--sd)) / (1 - var(--sd))), 1); --oo: clamp(0, calc((var(--out) - var(--sd) * 0.6) / (1 - var(--sd) * 0.6)), 1);
  /* entry: converge from the scatter pose (kk 0→1). exit: fly OUT past the lens — each letter rushes toward the viewer
     along its own sideways vector (oo 0→1), so the exit is the entrance in reverse but forward, not backward */
  transform: translate3d(calc(var(--sx) * (1 - var(--kk)) * 1em + var(--sx) * var(--oo) * 3em), calc(var(--sy) * (1 - var(--kk)) * 1em + var(--sy) * var(--oo) * 3em), calc(var(--sz) * (1 - var(--kk)) * 1px + var(--oo) * 1400px)) rotate(calc(var(--sr) * (1 - var(--kk)) * 1deg + var(--sr) * var(--oo) * 0.6deg));
  opacity: calc(var(--kk) * (1 - var(--oo))); will-change: transform, opacity; }
.say.scatter em .L { color: inherit; }
/* hero entrance = the homepage's title-animation: each line flips down from rotateX(90°) 100px above, .5s linear */
.say--hero { perspective: 900px; }
.say--hero span { transform-origin: 50% 100%; animation: title-animation .5s linear forwards; transform: translateY(-100px) rotateX(90deg); backface-visibility: hidden; }
.say--hero span.big { animation-delay: .12s; }
@keyframes title-animation { 0% { transform: translateY(-100px) rotateX(90deg); } to { transform: translateY(0) rotateX(0deg); } }
@media (prefers-reduced-motion: reduce) { .say--hero span { animation: none; transform: none; } }