/* Wander Goose page. Loads after site.css and only styles this page. */

/* Nunito, the app's own font (SIL Open Font Licence), self-hosted. */
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/nunito-400Regular.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/nunito-600SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/nunito-700Bold.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-style: normal; font-display: swap; src: url(/assets/fonts/nunito-800ExtraBold.woff2) format('woff2'); }

.wg { --font: 'Nunito', ui-rounded, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --night: #1c1f3d; --deep: #14264a; --sea: #2f6497; overflow-x: clip; }
.wg .center { text-align: center; }
.wg .center .sub { margin-inline: auto; }
.wg ul { list-style: none; margin: 0; padding: 0; }
.wg img { height: auto; }

.wg h2 { font-size: clamp(44px, 6.4vw, 84px); }
.wg .sub { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink-2); margin-top: 20px; max-width: 44ch; line-height: 1.5; }
.wg .num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #6b665c; margin-bottom: 6px; }
.wg .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.wg .pill.light { background: #fff; color: var(--ink); }
.wg .pill.ghost { background: transparent; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7) inset; color: #fff; }

.wg .phone {
  position: relative;
  width: 300px;
  aspect-ratio: 1206 / 2622;
  border-radius: 46px;
  border: 9px solid #151515;
  background: #151515;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(21, 21, 21, 0.25);
}
.wg .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wg .phone.sm { width: 260px; border-radius: 40px; border-width: 8px; }

.wg .cloud { position: absolute; fill: #fff; pointer-events: none; }
.wg [data-depth] { will-change: transform; }

/* ---------- Header over the sky and the night ---------- */

.wg.over-sky .site-header,
.wg.over-night .site-header { color: #fff; }
.wg.over-sky .site-header.solid { background: rgba(74, 50, 112, 0.72); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.wg.over-night .site-header.solid { background: rgba(28, 31, 61, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ---------- Hero: an evening meadow ---------- */

/* Every layer of the scene moves at its own speed with scroll and the mouse (wandergoose.js);
   trees and plants also sway and the birds peck on their own. */
.wg-sky {
  position: relative;
  min-height: max(100vh, 760px);
  min-height: max(100svh, 760px);
  background: linear-gradient(180deg, #4a3270 0%, #6e4580 30%, #9c5a86 55%, #d67b5e 82%, #e58a4e 100%);
  color: #fff;
  overflow: hidden;
}
.wg-sky .sun {
  position: absolute;
  width: 420px;
  height: 420px;
  left: 62%;
  top: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffc27e 0 24%, rgba(255, 179, 107, 0.55) 25% 38%, rgba(255, 158, 107, 0) 70%);
}

.wg-sky .cloud { position: absolute; left: var(--x); top: var(--y); width: var(--w); opacity: 0.9; }
.wg-sky .cloud img { width: 100%; animation: drift var(--t, 50s) ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(var(--dx, 6vw)); } }

.wg .hero-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(72px + env(safe-area-inset-top, 0px) + clamp(8px, 2.5vh, 28px));
  text-align: center;
  text-shadow: 0 2px 18px rgba(42, 27, 58, 0.35);
}
.wg .mark { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; text-shadow: none; }
.wg .mark img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 6px 18px rgba(42, 27, 58, 0.35); }
.wg .mark span { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.wg .hero-copy h1 { font-size: clamp(40px, 5vw, 72px); }
.wg .hero-copy h1 em { font-style: normal; color: #ffd48a; }
.wg .tagline { font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; color: #fdeee3; margin: 14px auto 0; max-width: 46ch; line-height: 1.4; text-wrap: balance; }
.wg .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; justify-content: center; }
.wg .meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 16px; color: #fbe3d3; font-weight: 500; }
.wg .meta svg { width: 16px; height: 16px; flex: none; }

/* The scene: one 2:1 stage, anchored to the bottom and cropped at the sides on narrow screens. */
.wg-sky .scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, 860px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.wg-sky .layer { position: absolute; left: -4%; width: 108%; max-width: none; }
.wg-sky .mountains { bottom: 34%; height: 30%; }
.wg-sky .hills { bottom: 26%; height: 22%; }
.wg-sky .ground { bottom: -3%; height: 43%; }
.wg-sky .it { position: absolute; left: var(--l); bottom: var(--b); width: var(--w); }
.wg-sky .it img { width: 100%; max-width: none; }
/* Flipped with `scale`, so it combines with the sway and peck animations' transforms. */
.wg-sky .it.flip img { scale: -1 1; }
.wg-sky .sway { transform-origin: 50% 100%; animation: sway var(--d, 4.5s) ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.wg-sky .peck { transform-origin: 50% 90%; animation: peck var(--d, 6s) ease-in-out infinite; }
@keyframes peck {
  0%, 78%, 100% { transform: rotate(0); }
  84% { transform: rotate(-9deg); }
  90% { transform: rotate(0); }
}
/* Birds perched in a tree, facing into the scene. --px and --py are the spot on the branch,
   --fx and --fy where the bird's feet are in its picture (as fractions, after the flip), so the
   feet land on the branch whatever the bird's shape. `translate` and `scale` leave `transform`
   free for the peck animation. */
.wg-sky .it > .sway { position: relative; }
.wg-sky .it .perch {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: var(--pw);
  translate: calc(var(--fx, 0.5) * -100%) calc(var(--fy, 0.96) * -100%);
  scale: -1 1;
}
/* Far things are a little hazier, so the depth reads. */
.wg-sky .far img { filter: saturate(0.8) brightness(0.92); }

/* The meadow fades into the cream page under the stats box. */
.wg-sky .lip { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 1; }

/* ---------- Sections ---------- */

.wg-sec { position: relative; padding-block: clamp(88px, 11vw, 136px); }

/* ---------- How it works: three illustrated steps ---------- */

.wg-how { padding-top: clamp(56px, 7vw, 96px); }
.wg .how-steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.wg .hstep h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 8px; }
.wg .hstep p { font-size: 16px; color: var(--ink-2); max-width: 30ch; margin-inline: auto; }
.wg .hstep .num { margin-top: 28px; }

/* Each illustration sits on a soft rounded shape in its step's colour. */
.wg .art { position: relative; width: min(100%, 300px); aspect-ratio: 1 / 0.86; margin: 0 auto; }
.wg .art img { position: absolute; max-width: none; height: auto; }
.wg .art .blob { position: absolute; inset: 4% 2% 0; border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%; overflow: hidden; }
.wg .art-walk .blob { background: #e2eedc; }
.wg .art-snap .blob { background: #e3ecfc; border-radius: 54% 46% 52% 48% / 46% 56% 44% 54%; }
.wg .art-level .blob { background: #fbefcf; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; }
.wg .art-island .blob { background: #ddf0fa; border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; }

/* Birds stand with their feet on the given spot (--fx, --fy: where the feet are in the picture,
   as fractions after the flip), using `translate` and `scale` so `transform` stays free for the
   hop and peck animations. */
.wg .art .bird { translate: calc(var(--fx) * -100%) calc(var(--fy) * -100%); scale: -1 1; }

/* 1. Head outside: the robin hops onto a patch of meadow by the path. */
.wg .art-walk .ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; }
.wg .art-walk .tuft { left: 12%; bottom: 24%; width: 26%; transform-origin: 50% 100%; animation: sway 4.2s ease-in-out infinite alternate; }
.wg .art-walk .robin { --fx: 0.667; --fy: 0.9; left: 62%; top: 76%; width: 34%; transform-origin: 50% 90%; }
.wg .hstep.in .robin { animation: hop 0.9s cubic-bezier(.3, 1.4, .5, 1) 0.2s both, peck 6s ease-in-out 1.6s infinite; }
@keyframes hop {
  0% { opacity: 0; transform: translate(-40%, -60%) rotate(-8deg); }
  60% { opacity: 1; transform: translate(0, -12%) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

/* 2. Snap it or hear it: viewfinder corners snap onto the jay, a flash, and a song rippling out. */
.wg .art-snap .jay { --fx: 0.5; --fy: 0; left: 47%; top: 12%; width: 50%; }
.wg .art-snap .finder { position: absolute; left: 14%; top: 6%; width: 66%; height: 78%; }
.wg .art-snap .finder i { position: absolute; width: 22%; height: 22%; border: 4px solid #2a64c8; }
.wg .art-snap .finder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.wg .art-snap .finder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.wg .art-snap .finder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.wg .art-snap .finder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.wg .hstep.in .finder { animation: snap 0.6s cubic-bezier(.2, 1.4, .4, 1) 0.3s both; }
@keyframes snap { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
.wg .art-snap .flash { position: absolute; inset: 4% 2% 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; }
.wg .hstep.in .flash { animation: flash 0.5s ease-out 0.85s both; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 0.85; } 100% { opacity: 0; } }
.wg .art-snap .rings { position: absolute; right: 6%; top: 30%; width: 22%; aspect-ratio: 1; }
.wg .art-snap .rings i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #5b8fe0; opacity: 0; }
.wg .hstep.in .rings i { animation: ring 2.4s ease-out 1.2s infinite; }
.wg .hstep.in .rings i:nth-child(2) { animation-delay: 2s; }
.wg .hstep.in .rings i:nth-child(3) { animation-delay: 2.8s; }
@keyframes ring { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.4); } }

/* 3. Level up: a +100 XP pill pops up, flies into the bar and fills it, then the badge shines
   and feathers come in. It replays every few seconds, like finding the next bird. */
.wg .art-level .lvl {
  position: absolute;
  left: 16%;
  top: 14%;
  width: 68%;
  padding: 14px 14px 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(138, 95, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  transform-origin: 50% 100%;
}
.wg .art-level .lvl-top { display: flex; align-items: center; gap: 8px; }
.wg .art-level .lvl-ico { position: static; width: 34px; flex: none; }
.wg .art-level .lvl-top b { display: block; font-size: 16px; letter-spacing: -0.02em; line-height: 1.1; }
.wg .art-level .lvl-top small { display: block; font-size: 12px; font-weight: 700; color: #8a5f00; }
.wg .art-level .bar { display: block; height: 10px; border-radius: 999px; background: #f3ead6; overflow: hidden; }
.wg .art-level .bar i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5a524, #ffc94a); }
.wg .art-level .lvl-row { display: flex; align-items: center; justify-content: space-between; }
/* A real badge from the app: Getting Your Wings. */
.wg .art-level .medal { position: static; width: 44px; }
/* Feathers look like they do in the app: the amber feather pill. */
.wg .art-level .feathers { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: #fbefcf; color: #8a5f00; font-size: 13px; font-weight: 700; }
.wg .art-level .feathers svg { width: 16px; height: 16px; }
.wg .art-level .xp {
  position: absolute;
  left: 50%;
  top: 86%;
  translate: -50% -50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffc94a;
  color: #4a3200;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(138, 95, 0, 0.22);
  opacity: 0;
}
.wg .hstep.in .lvl { animation: flip-up 0.8s cubic-bezier(.2, 1.2, .4, 1) 0.25s both; }
.wg .hstep.in .art-level .xp { animation: earn 6s ease-in-out 1s infinite; }
.wg .hstep.in .art-level .bar i { animation: fill 6s ease-in-out 1s infinite; }
.wg .hstep.in .art-level .medal { animation: shine 6s ease-in-out 1s infinite; }
.wg .hstep.in .art-level .feathers { animation: shine 6s ease-in-out 1.3s infinite; }
@keyframes earn {
  0% { opacity: 0; top: 86%; transform: scale(0.2); }
  8% { opacity: 1; top: 82%; transform: scale(1.18); }
  14%, 24% { opacity: 1; top: 82%; transform: scale(1); }
  38% { opacity: 1; top: 40%; transform: scale(0.55); }
  42%, 100% { opacity: 0; top: 40%; transform: scale(0.4); }
}
@keyframes fill {
  0%, 38% { width: 42%; }
  52%, 99% { width: 82%; }
  100% { width: 42%; }
}
@keyframes shine {
  0%, 52%, 66%, 100% { transform: none; }
  59% { transform: scale(1.22) rotate(-6deg); }
}
@keyframes flip-up { from { opacity: 0; transform: rotateX(70deg); } to { opacity: 1; transform: none; } }

/* 4. Fill your Flocklands: a little island with a tree and sunflowers, and a new bird hops on. */
.wg .art-island .isle { position: absolute; left: 6%; bottom: 8%; width: 88%; height: 36%; }
.wg .art-island .on-isle { translate: -50% -96%; }
.wg .art-island .tree { left: 32%; top: 78%; width: 42%; }
.wg .art-island .sunf { left: 72%; top: 79%; width: 24%; transform-origin: 50% 100%; animation: sway 4.6s ease-in-out infinite alternate; }
.wg .art-island .cardinal { --fx: 0.678; --fy: 0.915; left: 53%; top: 75%; width: 20%; transform-origin: 50% 90%; }
.wg .hstep.in .art-island .cardinal { animation: hop 0.9s cubic-bezier(.3, 1.4, .5, 1) 0.4s both, peck 6.5s ease-in-out 1.8s infinite; }

/* ---------- Dex: rarity cards fan out from behind the phone ---------- */

/* A sunny day sky behind the Dex: slow sun rays, drifting clouds, a line of hills below. */
.wg-dex { position: relative; overflow: hidden; background: linear-gradient(180deg, #bfdcf6 0%, #dcebf9 45%, #f4ecdf 100%); padding-bottom: clamp(140px, 14vw, 200px); }
.wg-dex .wrap { position: relative; z-index: 1; }
.wg-dex .dex-sky { position: absolute; inset: 0; pointer-events: none; }
.wg-dex .rays {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1500px;
  height: 1500px;
  margin: -750px 0 0 -750px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.34) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.wg-dex .cloud { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
/* The lilac sunset clouds, lifted to daytime white. */
.wg-dex .cloud img { width: 100%; filter: brightness(1.2) saturate(0.35); opacity: 0.95; animation: drift var(--t, 50s) ease-in-out infinite alternate; }
.wg-dex .dex-hills { position: absolute; left: -4%; bottom: -2px; width: 108%; max-width: none; height: clamp(150px, 16vw, 230px); filter: saturate(0.85) brightness(1.15); }

.wg .fan { --p: 1; position: relative; height: 680px; margin-top: 56px; display: flex; justify-content: center; align-items: center; }
.wg .fan .phone { z-index: 5; }
.wg .rcard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  margin: -130px 0 0 -95px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  border: 6px solid #fff;
  background: var(--bg);
  box-shadow: 0 18px 36px rgba(20, 38, 74, 0.18);
  text-align: center;
  /* --x is the card's slot: -2 and 2 go furthest out and tilt most, -1 and 1 peek out beside the phone. */
  transform:
    translateX(calc(var(--p) * var(--x) * min(240px, 17vw)))
    translateY(calc(var(--p) * var(--x) * var(--x) * 16px))
    rotate(calc(var(--p) * var(--x) * 6deg))
    scale(calc(0.86 + var(--p) * 0.14));
}
.wg .rcard img { width: 130px; height: 104px; object-fit: contain; margin: 0 auto 6px; }
/* Once fanned out, the cards float gently, each on its own beat. */
.wg .rcard { animation: card-float 5s ease-in-out infinite alternate; animation-delay: calc(var(--x) * -1.3s); }
@keyframes card-float { to { translate: 0 -10px; } }
.wg .rcard b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.wg .rcard span { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.wg .rcard.mystery img { filter: brightness(0) opacity(0.55); }

/* A blue note under the cards: the title on its own line, everything centred. */
.wg .learn { margin: 48px auto 0; padding: 28px 36px 30px; border-radius: 28px; background: var(--blue); font-size: 17px; line-height: 1.55; color: #e3ecfc; max-width: 60ch; text-align: center; box-shadow: 0 18px 36px rgba(42, 100, 200, 0.22); }
.wg .learn b { display: block; margin-bottom: 8px; color: #fff; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }

/* ---------- Flocklands: the whole island, each habitat pinned to its spot ---------- */

/* The section's sea is the island's own water colour, so the island looks like it floats in it.
   The heading has its own deeper blue band, which has faded out before the island starts. */
.wg-fl { color: #fff; padding-bottom: clamp(72px, 9vw, 120px); background: #6097bd; }
.wg-fl .fl-head { padding: clamp(88px, 11vw, 136px) 0 clamp(56px, 6vw, 88px); background: linear-gradient(180deg, #2f6497 0, #2f6497 55%, #6097bd 100%); }
.wg-fl .fl-intro { text-align: center; }
.wg-fl .sub { color: #e3ecfc; margin-inline: auto; }
.wg .extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.wg .extras li { background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 500; }

/* --ix and --iw: where the island starts and how wide it is, as a share of the map's width.
   Cards, dotted lines and pins are all placed from them. */
.wg .flmap { --ix: 33%; --iw: 34%; position: relative; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wg .fl-isle {
  position: relative;
  width: var(--iw);
  margin-left: var(--ix);
  aspect-ratio: 720 / 2880;
  /* Faded on all four edges, so no edge of the picture (or of its slightly different video)
     shows against the sea. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.wg .fl-isle img,
.wg .fl-isle video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg .fl-isle video { opacity: 0; transition: opacity 0.6s ease; }
.wg .fl-isle video.on { opacity: 1; }

.wg .spot { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--y) * 1%); height: 0; }
.wg .spot .pin {
  position: absolute;
  left: calc(var(--ix) + var(--iw) * var(--px) / 100);
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(20, 38, 74, 0.35);
}
.wg .spot .pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; animation: pin-pulse 2.4s ease-out infinite; }
@keyframes pin-pulse { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.9); } }
.wg .spot .line { position: absolute; top: -1px; border-top: 2px dashed rgba(255, 255, 255, 0.8); }
.wg .spot.L .line { left: calc(var(--ix) - 18px); width: calc(var(--iw) * var(--px) / 100 + 18px); }
.wg .spot.R .line { left: calc(var(--ix) + var(--iw) * var(--px) / 100); width: calc(var(--iw) * (100 - var(--px)) / 100 + 18px); }

/* The habitat card: a square scene with its birds, beside the name and a line about it. */
.wg .hab {
  position: absolute;
  top: 0;
  width: min(380px, calc(var(--ix) - 30px));
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  border-radius: 22px;
  box-shadow: 0 18px 36px rgba(20, 38, 74, 0.25);
  text-align: left;
  translate: 0 -50%;
}
.wg .spot.L .hab { right: calc(100% - var(--ix) + 18px); }
.wg .spot.R .hab { left: calc(var(--ix) + var(--iw) + 18px); }
/* Slides in from its side as you reach it. */
.js .wg .spot.L .hab.reveal { transform: translateX(-36px); }
.js .wg .spot.R .hab.reveal { transform: translateX(36px); }
.js .wg .spot .hab.reveal.in { transform: none; }
.wg .hab .pic { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #e3ecfc; }
.wg .hab .pic .scene,
.wg .hab .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg .hab .pic video { opacity: 0; transition: opacity 0.4s ease; }
.wg .hab .pic video.on { opacity: 1; }
/* Small birds walking around inside the scene: each is a strip of the app's walk and peck
   frames (22 in all), stepped through by wandergoose.js. --y is where its feet are, --a its
   frame's width over height; nearer birds (lower down) are drawn a touch bigger. */
.wg .hab .walker {
  position: absolute;
  left: 0;
  top: var(--y);
  height: calc(13.5% + var(--y) * 0.085);
  aspect-ratio: var(--a);
  translate: 0 -96%;
  background-repeat: no-repeat;
  background-size: 2200% 100%;
  z-index: 1;
}
.wg .hab .txt { padding: 4px 6px 4px 0; }
.wg .hab .num { margin-bottom: 2px; }
.wg .hab h3 { font-size: 22px; letter-spacing: -0.02em; }
.wg .hab p { font-size: 15px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }

/* ---------- Better together ---------- */

/* Pulled up 1px over the Flocklands so no hairline shows at their fractional edge on phones. */
.wg-together { margin-top: -1px; padding-bottom: 220px; background: linear-gradient(180deg, #6097bd 0, #c8b9bf 22%, #f4cda4 48%, #fbe9d3 80%, #fbe9d3 100%); overflow: hidden; }
.wg-together .wrap { position: relative; }
/* A low sun behind the phones. */
.wg-together .glow { position: absolute; right: 8%; top: 18%; width: 520px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 160, 0.95) 0, rgba(255, 214, 150, 0.45) 38%, rgba(255, 214, 150, 0) 70%); pointer-events: none; }
.wg .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.wg .duo { display: flex; gap: 24px; justify-content: center; }
.wg .duo figure { margin: 0; text-align: center; }
.wg .duo figure:nth-child(2) { margin-top: 64px; }
.wg .duo-dots { display: none; }
.wg .duo figcaption { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.wg .ways { display: grid; gap: 14px; margin-top: 36px; }
.wg .way { display: flex; align-items: center; gap: 18px; background: rgba(255, 255, 255, 0.78); border-radius: 24px; padding: 14px 22px 14px 14px; font-size: 16px; color: var(--ink-2); line-height: 1.4; }
.wg .way b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.wg .way-art { flex: none; width: 112px; height: 112px; border-radius: 18px; object-fit: cover; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wg .way:hover .way-art { transform: scale(1.04) rotate(-1.5deg); }
.wg .meadow { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 160px; }

/* ---------- Night ---------- */

.wg-night {
  --stars: 1;
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #e4efdc 0, #f1d3cc 5%, #d8c4e0 11%, #7a6da6 20%, #2e3263 34%, var(--night) 55%);
  overflow: hidden;
}
.wg-night .sub { color: #d7d9ee; }
.wg-night .stars {
  position: absolute;
  inset: 12% 0 0;
  opacity: var(--stars);
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 140px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 160px 60px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 230px 200px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 290px 110px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 250px, #fff 50%, transparent 51%);
  background-size: 320px 280px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { filter: brightness(0.6); } to { filter: brightness(1.2); } }

.wg-soon { padding-top: clamp(160px, 18vw, 240px); }
.wg .big-reveal { font-size: clamp(56px, 11vw, 150px); }
/* The roadmap: four stops on a dotted flight path. The goose's place on it, --f (0 to 1), comes
   from the scroll (wandergoose.js); stops it has reached get .lit. */
.wg .route { position: relative; margin-top: 72px; }
.wg .route .path { position: absolute; left: 0; top: -36px; width: 100%; height: 120px; overflow: visible; pointer-events: none; }
.wg .route .path path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.wg .route .trail { stroke: rgba(255, 255, 255, 0.28); stroke-width: 2; stroke-dasharray: 2 9; }
.wg .route .flown { stroke: #fbefcf; stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--f, 0)); filter: drop-shadow(0 0 6px rgba(251, 239, 207, 0.7)); }
.wg .route .flyer { position: absolute; left: 0; top: 0; width: 76px; height: auto; translate: -50% -60%; z-index: 2; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); will-change: transform; }
.wg .stops { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wg .stop { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.wg .stop .star { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #262c5e; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22) inset; margin-bottom: 20px; transition: background 0.5s, box-shadow 0.5s, transform 0.5s cubic-bezier(.3, 1.5, .5, 1); }
.wg .stop .star svg { width: 28px; height: 28px; fill: #c9cdee; transition: fill 0.5s; }
.wg .stop.lit .star { background: #fbefcf; box-shadow: 0 0 0 6px rgba(251, 239, 207, 0.16), 0 0 36px 6px rgba(251, 239, 207, 0.45); transform: scale(1.08); }
.wg .stop.lit .star svg { fill: #2e3263; }
.wg .stop h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.wg .stop p { font-size: 15px; color: #d7d9ee; max-width: 26ch; }

.wg-final { position: relative; text-align: center; padding-block: 40px 0; }
.wg-final .sub { margin-inline: auto; }
.wg-final .moon {
  width: 96px;
  height: 96px;
  margin: 0 auto 36px;
  border-radius: 50%;
  background: #fbefcf;
  box-shadow: 0 0 60px 10px rgba(251, 239, 207, 0.35), inset -18px -10px 0 rgba(229, 210, 160, 0.6);
}
.wg-final .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wg-final .soon-label { display: inline-block; font-size: 15px; font-weight: 700; color: #fbefcf; padding: 10px 20px; border-radius: 999px; box-shadow: 0 0 0 1.5px rgba(251, 239, 207, 0.45) inset; }

.wg-final .hello { margin-top: 28px; font-size: 14px; color: rgba(215, 217, 238, 0.7); }
.wg-final .hello a { color: #fbefcf; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(251, 239, 207, 0.4); }
.wg-final .hello a:hover { text-decoration-color: #fbefcf; }

/* The moonlit hill under the last words. */
.wg .nightfall { position: relative; height: clamp(260px, 30vw, 420px); margin-top: 24px; }
.wg .nightfall .hill { position: absolute; left: 0; bottom: 0; width: 100%; height: 62%; }
.wg .nightfall .pine { position: absolute; bottom: 30%; height: auto; }
.wg .nightfall .p1 { left: 4%; width: clamp(150px, 19vw, 280px); }
.wg .nightfall .p2 { right: 6%; width: clamp(120px, 14vw, 210px); bottom: 26%; scale: -1 1; }
.wg .nightfall .goose { position: absolute; left: 50%; bottom: 20%; width: clamp(120px, 12vw, 176px); height: auto; translate: -50% 0; filter: brightness(0.62) saturate(0.7) hue-rotate(-10deg) drop-shadow(0 0 18px rgba(251, 239, 207, 0.18)); }
.wg .nightfall .fly { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #f5f0a8; box-shadow: 0 0 10px 3px rgba(245, 240, 168, 0.6); animation: firefly 5s ease-in-out var(--d) infinite; }
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 1; }
  50% { transform: translate(18px, -14px); }
  70% { opacity: 0.9; }
  85% { opacity: 0; transform: translate(-10px, -26px); }
}

.wg .site-footer.dusk { background: transparent; color: rgba(246, 244, 239, 0.6); }
.wg .site-footer.dusk a:hover { color: #fff; }
.wg .site-footer .socials { display: flex; gap: 6px; }
.wg .site-footer .socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: background 0.2s, color 0.2s; }
.wg .site-footer .socials a:hover { background: rgba(255, 255, 255, 0.1); }
.wg .site-footer .socials svg { width: 22px; height: 22px; fill: currentColor; }
.wg .site-footer .hatched { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap; }

/* ---------- Tablet and phone ---------- */

@media (max-width: 900px) {
  /* On a phone the headline takes most of the screen, so the hero grows to fit it with the
     scene below instead of the scene sitting behind the text. */
  .wg-sky { min-height: 90vh; min-height: 90svh; }
  .wg .hero-copy { padding-top: calc(72px + env(safe-area-inset-top, 0px) + 40px); padding-bottom: 330px; }
  /* Clouds out of the way of the text: one high on the right beside the headline, one low on
     the left above the tree. */
  .wg-sky .cloud.c1 { --x: -10% !important; top: auto; bottom: 290px; --w: 30vw !important; }
  .wg-sky .cloud.c2 { --x: 78% !important; --y: 27% !important; --w: 30vw !important; }
  .wg .meta { font-size: 14px; }
  .wg-sky .sun { width: 200px; height: 200px; left: 60%; top: auto; bottom: 200px; }
  /* The scene is cropped to its middle on a phone: bring the goose and his neighbours in. */
  .wg-sky .it.goose { --l: 50% !important; --w: 19% !important; }
  .wg-sky .it.bigtree { --l: 17% !important; }
  .wg .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wg .phone { width: 250px; }
  /* A smaller note on a phone, with room to breathe under the phone, which hangs about 54px
     below the fan. */
  .wg .learn { margin-top: 112px; padding: 20px 22px 22px; border-radius: 22px; font-size: 15px; line-height: 1.5; max-width: 310px; }
  .wg .learn b { font-size: 20px; margin-bottom: 6px; }

  /* On a phone the route runs down the left, from stop to stop. */
  .wg .route { margin-top: 48px; }
  .wg .route .path, .wg .route .flyer { display: none; }
  .wg .stops { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wg .site-footer .hatched { display: block; margin: 6px 0 0; padding: 0; border: 0; }
  .wg .site-footer .socials { margin-left: -8px; }
  .wg .stops::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; border-left: 2px dotted rgba(255, 255, 255, 0.3); }
  .wg .stop { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding: 0; }
  .wg .stop .star { grid-row: span 2; width: 56px; height: 56px; margin: 0; position: relative; }
  .wg .stop p { max-width: none; }
  .wg .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-top: 48px; }

  .wg .fan { height: 600px; }
  .wg .rcard { width: 94px; margin: -67px 0 0 -47px; padding: 10px 8px; border-width: 4px; border-radius: 18px;
    transform:
      translateX(calc(var(--p) * var(--x) * 60px))
      translateY(calc(var(--p) * (var(--x) * var(--x) * 20px - 250px)))
      rotate(calc(var(--p) * var(--x) * 8deg))
      scale(calc(0.86 + var(--p) * 0.14)); }
  .wg .rcard img { width: 64px; height: 54px; }
  .wg .rcard b { font-size: 12px; line-height: 1.2; }
  .wg .rcard span { font-size: 11px; padding: 3px 8px; margin-top: 6px; }
  .wg .fan .phone { margin-top: 230px; width: 220px; }

  /* A wider island with small cards alternating either side, overlapping its edges a little;
     only the pins stay on the map. */
  .wg .flmap { --ix: 21%; --iw: 58%; }
  .wg .spot .line { display: none; }
  .wg .hab { width: 32%; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px 6px 8px; border-radius: 16px; text-align: center; }
  .wg .spot.L .hab, .wg .spot.R .hab { right: auto; left: auto; }
  .wg .spot.mL .hab { left: 0; }
  .wg .spot.mR .hab { right: 0; }
  .js .wg .spot.mL .hab.reveal { transform: translateX(-24px); }
  .js .wg .spot.mR .hab.reveal { transform: translateX(24px); }
  .js .wg .spot .hab.reveal.in { transform: none; }
  .wg .hab .pic { border-radius: 11px; }
  .wg .hab .txt { padding: 0; }
  .wg .hab .num, .wg .hab p { display: none; }
  .wg .hab h3 { font-size: 15px; }

  .wg .phone.sm { width: 46%; }
  /* Better together on a phone: the screens come straight after the subtitle, big, in a row you
     swipe through (the next one peeks in from the right), then the ways to play. */
  .wg-together .split { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .wg-together .split > div:first-child { display: contents; }
  .wg-together .duo { order: 1; }
  .wg-together .duo-dots { order: 2; }
  .wg-together .ways { order: 3; }
  .wg .duo { justify-content: flex-start; gap: 16px; margin: 32px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .wg .duo::-webkit-scrollbar { display: none; }
  .wg .duo figure { flex: none; width: min(65vw, 280px); scroll-snap-align: start; }
  .wg .duo figure .phone.sm { width: 100%; border-radius: 34px; }
  .wg .duo figure:nth-child(2) { margin-top: 0; }
  .wg .duo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .wg .duo-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(41, 37, 31, 0.22); transition: width 0.3s, background 0.3s; }
  .wg .duo-dots i.on { width: 20px; border-radius: 4px; background: var(--blue); }
  .wg .ways { margin-top: 36px; gap: 10px; }
  .wg .way { gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; font-size: 15px; }
  .wg .way b { font-size: 17px; }
  .wg .way-art { width: 80px; height: 80px; border-radius: 14px; }
  .wg-together .glow { width: 360px; right: -20%; top: 52%; }
  .wg-together { padding-bottom: 170px; }
  .wg .nightfall .p1 { left: -6%; }
  .wg .nightfall .p2 { right: -2%; }
}

@media (max-width: 560px) {
  .wg .how-steps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

/* ---------- Less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wg-sky .cloud img, .wg-sky .sway, .wg-sky .peck, .wg-night .stars { animation: none; }
  .wg .art *, .wg .hstep.in .rings i { animation: none !important; }
  .wg-dex .rays, .wg-dex .cloud img, .wg .rcard { animation: none; }
  .wg .art-level .xp { opacity: 1; top: 82%; }
  .wg .art-level .bar i { width: 82%; }
  .wg .hab { transform: none !important; }
  .wg .spot .pin::after, .wg .nightfall .fly { animation: none; }
  .wg .stop .star { transition: none; }
  .wg .way-art { transition: none; }
}

/* Keep menu items on one line on phones. */
.wg .nav a { white-space: nowrap; }

/* Nunito is rounder and wider than DM Sans: heavier headings, less tight tracking. */
.wg h1, .wg h2, .wg h3 { font-weight: 800; letter-spacing: -0.015em; }
.wg .nav { font-weight: 700; }

/* Wander Goose logo in the header. */
.wg .wg-brand { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; gap: 10px; }
.wg .wg-brand img { width: 34px; height: 34px; border-radius: 9px; transition: transform 0.4s cubic-bezier(.3,.7,.2,1); }
.wg .wg-brand:hover img { transform: rotate(-8deg) scale(1.06); }