/* Two full-height scenes: hero then city postcard. Countdown is a page section. */
.js:not(.reduce-motion) .cinematic-stage{height:300svh}
.js:not(.reduce-motion) .cinematic-pin{height:100svh;min-height:0;position:sticky;top:0;overflow:hidden}
.js:not(.reduce-motion) .scene{height:100%;min-height:0;position:absolute;inset:0}
.js:not(.reduce-motion) .hero-copy{top:calc(var(--header) + 18px);bottom:86px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.js:not(.reduce-motion) .hero-copy>p{flex:none}
.js:not(.reduce-motion) .hero-title{flex:none}
.js:not(.reduce-motion) .hero-eyebrow{margin-bottom:20px}
.js:not(.reduce-motion) .desktop-game-logo{width:clamp(100px,18svh,165px);margin-bottom:22px}
.hero-atmosphere{display:none;position:absolute;inset:-12%;pointer-events:none;transform-origin:center}
.hero-atmosphere>img{width:100%;height:100%;object-fit:cover}
.hero-atmosphere:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#35203b75,#1e17363b,#35203b75)}
.city-media{transform-origin:64% 23%}
.city-media img{object-position:64% 0%}
.hero-art>.mobile-game-logo{z-index:3}
.motion-active .hero-atmosphere{will-change:transform}
.motion-dock{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:21;display:flex;align-items:center;gap:6px}
.motion-dock .motion-toggle{position:relative;left:auto;bottom:auto;min-height:44px}
.scene-preview{min-height:44px;display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid #fff2d546;background:#09090bed;color:var(--cream);font-family:var(--font);font-size:10px;line-height:1.2}
.scene-preview>.icon{width:16px;height:16px;color:var(--pink)}
.scene-preview:hover{color:var(--lime);border-color:var(--lime)}
.scene-preview[aria-pressed=true]{border-color:var(--pink);color:var(--pink)}
.motion-dock .motion-label{display:inline;font-size:8px;white-space:nowrap}
@media(min-width:1001px) and (max-height:760px){
  .js:not(.reduce-motion) .hero-copy{top:calc(var(--header) + 12px);bottom:74px;width:min(34vw,460px)}
  .js:not(.reduce-motion) .hero-title{max-width:min(440px,63svh)}
  .js:not(.reduce-motion) .hero-eyebrow{font-size:8px;margin-bottom:13px}
  .js:not(.reduce-motion) .desktop-game-logo{width:clamp(90px,15svh,115px);margin-bottom:17px}
  .js:not(.reduce-motion) .hero-copy>p{margin-top:17px;font-size:13px;line-height:1.5}
  .js:not(.reduce-motion) .hero-buttons{margin-top:18px}
  .hero-hud{bottom:20px}
  .js:not(.reduce-motion) .city-copy{bottom:13%}
  .js:not(.reduce-motion) .city-copy .type-title{max-width:820px;margin-block:24px 20px}
  .js:not(.reduce-motion) .city-copy>p{font-size:17px;line-height:1.5;margin-bottom:22px}
}
@media(min-width:1001px) and (max-height:600px){
  :root{--header:68px}
  .js:not(.reduce-motion) .hero-eyebrow,.js:not(.reduce-motion) .desktop-game-logo{display:none}
  .js:not(.reduce-motion) .hero-copy{top:calc(var(--header) + 14px);bottom:70px}
  .js:not(.reduce-motion) .hero-title{max-width:min(430px,80svh)}
  .js:not(.reduce-motion) .hero-copy>p{font-size:12px;margin-top:16px}
  .js:not(.reduce-motion) .hero-buttons{margin-top:16px}
  .city-copy{bottom:17%}
  .city-copy .type-title{max-width:min(760px,145svh);margin-block:20px}
  .city-copy>p{font-size:16px;margin-bottom:20px}
  .city-coordinate{font-size:8px}
}
@media(max-width:1000px){
  .js:not(.reduce-motion) .cinematic-stage{height:300svh}
  .hero-atmosphere{display:block}
  .hero-media{z-index:1}
  .hero-art{isolation:isolate;overflow:hidden;background:#9a789f}
  .js:not(.reduce-motion) .hero-copy{inset:auto;display:flex;align-self:center;align-items:flex-start;padding:26px}
  .js:not(.reduce-motion) .hero-art{height:100%;min-height:0}
  .js:not(.reduce-motion) .hero-scene{grid-template-rows:minmax(0,1fr);padding-top:var(--header)}
  .js:not(.reduce-motion) .hero-media{transform:none!important}
  .hero-media>img{background:transparent}
  .js:not(.reduce-motion) .city-copy{bottom:15%}
}
@media(min-width:601px) and (max-width:1000px) and (max-height:660px){
  :root{--header:62px}
  .js:not(.reduce-motion) .hero-copy{padding:20px}
  .js:not(.reduce-motion) .hero-eyebrow{display:none}
  .js:not(.reduce-motion) .desktop-game-logo{width:90px;margin-bottom:15px}
  .js:not(.reduce-motion) .hero-title{max-width:min(350px,65svh)}
  .js:not(.reduce-motion) .hero-copy>p{font-size:12px;line-height:1.6;margin-top:15px}
  .js:not(.reduce-motion) .hero-buttons{margin-top:15px;gap:8px}
  .hero-hud{display:none}
}
@media(max-width:700px){
  .js:not(.reduce-motion) .hero-scene{padding-bottom:max(74px,calc(60px + env(safe-area-inset-bottom)))}
  .motion-dock{left:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:6px}
  .motion-dock .motion-toggle{padding:10px 12px;gap:8px}
  .motion-dock .motion-label{font-size:7px}
  .scene-preview{font-size:9px;padding:10px 12px}
  .has-mobile-presale .motion-dock .scene-preview{display:none}
  .mobile-presale{left:116px}
}
@media(max-width:600px){
  /* The art owns the whole scene. Copy overlays the lower body, never the heads. */
  .js:not(.reduce-motion) .hero-scene{display:block;padding:0}
  .js:not(.reduce-motion) .hero-art{position:absolute;inset:var(--header) 0 0;height:auto;min-height:0;width:100%}
  .js:not(.reduce-motion) .hero-media img{object-fit:contain;object-position:center top}
  .js:not(.reduce-motion) .hero-shade{display:block;z-index:1;background:linear-gradient(0deg,#09090bf0 0%,#09090bc2 15%,#09090b57 31%,transparent 56%);pointer-events:none}
  .js:not(.reduce-motion) .hero-copy{position:absolute;inset:auto 0 max(68px,calc(54px + env(safe-area-inset-bottom)));width:100%;display:flex;align-items:center;padding:14px var(--page-pad);background:transparent}
  .js:not(.reduce-motion) .hero-title{width:78%;max-width:300px}
  .js:not(.reduce-motion) .hero-copy>p{font-size:14px;line-height:1.5;margin-top:10px;text-shadow:0 1px 12px #09090b}
  .js:not(.reduce-motion) .hero-buttons{margin-top:15px;gap:15px;flex-wrap:nowrap}
  .js:not(.reduce-motion) .hero-hud{display:none}
  .hero-atmosphere{opacity:.86}
  .js:not(.reduce-motion) .city-copy{bottom:16%}
}
@media(max-width:600px) and (max-height:740px){
  .js:not(.reduce-motion) .hero-copy{padding-top:10px;padding-bottom:10px}
  .js:not(.reduce-motion) .hero-title{width:76%;max-width:270px}
  .js:not(.reduce-motion) .hero-copy>p{font-size:13px;line-height:1.5;margin-top:8px}
  .js:not(.reduce-motion) .hero-subline{display:none}
  .js:not(.reduce-motion) .hero-buttons{margin-top:11px;gap:12px}
}
@media(max-height:480px){
  .js:not(.reduce-motion) .hero-eyebrow,.js:not(.reduce-motion) .desktop-game-logo,.js:not(.reduce-motion) .hero-copy>p{display:none}
  .js:not(.reduce-motion) .hero-copy{justify-content:center}
  .js:not(.reduce-motion) .hero-title{max-width:min(360px,78svh)}
  .js:not(.reduce-motion) .hero-buttons{margin-top:18px}
  .js:not(.reduce-motion) .city-copy .type-title{max-width:min(650px,160svh);margin-block:18px}
  .js:not(.reduce-motion) .city-copy>p{font-size:14px;margin-bottom:16px}
  .js:not(.reduce-motion) .city-copy>.eyebrow{font-size:8px}
  .city-coordinate{display:none}
}
/* Keep the aircraft/skyline visible above a compact lower caption in landscape. */
@media(max-height:560px){
  .js:not(.reduce-motion) .city-copy{bottom:max(76px,calc(62px + env(safe-area-inset-bottom)))}
  .js:not(.reduce-motion) .city-copy>.eyebrow{font-size:8px}
  .js:not(.reduce-motion) .city-copy .type-title{width:min(58vw,610px);max-width:100%;margin-block:12px}
  .js:not(.reduce-motion) .city-copy>p{display:none}
  .js:not(.reduce-motion) .city-copy>.button{min-height:44px;padding-block:8px}
  .city-coordinate{display:none}
}
/* Preserve rotor clearance beneath the fixed header in small landscape views. */
@media(max-height:400px){
  .city-media{top:16px;bottom:-16px}
}
@media(max-width:700px) and (max-height:560px){
  .js:not(.reduce-motion) .hero-eyebrow,.js:not(.reduce-motion) .desktop-game-logo,.js:not(.reduce-motion) .hero-copy>p{display:none}
}
@media(max-width:600px) and (max-height:480px){
  :root{--header:58px}
  .js:not(.reduce-motion) .hero-scene{display:grid;grid-template-columns:44% minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding-top:var(--header);padding-bottom:max(74px,calc(60px + env(safe-area-inset-bottom)))}
  .js:not(.reduce-motion) .hero-copy{position:relative;inset:auto;align-self:stretch;justify-content:center;padding:10px}
  .js:not(.reduce-motion) .hero-art{position:relative;inset:auto;height:100%}
  .js:not(.reduce-motion) .hero-shade{display:none}
  .js:not(.reduce-motion) .hero-title{max-width:100%;width:min(100%,50svh)}
  .js:not(.reduce-motion) .hero-buttons{gap:9px;align-items:center;width:100%;margin-top:12px}
  .mobile-game-logo,.art-margin{display:none}
  .hero-art:before,.hero-art:after{display:none}
}
/* An explicit user/system choice still restores a static, readable document. */
.reduce-motion .hero-atmosphere{transform:none!important}
.reduce-motion .hero-copy{display:block}
@media(min-width:1001px){.hero-hud .hud-location{transform:translateY(-52px)}}