/* =========================================================
   Float & Pop — landing page
   The page is the sky: you scroll down from the sun, through
   the clouds, past the mountains and into the sea.
   ========================================================= */

:root {
  --navy: #14234b;
  --navy-glass: rgba(20, 30, 60, 0.62);
  --ink: #1e2e5c;
  --gold: #ffd25a;
  --green: #3caa50;
  --green-hi: #50be64;
  --green-lo: #2d8c41;
  --red: #f0473a;
  --white: #ffffff;
  --card: rgba(255, 255, 255, 0.88);

  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the whole document is one tall sky, darkest at the top */
  background: linear-gradient(180deg, #2a86d9 0%, #4aa6ec 22%, #7cc5f5 55%, #a8dcf9 80%, #c4ecfb 100%);
  background-color: #7cc5f5;
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: 0.01em; }
p { margin: 0; }
strong, b { font-weight: 900; }

.kicker {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--navy-glass);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

section { position: relative; padding: clamp(80px, 12vh, 140px) var(--gutter); }

.section-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vw, 72px); }
.section-head h2,
.wardrobe-copy h2,
.finale-copy h2 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--white);
  text-shadow: 0 3px 0 #1d5fa8, 0 6px 0 rgba(20, 35, 75, 0.35), 0 14px 30px rgba(20, 35, 75, 0.25);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--display); font-size: 1.15rem; text-decoration: none; color: var(--white);
  background: linear-gradient(var(--green-hi), var(--green));
  border: 3px solid var(--white);
  border-radius: 999px;
  padding: 0.55em 1.3em;
  box-shadow: 0 5px 0 var(--green-lo), 0 10px 20px rgba(20, 35, 75, 0.25);
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--green-lo), 0 14px 24px rgba(20, 35, 75, 0.3); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green-lo); }
.btn-small { font-size: 0.95rem; padding: 0.45em 1.05em; border-width: 2px; box-shadow: 0 4px 0 var(--green-lo); }

.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 196px;
  padding: 10px 22px 10px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--white);
  background: var(--navy);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 0 #0a1430, 0 14px 28px rgba(10, 20, 48, 0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.store:hover { transform: translateY(-3px) rotate(-1deg); }
