:root {
  color-scheme: dark;
  --ink: #111111;
  --cream: #fff7dc;
  --orange: #ff6f47;
  --yellow: #ffd43d;
  --sequence: 0s;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: #101d28;
  font-family: Arial Black, Arial, sans-serif;
}

.intro {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
  overflow: clip;
  background: #1abbe9;
}

.sky,
.sky::after {
  position: absolute;
  inset: 0;
  content: "";
}

.sky {
  z-index: -4;
  background:
    url("assets/sky-clouds-full.png") center center / cover no-repeat,
    #20bde8;
}

.sky::after {
  opacity: .32;
  background-image: radial-gradient(rgba(255, 255, 255, .35) .8px, transparent .8px);
  background-size: 8px 8px;
  mix-blend-mode: soft-light;
}

.city-mask {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.city-world-shell {
  position: absolute;
  width: 309.6vmin;
  aspect-ratio: 1;
  left: 50%;
  top: calc(100vh + 51.6vmin);
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

.city-world-shell::after {
  position: absolute;
  z-index: 4;
  inset: -3%;
  content: "";
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 74, 116, .12) 0 2px, transparent 2px 9px);
}

.city-world {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: city-spin 26.4s linear infinite;
}

.city-clouds {
  position: absolute;
  inset: -50%;
  background:
    url("assets/sky-clouds-full.png") center 38% / cover no-repeat,
    #20bde8;
}

.city-planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 32px rgba(11, 37, 47, .2))
    saturate(1.08)
    contrast(1.03);
}

.window-lights {
  position: absolute;
  inset: 7%;
  z-index: 2;
  pointer-events: none;
}

.window-lights i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(4px, .5vmin, 10px);
  aspect-ratio: .62;
  border-radius: 2px;
  background: #fff3a6;
  box-shadow: 0 0 6px 2px rgba(255, 191, 58, .75), 0 0 14px 4px rgba(255, 125, 47, .28);
  opacity: .12;
}

.signal-ping {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: clamp(20px, 3.2vmin, 56px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 245, 167, .9);
  border-radius: 50%;
  box-shadow: 0 0 14px 3px rgba(255, 157, 63, .52);
  opacity: 0;
  pointer-events: none;
}

.character-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}

.effects-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.orbital-bird {
  position: absolute;
  top: 61%;
  left: 50%;
  width: clamp(27px, 4vw, 52px);
  opacity: 0;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .22));
  transform-origin: center;
}

