/* Home and share pages: the page-wide 3D canvas (space.js), the playable hero, and the scroll sections. */
body{background:#060918}
.stars{display:none}
.space{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.home{position:relative;z-index:1;max-width:1120px}
.home>.logo{display:none}
.share>footer{margin-top:0}

/* top bar: shows once the hero scrolls away */
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px max(16px,4vw);background:#070b22cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff14;transform:translateY(-100%);transition:transform .35s}
.topbar.on{transform:none}
.topbar .mark{font:700 26px Fredoka,sans-serif;color:var(--gold);text-decoration:none;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
.topbar .join{font-family:Bungee,sans-serif;font-size:13px;color:var(--navy);background:var(--gold);padding:9px 14px;border-radius:12px;text-decoration:none;box-shadow:0 3px 0 #b88a00}

/* hero */
.hero{position:relative;z-index:1;height:100svh;min-height:560px;overflow:hidden}
.hero .pad{position:absolute;left:0;right:0;bottom:0;height:42%;touch-action:none;cursor:grab;z-index:1}
.hero .pad:active{cursor:grabbing}
@media (pointer:fine){.hero .pad{top:0;height:auto}}
.hero-copy{position:absolute;z-index:2;left:max(16px,6vw);top:max(28px,9vh);max-width:450px;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .8s,transform .8s}
.ready .hero-copy,.no3d .hero-copy,.calm .hero-copy{opacity:1;transform:none}
.hero-copy .logo{text-align:left;margin:0 0 12px;font-size:clamp(46px,7vw,84px)}
.hero-copy h1{font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--ink);margin:0 0 10px;text-shadow:0 2px 12px #000a}
.hero-copy .sub{color:#c9d1f5;margin:0 0 20px;font-size:clamp(16px,1.5vw,19px);text-shadow:0 1px 8px #000c}
.share .hero-copy h1{color:var(--gold)}
.hint{position:absolute;z-index:2;left:50%;top:80%;transform:translate(0,-50%);font-family:Bungee,sans-serif;font-size:14px;letter-spacing:.5px;color:var(--gold);background:#0b1440aa;border:1px solid #ffd23f55;padding:8px 14px;border-radius:999px;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.hint.gone{opacity:0}
.toast{position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,10px);font-family:Bungee,sans-serif;font-size:clamp(18px,2.4vw,26px);color:var(--gold);text-align:center;text-shadow:0 3px 0 var(--navy);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;width:min(90vw,560px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.mute{position:absolute;z-index:3;right:16px;top:16px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff33;background:#0b1440aa;color:var(--ink);font-size:18px;cursor:pointer}
.mute[aria-pressed="true"]{opacity:.55}
.cue{position:absolute;z-index:2;left:max(16px,6vw);bottom:22px;font-size:15px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:8px}
.cue::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px) rotate(45deg)}}
.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.no3d .hero .still{opacity:.55}.no3d .space,.no3d .pad,.no3d .hint,.no3d .mute{display:none}

/* signup */
.signup{display:flex;gap:8px;pointer-events:auto;flex-wrap:wrap}
.signup input{flex:1 1 150px;min-width:0;font:inherit;font-size:17px;padding:12px 16px;border-radius:14px;border:2px solid #3a4596;background:#0b1440d9;color:var(--ink)}
.signup input:focus{outline:none;border-color:var(--gold)}
.signup input::placeholder{color:#8f99cf}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup button{font-family:Bungee,sans-serif;font-size:15px;padding:12px 18px;border-radius:14px;border:0;background:var(--gold);color:var(--navy);cursor:pointer;box-shadow:0 4px 0 #b88a00}
.signup button:active{transform:translateY(2px);box-shadow:0 2px 0 #b88a00}
.signup button[disabled]{opacity:.6}
.signup-done{font-family:Bungee,sans-serif;color:var(--gold);font-size:18px;margin:0;pointer-events:auto;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.signup-error{color:#ff9fb8;font-size:15px;margin:8px 0 0}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.fine{font-size:14px;color:var(--muted);margin:8px 0 0}

/* scroll sections: copy on one side, the 3D prop (drawn by space.js where .stage sits) on the other */
.scene{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:92vh;padding:12vh 0}
.scene.flip .copy{order:2}
.scene.wide{grid-template-columns:1fr;min-height:auto}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center}
.stage.tall{aspect-ratio:auto;height:min(38vh,380px);max-width:none}
.copy h2{font-size:clamp(30px,4.6vw,54px);line-height:1.05;color:var(--gold);margin:0 0 18px;text-shadow:0 4px 0 var(--navy),0 0 40px #ffb30033}
.copy p{font-size:clamp(18px,1.7vw,21px);color:#dfe5ff;margin:0;max-width:34em;text-shadow:0 1px 10px #000c}
.copy.center{text-align:center;margin:0 auto}
.copy.center p{margin:0 auto}
.final{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16vh 0 0}
.final .copy{max-width:560px}
.final .signup{justify-content:center;margin-top:24px}
.final .fine{text-align:center;font-size:14px;color:var(--muted);margin-top:10px}

/* reveal on scroll (site.js adds .in) */
.reveal>*{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal>*:nth-child(2){transition-delay:.08s}.reveal>*:nth-child(3){transition-delay:.16s}.reveal>*:nth-child(4){transition-delay:.24s}
.reveal.in>*{opacity:1;transform:none}

/* phones: fanned, each drifts at its own speed with --p (0 to 1 as the section crosses the screen) */
.phones{--p:.5;display:flex;justify-content:center;align-items:center;gap:clamp(10px,3vw,36px);margin:56px 0 0;perspective:1200px}
.phone{width:clamp(110px,24vw,270px);height:auto;aspect-ratio:480/1038;object-fit:cover;border-radius:clamp(16px,3vw,32px);border:3px solid #2a3480;box-shadow:0 30px 80px #000b,0 0 0 1px #fff2 inset;background:var(--navy);will-change:transform}
.phone.l{transform:translateY(calc((var(--p) - .5) * 120px)) rotateY(18deg) rotate(-4deg)}
.phone.mid{width:clamp(130px,28vw,310px);transform:translateY(calc((.5 - var(--p)) * 80px)) translateZ(40px)}
.phone.r{transform:translateY(calc((var(--p) - .5) * 160px)) rotateY(-18deg) rotate(4deg)}

video.phone{clip-path:inset(0 round clamp(16px,3vw,32px))} /* video ignores border-radius in some browsers */

/* sleeping Shiny's z's */
.zzz{position:absolute;left:58%;top:30%;font:700 34px Fredoka,sans-serif;color:#cfe8ff;opacity:0;animation:zzz 3.6s ease-out infinite}
.zzz:nth-child(2){animation-delay:1.2s;font-size:26px}.zzz:nth-child(3){animation-delay:2.4s;font-size:20px}
@keyframes zzz{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(60px,-110px) rotate(12deg)}}

.home footer{position:relative;z-index:1;padding-bottom:24px}

@media (max-width:760px){
  .hero-copy{left:16px;right:16px;top:20px;max-width:none;text-align:center}
  .hero-copy .logo{text-align:center}
  .signup{justify-content:center;flex-wrap:nowrap}
  .signup button{font-size:13px;padding:12px}
  .hero-copy .sub{margin-bottom:14px}
  .mute{top:auto;bottom:16px;right:12px}
  .hint{transform:translate(-50%,-50%)}
  .cue{display:none}
  .scene,.scene.flip{grid-template-columns:1fr;gap:8px;min-height:auto;padding:10vh 0 4vh;text-align:center}
  .scene.flip .copy{order:0}
  .copy p{margin:0 auto}
  .stage{max-width:360px}
  .topbar .mark{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .reveal>*{opacity:1;transform:none;transition:none}
  .phone.l,.phone.mid,.phone.r{transform:none}
  .zzz,.cue::after{animation:none}
}

/* ?og: the 1200 x 630 link preview picture (tools/render_og.mjs) */
.og .signup,.og .fine,.og .hint,.og .mute,.og .cue,.og .topbar,.og .toast{display:none}
.og .hero-copy{top:120px;left:72px;max-width:520px}
.og .hero-copy .logo{font-size:104px}
.og .hero-copy h1{font-size:36px}
.og .hero-copy .sub{font-size:22px}

/* ?rec: the hero alone, for the gameplay video (tools/record_hero.mjs) */
.rec .hero-copy,.rec .hint,.rec .mute,.rec .cue,.rec .topbar{display:none}

/* Optional device/playtest preferences retain the compact launch signup. */
.signup{display:block;width:100%;max-width:540px}
.signup-row{display:flex;gap:8px}
.signup-options{text-align:left;margin-top:12px;font-size:15px}
.signup-options summary{cursor:pointer;color:var(--moon);padding:8px 0;min-height:44px}
.signup-options label{display:block;margin:10px 0;color:var(--ink)}
.signup-options select,.signup-options input[type=text]{display:block;width:100%;box-sizing:border-box;font:inherit;padding:12px;border:2px solid #3a4596;border-radius:14px;color:var(--ink);background:#0b1440}
.signup-options .playtest-choice{display:flex;gap:10px;align-items:center;min-height:44px}
.signup-options input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;accent-color:var(--gold)}
.signup-options :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.final .signup{margin-left:auto;margin-right:auto}
@media(max-width:440px){.signup-row{flex-wrap:wrap}.signup-row button{flex:1 1 auto;min-height:44px}}