.store:active { transform: translateY(4px); box-shadow: 0 2px 0 #0a1430; }
.store svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.store span { white-space: nowrap; font-family: var(--display); font-size: 1.35rem; line-height: 1.05; }
.store small { display: block; font-family: var(--body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.8; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 50;
  top: 12px; left: 50%; translate: -50% 0;
  width: min(var(--maxw), calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 12px;
  background: var(--navy-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--white);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.25rem; }
.brand img { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--white); }
.score { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 26px); font-family: var(--display); }
.score-cell { display: flex; align-items: baseline; gap: 6px; }
.score-cell small { font-size: 0.72rem; letter-spacing: 0.12em; opacity: 0.75; }
.score-cell b { font-weight: 400; font-size: 1.2rem; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.score-cell.coins { align-items: center; }
.score-cell.coins img { width: 22px; height: 22px; }
.score.bump b#score { animation: bump 0.35s; display: inline-block; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--white); } }

/* ---------- Altimeter ---------- */
.altimeter {
  position: fixed; z-index: 40;
  right: 18px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--white); font-family: var(--display); font-size: 0.85rem;
  text-shadow: 0 2px 0 rgba(20, 35, 75, 0.5);
}
.alt-track {
  position: relative; width: 6px; height: 38vh;
  border-radius: 6px; background: rgba(255, 255, 255, 0.35);
}
.alt-marker {
  position: absolute; left: 50%; width: 26px;
  top: calc(var(--p, 0) * (100% - 36px));
  translate: -50% 0;
  animation: sway 2.4s ease-in-out infinite alternate;
}
.alt-label b { font-weight: 400; font-variant-numeric: tabular-nums; }

/* =========================================================
   Fighters: an animated sprite with two poppable balloons
   ========================================================= */
.fighter {
  --n: 18;
  position: relative;
  width: var(--w);
  height: var(--h);
  animation: hover 3.2s ease-in-out infinite alternate;
}
.fighter.dan   { --w: 260px; --h: 600px; --sw: 200px; --sh: 360px; --sheet: url(assets/dan-flying.webp);  --hand: 172px 340px; }
.fighter.tati  { --w: 240px; --h: 600px; --sw: 169px; --sh: 360px; --sheet: url(assets/tati-flying.webp); --hand: 145px 345px; }
.fighter.enemy { --w: 200px; --h: 520px; --sw: 124px; --sh: 300px; --sheet: url(assets/enemy-gliding.webp); --hand: 96px 410px; }
.fighter.enemy.pumping { --sw: 133px; --sheet: url(assets/enemy-pumping.webp); }
.fighter.mini { --w: var(--sw); --h: var(--sh); }

.fighter .sprite {
  position: absolute; left: 0; bottom: 0;
  width: var(--sw); height: var(--sh);
  background: var(--sheet) 0 0 / calc(var(--sw) * var(--n)) var(--sh) no-repeat;
  animation: frames 1.5s steps(var(--n)) infinite;
  cursor: pointer;
}
@keyframes frames { to { background-position-x: calc(var(--sw) * var(--n) * -1); } }

/* balloons sway around the hand that holds them */
.rig {
  position: absolute; inset: 0;
  transform-origin: var(--hand);
  animation: sway 2.8s ease-in-out infinite alternate;
}
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes hover { from { translate: 0 -8px; } to { translate: 0 10px; } }

/* ---------- Balloons ---------- */
.balloon {
  all: unset;
  position: absolute;
  left: var(--x); top: var(--y);
  width: 80px; height: 111px;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}
.enemy .balloon { width: 84px; height: 106px; }
.balloon img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; transition: transform 0.15s; transform-origin: 50% 90%; }
.balloon:hover img { transform: scale(1.06) rotate(-3deg); }
.balloon:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 50%; }
.balloon .string {
  position: absolute; left: 50%; top: calc(100% - 6px);
  width: 1.5px; height: var(--len, 60px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 0.5px rgba(20, 35, 75, 0.15);
  transform-origin: top center;
  rotate: var(--ang, 0deg);
  pointer-events: none;
}
.balloon.popped { pointer-events: none; }
.balloon.popped img { animation: burst 0.22s ease-out forwards; }
.balloon.popped .string { animation: snap 0.6s ease-in forwards; }
.balloon.inflate img { animation: inflate 0.45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes burst { 50% { transform: scale(1.45); opacity: 0.9; filter: brightness(1.6); } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes snap { to { translate: 0 60px; opacity: 0; } }
@keyframes inflate { from { transform: scale(0.1); } }

/* ---------- Losing your balloons ---------- */
.fighter.falling { animation: fall 1.3s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes fall {
  0% { translate: 0 0; rotate: 0deg; }
  15% { translate: 0 -40px; rotate: -6deg; }
  100% { translate: 0 120vh; rotate: 28deg; }
}
.fighter .chute {
  position: absolute; width: 230px; max-width: none;
  left: calc(var(--sw) / 2 - 115px); top: calc(var(--h) - var(--sh) - 190px);
  opacity: 0; scale: 0.2; transform-origin: 50% 100%;
  transition: opacity 0.25s, scale 0.35s cubic-bezier(.3, 1.5, .5, 1);
  pointer-events: none;
}
.fighter.parachuting { animation: drift 4.4s ease-in forwards; }
.fighter.parachuting .chute { opacity: 1; scale: 1; }
@keyframes drift {
  0% { translate: 0 0; rotate: 0deg; }
  25% { rotate: 6deg; }
  50% { rotate: -6deg; }
  75% { rotate: 5deg; }
  100% { translate: 0 80vh; rotate: 0deg; opacity: 0; }
}
.fighter.respawn { animation: blink 0.18s steps(2) 6, hover 3.2s ease-in-out 1.1s infinite alternate; }
@keyframes blink { 50% { opacity: 0.15; } }
.fighter.flap { animation: flap 0.5s ease-out; }
@keyframes flap { 35% { translate: 0 -36px; } }

/* Floating score text */
.float-text {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--display); font-size: 1.6rem; color: var(--gold);
  text-shadow: 0 2px 0 var(--navy), 2px 0 0 var(--navy), -2px 0 0 var(--navy), 0 -2px 0 var(--navy), 0 6px 14px rgba(20, 35, 75, 0.4);
  translate: -50% -50%;
  animation: float-up 1s ease-out forwards;
}
.float-text.big { font-size: 2.3rem; }
.float-text.ouch { color: var(--red); font-size: 2.1rem; color: #ff968c; }
@keyframes float-up { 0% { scale: 0.4; } 20% { scale: 1.15; } 100% { translate: -50% -180%; opacity: 0; } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: 100svh;
  padding-top: 120px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  overflow: clip;
}
.sky-deco { position: absolute; inset: 0; pointer-events: none; }
.sun {
  position: absolute; width: clamp(160px, 22vw, 300px);
  top: 70px; right: 8%;
  animation: sun 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 40px rgba(255, 220, 120, 0.6));
}
@keyframes sun { to { scale: 1.08; rotate: 10deg; } }
.cloud { position: absolute; opacity: 0.95; animation: cloud linear infinite; will-change: transform; }
.c1 { width: clamp(220px, 30vw, 420px); top: 18%; animation-duration: 95s; animation-delay: -30s; }
.c2 { width: clamp(160px, 20vw, 300px); top: 52%; animation-duration: 70s; animation-delay: -55s; opacity: 0.8; }
.c3 { width: clamp(120px, 13vw, 190px); top: 8%;  animation-duration: 60s; animation-delay: -12s; }
.c4 { width: clamp(240px, 34vw, 480px); top: 74%; animation-duration: 120s; animation-delay: -80s; }
@keyframes cloud { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }

.flock { position: absolute; top: 24%; left: 0; animation: flock 38s linear infinite; animation-delay: -8s; }
.flock, .flock::before, .flock::after {
  width: 57px; height: 64px; scale: 0.55;
  background: url(assets/bg-birds.webp) 0 0 / 228px 64px no-repeat;
}
.flock::before, .flock::after { content: ""; position: absolute; animation: wings 0.5s steps(4) infinite; }
.flock::before { left: -70px; top: 40px; animation-delay: -0.2s; }
.flock::after { left: -40px; top: -50px; animation-delay: -0.35s; }
.flock { animation: flock 38s linear -8s infinite, wings 0.5s steps(4) infinite; }
@keyframes wings { to { background-position-x: -228px; } }
@keyframes flock { from { translate: 110vw 0; } to { translate: -20vw -60px; } }

.hero-copy { position: relative; z-index: 3; max-width: 640px; }
.logo {
  font-size: clamp(4.2rem, 13vw, 9.5rem);
  line-height: 0.88;
  color: var(--white);
  text-shadow:
    0 2px 0 #cfe7fb, 0 4px 0 #1d5fa8, 0 6px 0 #1a559a, 0 8px 0 #174b89, 0 10px 0 #143f75,
    0 18px 30px rgba(20, 35, 75, 0.35);
  margin-bottom: 1.2rem;
}
.logo span { display: inline-block; }
.logo span:last-child { color: var(--gold); animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.logo em { font-style: normal; display: inline-block; color: #ff6f61; rotate: -10deg; font-size: 0.7em; vertical-align: 0.12em; }
@keyframes wobble { 0%, 70%, 100% { transform: none; } 76% { transform: scale(1.12, 0.9); } 84% { transform: scale(0.94, 1.08) rotate(-3deg); } 92% { transform: scale(1.03, 0.98); } }
.lede {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 900;
  color: var(--white);
  max-width: 30ch;
  text-shadow: 0 2px 0 rgba(20, 40, 90, 0.5);
}

.hero-stage { position: relative; z-index: 2; min-height: 460px; }
.hero-dan { position: absolute; right: 0; bottom: 0; zoom: 0.7; }
.hero-enemy { position: absolute; left: 0; top: 0; zoom: 0.5; animation: patrol 9s ease-in-out infinite alternate; }
@keyframes patrol { 0% { translate: 0 0; } 50% { translate: 60px 40px; } 100% { translate: 10px 90px; } }

.hint {
  position: absolute; z-index: 4; left: 50%; bottom: 26px; translate: -50% 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--navy-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--white);
  border-radius: 999px;
  font-weight: 800; font-size: 0.92rem;
  width: max-content; max-width: calc(100% - 32px);
}
.hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; animation: ping 1.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 90, 0.7); } 100% { box-shadow: 0 0 0 12px rgba(255, 210, 90, 0); } }

.risers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.riser {
  --len: 70px;
  left: var(--l); top: auto; bottom: -160px;
  width: 56px; height: 78px;
  pointer-events: auto;
  animation: rise var(--t) linear var(--d) infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(24px, -60vh) rotate(4deg); }
  100% { transform: translate(-10px, -125vh) rotate(-4deg); }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; gap: 40px; padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
  .hero-stage { min-height: 640px; }
  .hero-dan { zoom: 1; }
  .hero-enemy { zoom: 0.7; }
}

