/* The launch clock sits above the navigation and disappears when doors open. */
:root{--launchbar-height:66px;--hero-content-top:150px;--section-offset:115px}
:root.is-live{--launchbar-height:0px}
html{scroll-padding-top:calc(var(--section-offset) + var(--launchbar-height))}
.launch-banner{position:fixed;inset:0 0 auto;z-index:110;min-height:66px;background:linear-gradient(110deg,#153b4c,#1c4866 55%,#153b4c);color:white;border-bottom:1px solid #ffffff1f;box-shadow:0 4px 20px #12092220;transition:transform .65s cubic-bezier(.76,0,.24,1),opacity .4s;isolation:isolate}
.launch-banner::before{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#a9deff80,transparent)}
.launch-bar-inner{display:flex;min-height:66px;align-items:center;justify-content:center;gap:38px;padding-block:8px}
.launch-caption{font-size:.875rem;font-weight:500;color:#daebfa;white-space:nowrap}
.launch-caption time{color:white;font-weight:700;margin-left:4px}
.launch-clock{display:flex;align-items:center;gap:19px}
.launch-unit{display:flex;align-items:center;gap:6px;min-width:63px}
.launch-unit b{display:block;min-width:2ch;font:800 1.6rem/1.2 var(--display);font-variant-numeric:tabular-nums;text-align:center;color:var(--yellow)}
.launch-unit small{font-size:.75rem;color:#b9d2e9}
/* Spinning counter: each changed digit turns a full revolution and lands. */
.launch-clock{--reel-cell:34px;--reel-dur:700ms;--reel-spin-blur:3px;--reel-stagger:90ms;--reel-ease:cubic-bezier(.16,1,.3,1)}
.t-reel{display:inline-flex;align-items:center;height:var(--reel-cell)}
.t-reel-col{position:relative;height:var(--reel-cell);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}
.t-reel-strip{display:flex;flex-direction:column;will-change:transform,filter}
.t-reel-digit{height:var(--reel-cell);display:flex;align-items:center;justify-content:center}
.launch-unit b:has(.t-reel){line-height:1}
.launch-zone{font-size:.75rem;white-space:nowrap;color:#b9d2e9}
.launch-local{color:#fff;font-weight:600}
.launch-local::before{content:" · ";color:#b9d2e9;font-weight:400}


.hero{padding-top:calc(var(--hero-content-top) + var(--launchbar-height));transition:padding-top .65s cubic-bezier(.76,0,.24,1)}
.is-live .launch-banner{transform:translateY(-105%);opacity:0;pointer-events:none}
.final h2{max-width:950px;margin-inline:auto}

/* After launch the same bar counts down to the next update (a Roblox event). */
:root.is-live.has-update{--launchbar-height:66px}
.is-live.has-update .launch-banner{transform:none;opacity:1;pointer-events:auto}
.launch-caption a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:#ffffff59;text-underline-offset:3px;transition:text-decoration-color .2s}
.launch-caption a:hover,.launch-caption a:focus-visible{text-decoration-color:#fff}
.launch-zone a{color:var(--yellow);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* A single celebratory reveal, only for visitors watching the clock reach zero. */
.launch-celebration{position:fixed;inset:0;z-index:150;pointer-events:none;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#3382b9ec,#211936ed);animation:launch-curtain 2.8s ease both}
.launch-halo{position:absolute;left:50%;top:48%;width:118vmax;height:118vmax;transform:translate(-50%,-50%);background:radial-gradient(circle,#8cd2ff4d 0,#4eb1e926 32%,transparent 62%);animation:launch-halo 2.8s cubic-bezier(.16,1,.3,1) both}
.launch-emblem{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;animation:launch-emblem 2.8s cubic-bezier(.2,.8,.3,1) both;z-index:2}
.launch-emblem img{width:min(440px,74vw);filter:drop-shadow(0 18px 34px #12072259)}
.is-launching .hero-map{animation:city-awakens 2.8s ease-out both}
.is-launching .hero-cta .btn{animation:launch-button .75s cubic-bezier(.2,1.6,.5,1) 1.6s both}
@keyframes launch-curtain{0%{opacity:0}12%,65%{opacity:1}100%{opacity:0}}
@keyframes launch-halo{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}22%,60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.08);opacity:0}}
@keyframes launch-emblem{0%{opacity:0;transform:translateY(22px) scale(.88)}22%,66%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(1.04)}}
@keyframes city-awakens{0%{transform:scale(1.025)}35%{transform:scale(1.08)}100%{transform:scale(1.025)}}
@keyframes launch-button{0%{transform:scale(.9);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}
@media(min-width:1600px){:root{--hero-content-top:170px}}
@media(max-width:900px){.launch-bar-inner{gap:22px}.launch-clock{gap:12px}.launch-unit{min-width:58px}}
@media(max-width:680px){
  :root{--launchbar-height:88px;--hero-content-top:120px;--section-offset:100px}
  :root.is-live{--launchbar-height:0px}
  .launch-banner{min-height:88px}
  .launch-bar-inner{min-height:88px;display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px 20px}
  .launch-caption{font-size:.75rem}
  .launch-zone{grid-column:2;grid-row:1;font-size:.75rem;text-align:right;line-height:1.35}
  .launch-local{display:block}
  .launch-local::before{content:none}
  .launch-clock{grid-column:1/-1;justify-content:center;gap:20px}
  .launch-unit{gap:5px;min-width:0}
  .launch-unit b{font-size:1.45rem}.launch-clock{--reel-cell:31px}
  .launch-unit small{font-size:.75rem}
  
  .launch-emblem{gap:20px}
}
@media(max-width:370px){.launch-bar-inner{padding-inline:16px}.launch-clock{gap:13px}.launch-unit{gap:4px}.launch-caption time{margin-left:1px}}
@media(prefers-reduced-motion:reduce){.t-reel-strip{transition:none!important;filter:none!important}.launch-celebration{display:none}.launch-banner,.site-head,.hero{transition:none}}

/* Countdown typography and sizing must not inherit the wiki's article styles. */
@font-face{font-family:Avocado;src:url('../assets/avocado.woff2?v=9930f778bc') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
.launch-banner{--display:Avocado,system-ui,sans-serif;--yellow:#ffe28b;font:400 14px/1.5 Poppins,system-ui,sans-serif}
.launch-banner *{box-sizing:border-box}
.launch-banner .launch-bar-inner{width:100%;max-width:1240px;margin:0 auto;padding-inline:24px}
.launch-banner .launch-caption{margin:0}
.launch-banner .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:680px){:root{--section-offset:160px}.hero{--hero-content-top:180px}.launch-banner .launch-bar-inner{padding-inline:20px}}
@media(max-width:680px){:root.is-live.has-update{--launchbar-height:94px}.has-update .launch-banner,.has-update .launch-bar-inner{min-height:94px}.has-update .launch-caption{white-space:normal;line-height:1.35}}