.orbital-bird svg { display: block; width: 100%; overflow: visible; transform-origin: center; }
.orbital-bird path { fill: none; stroke: #18242b; stroke-width: 3.2; stroke-linecap: round; }
.orbit-b { width: clamp(20px, 2.8vw, 38px); }
.orbit-c { width: clamp(17px, 2.2vw, 30px); }

.rocket {
  position: absolute;
  width: 22px;
  height: 59px;
  border: 3px solid #111;
  border-radius: 55% 55% 35% 35%;
  background: linear-gradient(90deg, #ff6754 0 48%, #fff6d7 49% 100%);
  opacity: 0;
  transform-origin: 50% 82%;
}

.rocket::before,
.rocket::after { content: ""; position: absolute; bottom: 0; width: 11px; height: 20px; background: #f7b92e; border: 2px solid #111; }
.rocket::before { left: -10px; border-radius: 10px 0 0 7px; }
.rocket::after { right: -10px; border-radius: 0 10px 7px 0; }
.rocket-window { position: absolute; top: 12px; left: 5px; width: 8px; height: 8px; border: 2px solid #111; border-radius: 50%; background: #49c9ed; }
.rocket-flame { position: absolute; left: 50%; bottom: -24px; width: 12px; height: 28px; transform: translateX(-50%); border-radius: 50% 50% 70% 70%; background: linear-gradient(#fff4a4, #ff7a3d 55%, transparent 56%); }

.sparkle { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fffbe4; box-shadow: 0 0 12px 3px rgba(255, 244, 154, .8); opacity: 0; }
.sparkle-a { left: 17%; top: 42%; }
.sparkle-b { left: 79%; top: 31%; }
.sparkle-c { left: 67%; top: 66%; }

.meteor {
  position: absolute;
  top: 10%;
  left: 0;
  width: clamp(90px, 15vw, 220px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff6b0 52%, #ff7e61 100%);
  box-shadow: 0 0 12px 3px rgba(255, 227, 142, .72);
  opacity: 0;
  transform-origin: right center;
}

.character-stack {
  position: absolute;
  right: clamp(28px, 15vw, 210px);
  bottom: -2.5vh;
  height: min(82vh, 855px);
  width: auto;
  aspect-ratio: 267 / 855;
  min-width: 0;
  margin: 0;
  transform: translateY(112%);
  transform-origin: 50% 100%;
  will-change: transform;
}

.character-float {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  will-change: transform;
}

.character-bounce {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-origin: 50% 62%;
  will-change: transform;
}

.pole-extension {
  position: absolute;
  z-index: 0;
  left: 34%;
  top: 62%;
  width: 30%;
  height: 100%;
  content: "";
  pointer-events: none;
  background: url("assets/pole-extension.png") center top / 100% 100% no-repeat;
}

.characters {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 17px 0 rgba(15, 22, 26, .17));
}

.characters-look,
.characters-blink {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.logo-stage {
  position: absolute;
  z-index: 3;
  top: clamp(30px, 5.2vh, 64px);
  left: clamp(26px, 4vw, 68px);
  width: min(64vw, 780px);
  text-align: left;
  pointer-events: none;
}

.audio-visualizer {
  position: absolute;
  z-index: 2;
  left: clamp(8px, 1.4vw, 28px);
  top: clamp(10px, 1.5vh, 26px);
  width: min(78vw, 980px);
  height: clamp(150px, 34vh, 380px);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(1.5) contrast(1.12) drop-shadow(0 0 15px rgba(255, 84, 210, .74));
  transition: opacity .35s ease;
}

.wordmark-motion {
  position: relative;
  z-index: 2;
  transform-origin: left center;
  transform: translateY(var(--audio-y, 0px)) rotate(var(--audio-rotate, 0deg)) scale(var(--audio-pulse, 1));
  will-change: transform;
}

.wordmark-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 .08em 0 rgba(255, 102, 68, .7));
}

.logo-pixels {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(1.65) drop-shadow(0 0 8px rgba(255, 94, 222, .8));
}

.dark-curtain {
  position: absolute;
  z-index: 8;
  inset: 0;
  background: #101d28;
  pointer-events: none;
  opacity: 1;
}

.loading-screen {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff8dd;
  background: radial-gradient(circle at 50% 42%, rgba(35, 139, 185, .36), transparent 40%), #101d28;
  transition: opacity .55s ease, visibility .55s step-end;
}

.loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loading-card { display: grid; justify-items: center; gap: 15px; text-align: center; }
.loading-kicker { margin: 0; font: 900 clamp(34px, 7vw, 90px)/.9 Arial Black, Impact, sans-serif; letter-spacing: .08em; text-shadow: 4px 5px 0 #05090d, 0 0 22px rgba(67, 222, 255, .7); }
.loading-status { margin: 0; font: 700 clamp(12px, 1.5vw, 17px)/1.3 Arial, sans-serif; letter-spacing: .08em; }
.loading-spinner { width: 42px; aspect-ratio: 1; border: 4px solid rgba(255, 247, 216, .28); border-top-color: #56e5ff; border-right-color: #ff68d5; border-radius: 50%; animation: loading-spin .8s linear infinite; }
.start-experience { border: 2px solid #fff4c6; padding: 12px 20px; color: #15141c; background: linear-gradient(135deg, #56e5ff, #ff75cf 58%, #ffe75b); box-shadow: 0 0 22px rgba(255, 112, 207, .62); font: 900 15px/1 Arial Black, Arial, sans-serif; letter-spacing: .07em; cursor: pointer; }
.start-experience:hover { transform: scale(1.05) rotate(-1deg); }
.start-experience:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.replay {
  position: absolute;
  z-index: 10;
  right: 18px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(17, 17, 17, .72);
  border-radius: 50%;
  color: #111;
  background: rgba(255, 247, 220, .48);
  font: 900 22px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: background .2s ease, transform .2s ease;
  animation: reveal-control .4s ease 9.4s forwards;
}

.music-toggle {
  position: absolute;
  z-index: 10;
  right: 64px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(17, 17, 17, .72);
  border-radius: 50%;
  color: #111;
  background: rgba(255, 247, 220, .48);
  font: 900 22px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: background .2s ease, transform .2s ease;
  animation: reveal-control .4s ease 9.4s forwards;
}

.music-toggle:hover,
.music-toggle[aria-pressed="true"] { background: rgba(255, 247, 220, .88); }
.music-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.replay:hover { background: rgba(255, 247, 220, .88); transform: rotate(-35deg); }
.replay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.intro.play .dark-curtain { animation: curtain-fade 2.7s cubic-bezier(.62, 0, .24, 1) var(--sequence) forwards; }
.intro.play .character-stack {
  animation: rise-in 1s cubic-bezier(.15, .84, .24, 1.15) calc(var(--sequence) + 7s) forwards;
}
.intro.play .character-float {
  animation: character-idle-bounce 1.55s ease-in-out calc(var(--sequence) + 8s) infinite;
}
.intro.play .character-float.character-sway { animation-duration: var(--sway-duration, 1.5s); animation-timing-function: cubic-bezier(.17, .86, .28, 1.26); animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both; }
.intro.play .character-float.sway-a { animation-name: character-bounce-a; }
.intro.play .character-float.sway-b { animation-name: character-bounce-b; }
.intro.play .character-float.sway-c { animation-name: character-bounce-c; }
.intro.play .character-float.sway-d { animation-name: character-bounce-d; }
.intro.play .characters-look {
  animation: look-and-wind 6.4s ease-in-out calc(var(--sequence) + 9.3s) infinite;
}
.intro.play .characters-blink {
  animation: natural-blink 7.7s steps(1, end) calc(var(--sequence) + 10.1s) infinite;
}
.intro.play .city-world-shell {
  animation: earth-wobble 31s ease-in-out calc(var(--sequence) + 9.5s) infinite, earth-colors 31s steps(1, end) calc(var(--sequence) + 9.5s) infinite;
}
.intro.play .city-world-shell::after { animation: tv-static 31s steps(2, end) calc(var(--sequence) + 9.5s) infinite; }
.intro.play .window-lights i { animation: window-flicker 5.4s steps(1, end) var(--d) infinite; }
.intro.play .signal-ping { animation: signal-pulse 9s ease-out var(--d) infinite; }
.intro.play .wordmark-image {
  animation: logo-pop .95s cubic-bezier(.17, .89, .3, 1.45) calc(var(--sequence) + 8.17s) forwards;
}
.intro.play.music-on .audio-visualizer { opacity: 1; }
.intro.play .character-bounce { animation: character-idle-jelly 1.55s ease-in-out calc(var(--sequence) + 8s) infinite; }
.intro.play .character-float.character-sway .character-bounce { animation-duration: var(--sway-duration, 1.5s); animation-timing-function: cubic-bezier(.17, .86, .28, 1.26); animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both; }
.intro.play .character-float.sway-a .character-bounce { animation-name: character-jelly-a; }
.intro.play .character-float.sway-b .character-bounce { animation-name: character-jelly-b; }
.intro.play .character-float.sway-c .character-bounce { animation-name: character-jelly-c; }
.intro.play .character-float.sway-d .character-bounce { animation-name: character-jelly-d; }
.intro.play .orbital-bird svg { animation: wing-flutter .32s ease-in-out infinite alternate; }
.intro.play .orbit-a { animation: bird-orbit-a 15s linear calc(var(--sequence) + 10s) infinite; }
.intro.play .orbit-b { animation: bird-orbit-b 19s linear calc(var(--sequence) + 15s) infinite; }
.intro.play .orbit-c { animation: bird-orbit-c 23s linear calc(var(--sequence) + 21s) infinite; }
.intro.play .rocket { animation: rocket-flight 36s linear calc(var(--sequence) + 15s) infinite; }
.intro.play .meteor { animation: meteor-flight 29s linear calc(var(--sequence) + 19s) infinite; }
.intro.play .sparkle-a { animation: sparkle-float 5s ease-in-out calc(var(--sequence) + 10s) infinite; }
.intro.play .sparkle-b { animation: sparkle-float 6.7s ease-in-out calc(var(--sequence) + 13s) infinite; }
.intro.play .sparkle-c { animation: sparkle-float 8.1s ease-in-out calc(var(--sequence) + 16s) infinite; }

@keyframes curtain-fade {
  0%, 11% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes city-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes earth-wobble {
  0%, 12%, 100% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(-.25%, .1%) scale(1.008, .993); }
  32% { transform: translate(.2%, -.1%) scale(.994, 1.006); }
  44% { transform: translate(0, 0) scale(1); }
  91% { transform: translate(-4px, 1px) skewX(-.25deg) scaleX(1.012); }
  92% { transform: translate(5px, -1px) skewX(.35deg) scaleX(.988); }
  93% { transform: translate(-2px, 0) scale(1.004); }
  94% { transform: translate(0, 0) scale(1); }
}

@keyframes earth-colors {
  0%, 90%, 100% { filter: none; }
  91% { filter: contrast(1.45) saturate(.55) hue-rotate(12deg); }
  92% { filter: contrast(.85) saturate(1.7) hue-rotate(-16deg); }
  93% { filter: contrast(1.2) saturate(.82); }
}

@keyframes tv-static {
  0%, 89%, 100% { opacity: 0; }
  90% { opacity: .18; }
  91% { opacity: .54; }
  92% { opacity: .26; }
  93% { opacity: .44; }
  94% { opacity: 0; }
}

@keyframes window-flicker {
  0%, 14%, 26%, 52%, 78%, 100% { opacity: .12; }
  15%, 25%, 53%, 77% { opacity: .95; }
}

@keyframes signal-pulse {
  0%, 73%, 100% { opacity: 0; transform: scale(.25); }
  76% { opacity: .92; }
  93% { opacity: 0; transform: scale(3.8); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes logo-wobble {
  0%, 8%, 100% { transform: rotate(0) scale(1); }
  1% { transform: rotate(-1.8deg) scale(1.01, .98); }
  3% { transform: rotate(1.5deg) scale(.985, 1.02); }
  5% { transform: rotate(-.7deg) scale(1.008, .992); }
}

@keyframes logo-pop {
  0% { opacity: 0; transform: translateY(.55em) scale(.42, .72) rotate(-4deg); }
  48% { opacity: 1; transform: translateY(-.08em) scale(1.08, .9) rotate(1.4deg); }
  72% { transform: translateY(.03em) scale(.97, 1.04) rotate(-.7deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes wing-flutter {
  from { transform: scaleY(1) rotate(0deg); }
  to { transform: scaleY(.56) rotate(-3deg); }
}

@keyframes bird-orbit-a {
  0%, 5% { transform: translate(-68vw, 4vh) scale(.45); opacity: 0; }
  9% { opacity: .88; }
  34% { transform: translate(-30vw, -29vh) scale(.78); opacity: .9; }
  58% { transform: translate(4vw, -37vh) scale(1); opacity: .94; }
  78% { transform: translate(39vw, -18vh) scale(.76); opacity: .82; }
  89%, 100% { transform: translate(68vw, 3vh) scale(.45); opacity: 0; }
}

@keyframes bird-orbit-b {
  0%, 12% { transform: translate(-64vw, 12vh) scale(.35); opacity: 0; }
  16% { opacity: .68; }
  39% { transform: translate(-18vw, -22vh) scale(.64); opacity: .72; }
  62% { transform: translate(22vw, -28vh) scale(.78); opacity: .76; }
  81% { transform: translate(53vw, -3vh) scale(.5); opacity: .6; }
  91%, 100% { transform: translate(70vw, 12vh) scale(.3); opacity: 0; }
}

@keyframes bird-orbit-c {
  0%, 18% { transform: translate(-58vw, -1vh) scale(.25); opacity: 0; }
  21% { opacity: .55; }
  47% { transform: translate(-8vw, -40vh) scale(.5); opacity: .62; }
  69% { transform: translate(34vw, -20vh) scale(.58); opacity: .56; }
  83%, 100% { transform: translate(65vw, 4vh) scale(.22); opacity: 0; }
}

@keyframes rocket-flight {
  0%, 18% { transform: translate(-18vw, 112vh) rotate(-36deg); opacity: 0; }
  20% { opacity: 1; }
  42% { opacity: 1; }
  47%, 100% { transform: translate(122vw, -36vh) rotate(-36deg); opacity: 0; }
}

@keyframes meteor-flight {
  0%, 60% { transform: translate(112vw, -18vh) rotate(145deg) scaleX(.4); opacity: 0; }
  62% { opacity: 1; }
  70% { transform: translate(-24vw, 78vh) rotate(145deg) scaleX(1); opacity: .92; }
  73%, 100% { transform: translate(-34vw, 86vh) rotate(145deg) scaleX(.2); opacity: 0; }
}

@keyframes sparkle-float {
  0%, 100% { opacity: 0; transform: translateY(10px) scale(.5); }
  28%, 63% { opacity: .9; transform: translateY(-8px) scale(1); }
  45% { opacity: .25; transform: translateY(-14px) scale(.7); }
}

@keyframes look-and-wind {
  0%, 12%, 48%, 100% { opacity: 0; }
  18%, 40% { opacity: 1; }
}

@keyframes natural-blink {
  0%, 69%, 72%, 76%, 100% { opacity: 0; }
  70%, 71%, 74%, 75% { opacity: 1; }
}

@keyframes rise-in {
  0% { transform: translateY(112%) scaleY(.92); }
  68% { transform: translateY(-2.2%) scaleY(1.025); }
  85% { transform: translateY(1.1%) scaleY(.993); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes character-idle-jelly {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.025, .985); }
  60% { transform: scale(.982, 1.022); }
}

@keyframes character-idle-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-1.7%); }
  70% { transform: translateY(.45%); }
}

@keyframes character-bounce-a {
  0%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-9%) rotate(-.4deg); }
  42% { transform: translateY(1.2%) rotate(.15deg); }
  63% { transform: translateY(-4.8%) rotate(-.18deg); }
  82% { transform: translateY(.35%) rotate(.04deg); }
}

@keyframes character-bounce-b {
  0%, 100% { transform: translateY(0) rotate(0); }
  16% { transform: translateY(-6%) rotate(.2deg); }
  33% { transform: translateY(-10.5%) rotate(-.45deg); }
  54% { transform: translateY(1.4%) rotate(.2deg); }
  72% { transform: translateY(-3.8%) rotate(-.13deg); }
  88% { transform: translateY(.25%) rotate(.03deg); }
}

@keyframes character-bounce-c {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-11.5%) rotate(-.5deg); }
  46% { transform: translateY(1.5%) rotate(.24deg); }
  66% { transform: translateY(-5.6%) rotate(-.22deg); }
  84% { transform: translateY(.45%) rotate(.05deg); }
}

@keyframes character-bounce-d {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-8%) rotate(.34deg); }
  40% { transform: translateY(1%) rotate(-.14deg); }
  58% { transform: translateY(-6.7%) rotate(.23deg); }
  78% { transform: translateY(.5%) rotate(-.05deg); }
}

@keyframes character-jelly-a {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(var(--jelly-big, 1.12), var(--jelly-small, .9)); }
  40% { transform: scale(var(--jelly-small, .9), var(--jelly-big, 1.12)); }
  62% { transform: scale(1.055, .95); }
  82% { transform: scale(.965, 1.04); }
}

@keyframes character-jelly-b {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(.94, 1.08); }
  32% { transform: scale(var(--jelly-big, 1.12)); }
  55% { transform: scale(var(--jelly-small, .9), 1.09); }
  74% { transform: scale(1.045, .965); }
}

@keyframes character-jelly-c {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(var(--jelly-big, 1.12), .88); }
  43% { transform: scale(.92, 1.1); }
  67% { transform: scale(1.07, .94); }
  85% { transform: scale(.98, 1.025); }
}

@keyframes character-jelly-d {
  0%, 100% { transform: scale(1); }
  22% { transform: scale(.9, 1.12); }
  46% { transform: scale(var(--jelly-big, 1.12), var(--jelly-small, .9)); }
  68% { transform: scale(.95, 1.06); }
  86% { transform: scale(1.035, .975); }
}

@keyframes gum-pop {
  0% { opacity: 0; transform: translateY(.8em) scale(.12) rotate(-20deg); }
  48% { opacity: 1; transform: translateY(-.12em) scale(1.24, .72) rotate(8deg); }
  70% { transform: translateY(.05em) scale(.82, 1.18) rotate(-4deg); }
  86% { transform: translateY(-.025em) scale(1.08, .94) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes reveal-control { to { opacity: .78; transform: translateY(0); } }
@keyframes loading-spin { to { transform: rotate(360deg); } }

@media (max-height: 560px) {
  .logo-stage { top: 27px; }
  .character-stack { height: min(72vh, 740px); width: auto; }
  .replay { width: 31px; height: 31px; font-size: 18px; }
}

@media (max-aspect-ratio: 3/4) {
  .city-world-shell {
    width: 342vmin;
    top: calc(100vh + 57vmin);
  }

  .logo-stage {
    top: 42px;
    left: 31px;
    width: 88vw;
  }

  .wordmark { font-size: 12.2vw; }

  .character-stack {
    right: 7vw;
    height: min(78vh, 740px);
    width: auto;
    bottom: -1.4vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-world-shell, .city-world, .dark-curtain, .intro.play .character-stack,
  .intro.play .character-float, .intro.play .character-bounce,
  .intro.play .characters-look, .intro.play .characters-blink,
  .intro.play .wordmark span, .intro.play .wordmark-motion, .intro.play .wordmark,
  .intro.play .wordmark-image,
  .intro.play .city-world-shell::after, .intro.play .window-lights i, .intro.play .signal-ping, .intro.play .orbital-bird,
  .intro.play .orbital-bird svg, .intro.play .rocket, .intro.play .meteor, .intro.play .sparkle,
  .replay, .music-toggle { animation: none; }
  .dark-curtain { display: none; }
  .character-stack { transform: translateY(0); }
  .characters-look, .characters-blink { opacity: 0; }
  .wordmark span, .replay { opacity: 1; }
  .wordmark span { transform: none; }
}