/* =========================================================
   HOW TO PLAY
   ========================================================= */
.steps {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--maxw);
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.step {
  position: relative;
  background: var(--card);
  border: 3px solid var(--white);
  border-radius: 32px;
  padding: 30px 28px 0;
  box-shadow: 0 10px 0 rgba(29, 95, 168, 0.25), 0 24px 50px rgba(20, 35, 75, 0.15);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s;
}
.step:nth-child(1) { rotate: -1.2deg; }
.step:nth-child(2) { rotate: 0.8deg; translate: 0 22px; }
.step:nth-child(3) { rotate: -0.6deg; }
.step:hover { transform: translateY(-6px); }
.step-num {
  font-family: var(--display); font-size: 4.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px #4aa6ec;
  position: absolute; top: 16px; right: 22px;
}
.step h3 { font-size: 2.4rem; color: #1d5fa8; margin-bottom: 0.4rem; }
.step p { font-size: 1.04rem; }
.step strong { color: var(--green-lo); }
.step-art {
  margin-top: auto; padding-top: 24px;
  height: 230px;
  display: grid; place-items: end center;
}
.step-art .fighter.mini { zoom: 0.58; animation: hover 1.6s ease-in-out infinite alternate; }
.step:nth-child(1) .fighter .sprite { animation-duration: 0.9s; }

.pop-art { position: relative; place-items: center; }
.pop-burst { width: 110px; animation: pop-loop 2.4s ease-in infinite; }
.pop-word {
  position: absolute; font-family: var(--display); font-size: 3.4rem; color: var(--gold);
  -webkit-text-stroke: 2px var(--navy); rotate: -8deg;
  animation: pop-word 2.4s ease-out infinite;
}
@keyframes pop-loop { 0% { scale: 0.85; } 60% { scale: 1.15; opacity: 1; } 64% { scale: 1.5; opacity: 0; } 92% { scale: 0.2; opacity: 0; } 100% { scale: 0.85; opacity: 1; } }
@keyframes pop-word { 0%, 60% { scale: 0; opacity: 0; } 66% { scale: 1.2; opacity: 1; } 85% { scale: 1; opacity: 1; } 92%, 100% { opacity: 0; } }

.dangers {
  max-width: var(--maxw); margin: 70px auto 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.danger {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 26px;
  border-radius: 28px;
  background: var(--navy-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.danger h3 { font-size: 1.7rem; color: var(--gold); margin-bottom: 0.2rem; }
.danger p { opacity: 0.92; }
.bird-dive {
  --fw: 118.5px; flex: none;
  width: var(--fw); height: 100px;
  background: url(assets/bird-flapping.webp) 0 0 / calc(var(--fw) * 18) 100px no-repeat;
  animation: bird-frames 1.1s steps(18) infinite, dive 2.6s ease-in-out infinite;
}
@keyframes bird-frames { to { background-position-x: calc(var(--fw) * -18); } }
@keyframes dive { 0%, 100% { translate: 0 0; rotate: 0deg; } 45% { translate: 12px 18px; rotate: 14deg; } 60% { translate: 4px 10px; rotate: 4deg; } }
.splash { position: relative; flex: none; width: 110px; height: 100px; }
.splash span {
  position: absolute; left: 50%; top: 60%; width: 30px; height: 10px;
  border: 3px solid #55d6f0; border-radius: 50%;
  translate: -50% -50%;
  animation: ripple 2.1s ease-out infinite;
}
.splash span:nth-child(2) { animation-delay: 0.7s; }
.splash span:nth-child(3) { animation-delay: 1.4s; }
@keyframes ripple { from { width: 10px; height: 4px; opacity: 1; } to { width: 110px; height: 34px; opacity: 0; } }

/* =========================================================
   PILOTS
   ========================================================= */
.pilot-row {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;
}
.pilot { display: flex; flex-direction: column; align-items: center; }
.pilot .fighter { zoom: 0.62; }
.pilot:nth-child(2) .fighter { animation-delay: -1.4s; }
.pilot:nth-child(2) .rig { animation-delay: -1s; }
.nameplate {
  margin-top: -10px; text-align: center;
  background: linear-gradient(var(--green-hi), var(--green));
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 24px;
  padding: 10px 26px 14px;
  box-shadow: 0 6px 0 var(--green-lo), 0 16px 30px rgba(20, 35, 75, 0.2);
  rotate: -2deg;
}
.pilot:nth-child(2) .nameplate { rotate: 2deg; }
.nameplate h3 { font-size: 2.4rem; text-shadow: 0 3px 0 var(--green-lo); }
.nameplate p { font-weight: 800; }
@media (min-width: 700px) { .pilot .fighter { zoom: 0.85; } }

/* =========================================================
   WARDROBE
   ========================================================= */
.wardrobe {
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .wardrobe { grid-template-columns: 1fr 1.1fr; } }
.wardrobe-copy > p:not(.kicker) {
  margin-top: 1.2rem; font-size: 1.12rem;
  background: var(--card); border: 3px solid var(--white); border-radius: 24px;
  padding: 18px 22px;
}
.rewards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.rewards li {
  display: flex; align-items: center; gap: 12px;
  background: var(--navy-glass); color: var(--white);
  border-radius: 999px; padding: 8px 18px 8px 10px; width: fit-content;
}
.rewards b { color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 1.2rem; }

.rack {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 4px;
  padding: 30px 10px 150px;
  min-height: 420px;
}
.rack .balloon {
  position: relative; left: auto; top: auto;
  width: 100%; height: auto; aspect-ratio: 107 / 148;
  max-width: 110px; justify-self: center;
  rotate: var(--r);
  animation: bob 2.4s ease-in-out var(--d) infinite alternate;
}
.rack .balloon:nth-child(even) { margin-top: 40px; }
.rack .balloon img { filter: drop-shadow(0 10px 12px rgba(20, 35, 75, 0.2)); }
@keyframes bob { to { translate: 0 -16px; } }
.rack-chute {
  position: absolute; bottom: 0; left: 50%; width: 190px; translate: -50% 0;
  animation: chute-sway 4s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
@keyframes chute-sway { from { rotate: -7deg; } to { rotate: 7deg; } }

/* =========================================================
   FINALE: down to the sea
   ========================================================= */
.finale {
  min-height: 100svh;
  padding-bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: clip;
}
.finale-copy { position: relative; z-index: 3; max-width: 760px; }
.finale-copy .stores { justify-content: center; }
.score-line {
  margin-top: 1.2rem; display: inline-block;
  background: var(--navy-glass); color: var(--white);
  padding: 10px 20px; border-radius: 999px; font-weight: 800;
}
.score-line b { color: var(--gold); }

.land {
  position: relative; width: 100vw; margin-top: auto;
  height: clamp(340px, 52vw, 1000px);
}
.land .layer {
  position: absolute; left: 0; right: 0;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
}
.land .mountains { top: 0;     height: 74%; background-image: url(assets/bg-mountains.webp); }
.land .hills     { top: 27.3%; height: 70.5%; background-image: url(assets/bg-hills.webp); }
.land .sea       { top: 37.8%; height: 62.2%; background-image: url(assets/bg-horizon.webp); }

/* Layers rise into place at different speeds as you descend */
@supports (animation-timeline: view()) {
  .land .layer { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  .land .mountains { --from: 120px; }
  .land .hills { --from: 70px; }
  .land .sea { --from: 24px; }
  @keyframes rise-in { from { translate: 0 var(--from); } to { translate: 0 0; } }
}

.footer {
  position: absolute; z-index: 4; bottom: 18px; left: 50%; translate: -50% 0;
  display: flex; gap: 22px; align-items: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--navy-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--white); font-weight: 800; font-size: 0.9rem;
  white-space: nowrap;
}
.footer a { text-decoration: none; opacity: 0.85; }
.footer a:hover { opacity: 1; color: var(--gold); }

/* ---------- Small screens ---------- */
@media (max-width: 899px) {
  .altimeter { display: none; }
  .hero { padding-top: 104px; padding-bottom: 90px; }
  .hero-copy { text-align: center; margin: 0 auto; }
  .hero-copy .lede { margin: 0 auto; }
  .hero .stores { justify-content: center; }
}
@media (max-width: 600px) {
  .brand span, .score-cell.top { display: none; }
  .score-cell small { display: none; }
  .store { min-width: 0; flex: 1 1 150px; justify-content: center; gap: 8px; padding: 9px 12px; }
  .store svg { width: 24px; height: 24px; }
  .store span { font-size: 1.1rem; }
  .step:nth-child(2) { translate: none; }
  .rack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer { gap: 14px; font-size: 0.8rem; padding: 8px 16px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .riser { display: none; }
}