/* ==========================================================================
   Homepage worlds. Loaded on the homepage only.

   How the motion works: home.js gives every [data-scene] a --p from 0 to 1 as
   it scrolls past, and each moving piece derives its own progress from it,
   e.g. --t: clamp(0, (p - start) / length, 1). Every formula defaults p to 1,
   so without the script, or with reduced motion, each piece sits at its
   finished state. The script also adds `fx` to <html>; only that switches on
   the tall pinned scenes and the absolute island layout, so a visitor without
   it gets an ordinary, complete page rather than empty scrolling.

   The worlds are painted scenes with their own fixed colours, so they read
   the same in light and dark mode. Everything after them uses the site tokens.
   ========================================================================== */

/* The header floats over the sky, which runs up behind it. */
header.site { position: relative; z-index: 3; }
header.site .wordmark { color: #2a1f1a; }

main.home-worlds {
  max-width: none;
  padding: 0;
  overflow-x: clip; /* clip, not hidden: hidden would break position: sticky */
}
.home-worlds > .home { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- the card that carries each world's words ---------------------------- */
.world-copy {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 12px;
  max-width: 440px;
  padding: 24px 24px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  color: #2a1f1a;
  box-shadow: 0 22px 48px -22px rgba(20, 40, 80, 0.5);
}
.world-copy .eyebrow { margin: 0; color: #e8590c; }
.world-copy h2 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.world-copy p { margin: 0; color: #4a3b31; font-size: 17px; }
.world-copy .cta { justify-self: start; margin-top: 4px; }
button.cta { border: 0; font: inherit; font-weight: 700; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 4px 12px;
  border: 1px solid #ffd8a8;
  border-radius: 999px;
  background: #fff4e6;
  color: #8a3c00;
  font-size: 14px;
  font-weight: 700;
}

/* ---- 1. The sky ----------------------------------------------------------- */
.sky {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -78px;
  padding: 118px 20px 0;
  background: linear-gradient(180deg, #7fcfff 0%, #b5e4ff 42%, #e3f5ff 78%, #f7fcff 100%);
  color: #2a1f1a;
}
.sky-inner { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; }
.sky .eyebrow { color: #0b6bb8; }
.sky h1 {
  max-width: 12ch;
  margin: 0 0 18px;
  font-size: clamp(42px, 8.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sky h1 .pop {
  display: inline-block;
  font-style: normal;
  color: #e8590c;
  transform: rotate(-3deg);
}
.sky .lede { max-width: 44ch; color: #36495a; font-size: clamp(17px, 2.2vw, 21px); }
.sky .cta.secondary {
  background: rgba(255, 255, 255, 0.75);
  color: #2a1f1a;
  border-color: rgba(42, 31, 26, 0.14);
}

/* The three worlds, one tap away. */
.portals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.portal {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #2a1f1a;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(10, 60, 110, 0.5);
  transition: transform 0.15s;
}
.portal:hover { transform: translateY(-2px); }
.portal-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
}
/* Modifiers are prefixed: .count and .lab already style whole sections. */
.portal-read .portal-icon { background: #ffe8cc; }
.portal-count .portal-icon { background: #ffdeeb; }
.portal-lab .portal-icon { background: #e5dbff; }
.portal b { font: 800 16px/1 var(--display); }
.portal small { color: #6b5a4f; font-size: 12px; font-weight: 700; }

.clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cloud {
  position: absolute;
  width: 200px;
  height: 58px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.85;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud::before { width: 96px; height: 96px; left: 26px; top: -48px; }
.cloud::after { width: 70px; height: 70px; left: 104px; top: -30px; }
.c1 { top: 22%; left: 58%; }
.c2 { top: 48%; left: 8%; transform: scale(0.7); opacity: 0.7; }
.c3 { top: 12%; left: 84%; transform: scale(0.55); opacity: 0.6; }

/* The bubble playground under the headline. Each bubble is a real button:
   tap it and the app's own voice says the sound. */
.bubbles {
  position: relative;
  z-index: 2;
  height: 290px;
  max-width: 1100px;
  margin: 18px auto 0;
}
.bubble {
  position: absolute;
  left: var(--x);
  bottom: calc(var(--d) * 22px);
  width: calc(66px * var(--s) * var(--bz, 1));
  height: calc(66px * var(--s) * var(--bz, 1));
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 32% 28%, #fff 0 10%, rgba(255, 255, 255, 0.6) 11% 20%, transparent 21%),
    radial-gradient(circle at 50% 50%, rgba(214, 240, 255, 0.55) 0 55%, rgba(106, 180, 236, 0.6) 100%);
  box-shadow: inset 0 -8px 16px rgba(40, 110, 180, 0.35), 0 8px 20px rgba(40, 110, 180, 0.25);
  color: #134a78;
  font: 800 calc(32px * var(--s) * var(--bz, 1))/1 var(--display);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bubble:focus-visible { outline: 3px solid #e8590c; outline-offset: 4px; }
.bubble.popped { opacity: 0; transform: translateX(-50%) scale(1.6); transition: opacity 0.25s, transform 0.25s; }

.spark {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #ffd43b;
  pointer-events: none;
  animation: spark 0.65s ease-out forwards;
}
.spark:nth-child(3n) { background: #ff6b6b; }
.spark:nth-child(3n + 1) { background: #4dabf7; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

.bubble-hint {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  color: #0b5a94;
  font: 800 18px var(--display);
}
.peek {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: -34px;
  width: clamp(110px, 17vw, 210px);
  transform-origin: 50% 100%;
}
.scroll-cue {
  position: relative;
  z-index: 2;
  display: block;
  padding: 14px 0 30px;
  text-align: center;
  color: #0b5a94;
  font-weight: 800;
  text-decoration: none;
}
.scroll-cue span { display: inline-block; }

/* ---- 2. Klankeilande: islands rising out of the ocean -------------------- */
.ocean { background: #7fcdf2; }
.ocean .stage {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 28px;
  padding: 48px 20px 56px;
}
.ocean-bg {
  position: absolute;
  inset: 0;
  background: url(/wereld/oseaan.webp) center 30% / cover no-repeat;
  transform: scale(calc(1.3 - 0.3 * var(--p, 1)));
  transform-origin: 50% 35%;
}
/* Two banks of cartoon cloud that part as the scene begins. */
.curtain {
  --c: clamp(0, calc(var(--p, 1) / 0.16), 1);
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.cc {
  position: absolute;
  top: -8%;
  bottom: -8%;
  width: 64%;
  /* White puffs over pale-blue ones set a little lower: the shading is what
     makes it read as cloud rather than a white wall. */
  background:
    radial-gradient(circle at 78% 14%, #fff 0 20%, transparent 21%),
    radial-gradient(circle at 70% 40%, #fff 0 26%, transparent 27%),
    radial-gradient(circle at 82% 66%, #fff 0 22%, transparent 23%),
    radial-gradient(circle at 66% 88%, #fff 0 26%, transparent 27%),
    radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 36% 72%, #fff 0 20%, transparent 21%),
    radial-gradient(circle at 80% 17%, #d6e9f8 0 21%, transparent 22%),
    radial-gradient(circle at 72% 43%, #d6e9f8 0 27%, transparent 28%),
    radial-gradient(circle at 84% 69%, #d6e9f8 0 23%, transparent 24%),
    radial-gradient(circle at 68% 91%, #d6e9f8 0 27%, transparent 28%),
    radial-gradient(circle at 32% 33%, #e4f1fb 0 19%, transparent 20%),
    radial-gradient(circle at 38% 75%, #e4f1fb 0 21%, transparent 22%),
    linear-gradient(90deg, #f4faff 0 58%, transparent 58%);
}
.cc.left { left: 0; transform: translateX(calc(-105% * var(--c))); }
.cc.right { right: 0; transform: translateX(calc(105% * var(--c))) scaleX(-1); }

.islands {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  width: 100%;
  max-width: 960px;
}
.island { position: relative; margin: 0; }
.island > img { width: 100%; max-width: 250px; margin: 0 auto; filter: drop-shadow(0 18px 18px rgba(10, 60, 110, 0.35)); }
.island figcaption {
  position: absolute;
  top: 30%;
  left: 2%;
  padding: 2px 10px;
  border: 3px solid #2a1f1a;
  border-radius: 10px;
  background: #fff;
  color: #e8590c;
  font: 800 clamp(16px, 2.2vw, 22px) var(--display);
  transform: rotate(-7deg);
  box-shadow: 0 4px 0 rgba(42, 31, 26, 0.25);
}
.word-card {
  --w: clamp(0, calc((var(--p, 1) - var(--a) - 0.13) / 0.06), 1);
  position: absolute;
  right: 0;
  top: 52%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 14px;
  background: #fff;
  color: #2a1f1a;
  font: 800 clamp(15px, 2vw, 19px) var(--display);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.4);
  transform: rotate(5deg) scale(var(--w));
}
.word-card img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }

/* ---- 3. Bou 'n woord: l, a and m fly in and snap together ---------------- */
.build { background: linear-gradient(180deg, #fff8ec 0%, #ffe9c7 100%); color: #2a1f1a; }
.build .stage {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 30px;
  padding: 64px 20px;
}
.build-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.build-word {
  --j: clamp(0, calc((var(--p, 1) - 0.55) / 0.1), 1);
  display: flex;
  gap: calc(26px - 20px * var(--j));
}
.tile {
  --t: clamp(0, calc((var(--p, 1) - 0.08) / 0.45), 1);
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 17vw, 124px);
  aspect-ratio: 1 / 1.1;
  border-radius: 22px;
  background: linear-gradient(#ffe066, #fcc419);
  box-shadow: 0 8px 0 #e39b00, 0 16px 26px -10px rgba(120, 70, 0, 0.45);
  color: #6b3b12;
  font: 800 clamp(50px, 11.5vw, 88px)/1 var(--display);
  transform:
    translate(calc(var(--fx) * (1 - var(--t))), calc(var(--fy) * (1 - var(--t))))
    rotate(calc(var(--fr) * (1 - var(--t))));
  transition: translate 0.15s, background 0.15s, color 0.15s;
}
.tile::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 27px;
  box-shadow: 0 0 0 4px #fff, 0 0 30px 8px rgba(255, 196, 30, 0.85);
  opacity: var(--j);
  pointer-events: none;
}
.t1 { --fx: -38vw; --fy: -30vh; --fr: -40deg; }
.t2 { --fx: 4vw; --fy: 36vh; --fr: 25deg; }
.t3 { --fx: 38vw; --fy: -26vh; --fr: 50deg; }
.tile.say { translate: 0 -12px; background: linear-gradient(#ff8787, #fa5252); color: #fff; }
.build-pic {
  --k: clamp(0, calc((var(--p, 1) - 0.66) / 0.1), 1);
  width: clamp(120px, 24vw, 200px);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 36px -18px rgba(120, 70, 0, 0.55);
  transform: scale(var(--k)) rotate(calc((1 - var(--k)) * -30deg));
}
.build .world-copy { max-width: 560px; }
.listen span { margin-right: 4px; }

/* ---- 4. Getalwêreld ------------------------------------------------------ */
.numbers {
  padding: 84px 20px;
  background: linear-gradient(180deg, #ffe9c7 0%, #ffd8e8 34%, #e7dcff 100%);
  color: #2a1f1a;
}
.numbers-inner {
  display: grid;
  align-items: center;
  gap: 44px;
  max-width: 1040px;
  margin: 0 auto;
}
.jungle {
  --t0: clamp(0, calc(var(--p, 1) / 0.35), 1);
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  justify-self: center;
}
.jungle-bg {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  object-fit: cover;
  box-shadow: 0 34px 60px -30px rgba(90, 40, 130, 0.55);
  transform: scale(calc(0.86 + 0.14 * var(--t0))) rotate(calc((1 - var(--t0)) * -4deg));
}
.char {
  --t: clamp(0, calc((var(--p, 1) - var(--a)) / 0.15), 1);
  position: absolute;
  width: 31%;
  filter: drop-shadow(0 10px 12px rgba(60, 20, 90, 0.3));
  transform:
    translate(calc(var(--ox) * (1 - var(--t))), calc(var(--oy) * (1 - var(--t))))
    scale(var(--t));
}
.ch1 { --a: 0.14; --ox: -60px; --oy: 40px; left: -9%; bottom: -7%; }
.ch2 { --a: 0.22; --ox: 60px; --oy: -40px; right: -7%; top: 6%; }
.ch3 { --a: 0.30; --ox: -50px; --oy: -60px; left: -6%; top: -9%; }
.ch4 { --a: 0.38; --ox: 60px; --oy: 50px; right: -9%; bottom: -5%; }

.count { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; padding: 0; list-style: none; }
.count li {
  --t: clamp(0, calc((var(--p, 1) - var(--a)) / 0.06), 1);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font: 800 18px/1 var(--display);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  transform: scale(var(--t));
  opacity: var(--t);
}
.count li:nth-child(5n + 1) { background: #f03e3e; }
.count li:nth-child(5n + 2) { background: #f59f00; }
.count li:nth-child(5n + 3) { background: #37b24d; }
.count li:nth-child(5n + 4) { background: #1c7ed6; }
.count li:nth-child(5n + 5) { background: #ae3ec9; }

/* ---- 5. Wetenskaplab: a volcano that erupts and planets that orbit -------- */
.lab {
  background: radial-gradient(ellipse at 72% 18%, #4c3b9e 0%, #1a1450 42%, #070519 100%);
  color: #fff;
}
.lab .stage {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 56px 20px 60px;
}
.space { position: absolute; inset: 0; pointer-events: none; }
.starfield {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, #ffe8a3 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 45%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent 51%);
  background-size: 260px 260px;
}
.starfield.s2 { background-size: 380px 380px; background-position: 60px 90px; opacity: 0.7; }

.orbits {
  --o: clamp(0, calc((var(--p, 1) - 0.04) / 0.22), 1);
  position: relative;
  z-index: 2;
  width: min(80vw, 420px);
  aspect-ratio: 1;
  transform: scale(calc(0.4 + 0.6 * var(--o))) rotate(calc((1 - var(--o)) * -90deg));
  opacity: calc(var(--o) * 1.4);
}
.sun {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6bf 0%, #ffd43b 40%, #f76707 100%);
  box-shadow: 0 0 40px 12px rgba(255, 170, 40, 0.55), 0 0 90px 30px rgba(255, 120, 20, 0.25);
}
.orbit {
  position: absolute;
  border: 1.5px dashed rgba(200, 210, 255, 0.28);
  border-radius: 50%;
}
/* Each orbit starts at its own angle (transform), so the planets are spread
   out even when nothing moves; the spin animates the separate `rotate`. */
.o1 { inset: 26%; transform: rotate(140deg); }
.o2 { inset: 13%; transform: rotate(250deg); }
.o3 { inset: 0; transform: rotate(20deg); }
.planet {
  position: absolute;
  top: -7%;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}
.p1 { width: 12%; aspect-ratio: 1; background: radial-gradient(circle at 35% 35%, #ffc9c9, #e03131); top: -6%; }
.p2 { width: 11%; aspect-ratio: 1; background: radial-gradient(circle at 35% 35%, #a5d8ff, #1971c2 70%, #2b8a3e); }
.p3 { width: 13%; aspect-ratio: 1; background: radial-gradient(circle at 35% 35%, #fff3bf, #f59f00); top: -6.5%; }
.ring {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 42%;
  height: 16%;
  border: 3px solid rgba(255, 236, 179, 0.85);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.volcano {
  --v: clamp(0, calc((var(--p, 1) - 0.1) / 0.2), 1);
  position: relative;
  z-index: 2;
  width: min(86vw, 440px);
  transform: translateY(calc((1 - var(--v)) * 45vh));
}
.volcano svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
.crater { position: absolute; left: 50%; top: 22%; width: 2px; height: 2px; }
.volcano.erupt { animation: rumble 0.7s linear; }
@keyframes rumble {
  0%, 100% { translate: 0 0; }
  20% { translate: -4px 2px; }
  40% { translate: 5px -2px; }
  60% { translate: -3px 1px; }
  80% { translate: 3px -1px; }
}

.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fl {
  --f: clamp(0, calc((var(--p, 1) - var(--fa)) / 0.12), 1);
  position: absolute;
  font-size: clamp(24px, 4vw, 40px);
  opacity: calc(var(--f) * 0.9);
  transform: scale(var(--f)) rotate(calc((1 - var(--f)) * 120deg));
}
.f1 { --fa: 0.2; left: 6%; top: 14%; }
.f2 { --fa: 0.26; left: 38%; top: 6%; }
.f3 { --fa: 0.32; right: 6%; bottom: 18%; }
.f4 { --fa: 0.38; left: 12%; bottom: 40%; }
.f5 { --fa: 0.44; right: 34%; top: 40%; }
.f6 { --fa: 0.5; left: 46%; bottom: 8%; }

.lab .world-copy {
  background: rgba(20, 16, 60, 0.82);
  border: 1px solid rgba(180, 170, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.lab .world-copy .eyebrow { color: #b197fc; }
.lab .world-copy p { color: #dcd6ff; }
.lab .chips li { background: rgba(151, 117, 250, 0.2); border-color: rgba(177, 151, 252, 0.4); color: #e5dbff; }

/* The particle layer every world bursts onto. */
#fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* ---- 6. Die trofeekamer -------------------------------------------------- */
.trophies {
  overflow: hidden;
  padding: 90px 20px;
  background: radial-gradient(circle at 28% 30%, #7950f2 0%, #3f1f96 72%);
  color: #fff;
}
.trophy-inner {
  display: grid;
  align-items: center;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
}
.shelf {
  position: relative;
  width: min(100%, 460px);
  height: 320px;
  justify-self: center;
  background: radial-gradient(ellipse at 50% 88%, rgba(255, 212, 59, 0.4), transparent 62%);
}
.prize { position: absolute; bottom: 26px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35)); }
.prize.trophy { left: 50%; width: 40%; transform: translateX(-50%); }
.prize.crown { left: 0; bottom: 60px; width: 34%; transform: rotate(-10deg); }
.prize.zebra { right: 0; width: 32%; }
.star {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: #ffd43b;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}
.trophies .world-copy {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  color: #fff;
}
.trophies .world-copy .eyebrow { color: #ffd43b; }
.trophies .world-copy p { color: #e5dbff; }

/* ---- For parents --------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.facts h3 { margin: 0 0 6px; font-size: 19px; }
.facts p { margin: 0; color: var(--muted); }

/* ---- Wider screens ------------------------------------------------------- */
@media (min-width: 760px) {
  .islands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numbers-inner, .trophy-inner { grid-template-columns: 1fr 1fr; }
  .bubbles { height: 320px; }
}
/* On a wide screen the headline takes the left half and the bubbles get the
   right half of the sky to themselves, with the lion watching from below. */
@media (min-width: 960px) {
  .sky-inner { min-height: 500px; }
  .bubbles {
    position: absolute;
    top: 96px;
    bottom: 64px;
    right: max(20px, calc((100% - 1040px) / 2));
    width: 48%;
    max-width: 560px;
    height: auto;
    margin: 0;
    --bz: 1.3;
    --rise: 380px;
  }
  .bubble-hint {
    position: absolute;
    right: max(20px, calc((100% - 1040px) / 2));
    bottom: 70px;
    width: 48%;
    max-width: 560px;
  }
  .scroll-cue { padding-top: 0; }
}

/* ==========================================================================
   Scroll scenes. Only with home.js running and motion allowed.
   ========================================================================== */
.fx .scene[data-sticky] > .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.fx .ocean { height: 290vh; }
.fx .build { height: 230vh; }

.fx .ocean .stage { display: block; padding: 0; }
.fx .ocean .islands { position: absolute; inset: 0; display: block; max-width: none; }
.fx .island {
  --t: clamp(0, calc((var(--p, 1) - var(--a)) / 0.16), 1);
  position: absolute;
  left: var(--ix);
  top: var(--iy);
  width: clamp(150px, 19vw, 250px);
  opacity: calc(var(--t) * 1.6);
  transform: translateY(calc((1 - var(--t)) * 75vh)) scale(calc(0.55 + 0.45 * var(--t)));
}
.fx .i1 { --ix: 44%; --iy: 9%; }
.fx .i2 { --ix: 70%; --iy: 5%; }
.fx .i3 { --ix: 50%; --iy: 50%; }
.fx .i4 { --ix: 75%; --iy: 47%; }
.fx .ocean .world-copy {
  --q: clamp(0, calc((var(--p, 1) - 0.08) / 0.12), 1);
  position: absolute;
  left: max(20px, 5vw);
  top: 50%;
  opacity: var(--q);
  transform: translateY(calc(-50% + (1 - var(--q)) * 40px));
}

@media (max-width: 759px) {
  .fx .island { width: 42vw; }
  .fx .i1 { --ix: 3%; --iy: 3%; }
  .fx .i2 { --ix: 53%; --iy: 1%; }
  .fx .i3 { --ix: 5%; --iy: 26%; }
  .fx .i4 { --ix: 55%; --iy: 24%; }
  .fx .ocean .world-copy {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 18px;
    max-width: none;
    padding: 18px 18px 20px;
    transform: translateY(calc((1 - var(--q)) * 40px));
  }
  .fx .ocean .world-copy p { font-size: 15.5px; }
}
@media (max-width: 759px) and (max-height: 720px) {
  .fx .island { width: 36vw; }
  .fx .ocean .chips { display: none; }
}

.fx .lab { height: 260vh; }
.fx .lab .stage { display: block; padding: 0; }
.fx .lab .orbits { position: absolute; right: 5%; top: 8%; width: min(40vw, 460px); }
.fx .lab .volcano { position: absolute; left: 38%; bottom: 3%; width: min(34vw, 480px); }
.fx .lab .world-copy {
  --q: clamp(0, calc((var(--p, 1) - 0.08) / 0.12), 1);
  position: absolute;
  left: max(20px, 5vw);
  top: 50%;
  opacity: var(--q);
  transform: translateY(calc(-50% + (1 - var(--q)) * 40px));
}
@media (max-width: 759px) {
  .fx .lab .orbits { right: 4%; top: 3%; width: 52vw; }
  .fx .lab .volcano { left: 2%; bottom: auto; top: 16%; width: 56vw; }
  .fx .lab .world-copy {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 18px;
    max-width: none;
    padding: 18px 18px 20px;
    transform: translateY(calc((1 - var(--q)) * 40px));
  }
  .fx .lab .world-copy p { font-size: 15.5px; }
}
@media (max-width: 759px) and (max-height: 720px) {
  .fx .lab .chips { display: none; }
}

/* The trophy drop and star burst run once, when the room scrolls into view. */
.fx .trophies:not(.in) .prize { opacity: 0; }
.fx .trophies.in .prize { animation: drop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.fx .trophies.in .prize.crown { animation-delay: 0.15s; }
.fx .trophies.in .prize.zebra { animation-delay: 0.3s; }
.fx .trophies.in .star {
  animation: starburst 1.5s ease-out calc(0.4s + var(--i) * 0.03s) both;
}
@keyframes drop {
  from { translate: 0 -150px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes starburst {
  0% { transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(0.2); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(calc(var(--i) * 25.7deg)) translateY(-175px) scale(1); opacity: 0; }
}

/* ==========================================================================
   Ambient life: floating bubbles, drifting clouds, bobbing islands. None of
   it hides anything, so it only needs the motion preference, not the script.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .bubble {
    bottom: 0;
    animation: rise 12s linear calc(-1 * var(--d)) infinite;
  }
  .bubble.popped { animation: none; }
  @keyframes rise {
    0% { transform: translate(-50%, 30px) scale(0.6); opacity: 0; }
    8% { opacity: 1; }
    25% { transform: translate(calc(-50% + 12px), calc(var(--rise, 250px) * -0.2)) scale(1); }
    50% { transform: translate(calc(-50% - 10px), calc(var(--rise, 250px) * -0.5)) scale(1); }
    75% { transform: translate(calc(-50% + 12px), calc(var(--rise, 250px) * -0.78)) scale(1); }
    92% { opacity: 1; }
    100% { transform: translate(-50%, calc(var(--rise, 250px) * -1)) scale(1.05); opacity: 0; }
  }
  .c1 { animation: drift 70s linear -20s infinite; }
  .c2 { animation: drift 95s linear -60s infinite; }
  .c3 { animation: drift 120s linear -10s infinite; }
  @keyframes drift { from { translate: -60vw 0; } to { translate: 60vw 0; } }
  .peek { animation: peek 3.2s ease-in-out infinite; }
  @keyframes peek { 0%, 100% { rotate: -4deg; } 50% { rotate: 6deg; } }
  .scroll-cue span { animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 50% { translate: 0 6px; } }
  .bubble-hint { animation: nudge 2.4s ease-in-out infinite; }
  .island > img { animation: bob 5s ease-in-out calc(var(--a) * -12s) infinite; }
  @keyframes bob { 50% { translate: 0 -10px; } }
  .char { animation: bob 4s ease-in-out calc(var(--a) * -9s) infinite; }

  .orbit { animation: spin 22s linear infinite; }
  .o1 { animation-duration: 9s; }
  .o2 { animation-duration: 15s; }
  @keyframes spin { to { rotate: 360deg; } }
  .starfield { animation: twinkle 4s ease-in-out infinite alternate; }
  .starfield.s2 { animation-duration: 6s; }
  @keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
  .fl { animation: bob 5s ease-in-out calc(var(--fa) * -14s) infinite; }
  .lava-flow { animation: glow 2.4s ease-in-out infinite alternate; }
  @keyframes glow { from { opacity: 0.8; } to { opacity: 1; } }
  .portal-icon { animation: nudge 3s ease-in-out infinite; }
  .portal-count .portal-icon { animation-delay: -1s; }
  .portal-lab .portal-icon { animation-delay: -2s; }
}