/* Duckling Sort — the public site. Colours come from the game: pond water, raft planks,
   the yellow duckling, lily pads and the orange Play button. */
:root {
  --pond: #6fd3cb;
  --pond-deep: #0f5c63;
  --ink: #17393d;
  --ink-soft: #3f6064;
  --foam: #effaf8;
  --paper: #ffffff;
  --plank: #b8743a;
  --plank-dark: #6e4220;
  --duck: #ffc93c;
  --play: #ff7a1a;
  --lily: #4fa847;
  --line: #cfe9e5;
  --display: "Mitr", "Anuphan", ui-rounded, system-ui, sans-serif;
  --body: "Anuphan", "Mitr", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 72rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
:lang(th) body, body:lang(th) { line-height: 1.8; }
img { max-width: 100%; }
.pixel { image-rendering: pixelated; }
a { color: var(--pond-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--play); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: .5rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 500; }
:lang(th) h1, :lang(th) h2 { letter-spacing: 0; line-height: 1.35; }
p { margin: 0 0 1rem; max-width: 38rem; }
.lead { font-size: 1.2rem; color: var(--ink-soft); }

/* Top bar */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font: 600 1.1rem var(--display); }
.brand img { width: 2.4rem; height: 2.4rem; border-radius: .65rem; box-shadow: 0 2px 0 rgba(15,92,99,.25); }
/* The game's own title banner (the Home screen's wordmark) beside its app icon */
.brand .brand-word { width: auto; height: 2.7rem; border-radius: 0; box-shadow: none; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(15,92,99,.2)); }
/* On the landing pages the hero already shows the wordmark, so the bar keeps only the icon until it sticks */
.top.has-hero:not(.stuck) .brand-word { display: none; }
.top nav { display: flex; gap: .35rem; align-items: center; }
.top nav a { font: 500 1rem var(--display); text-decoration: none; color: var(--ink); padding: .4rem .8rem; border-radius: 99px; }
.top nav a:hover { background: rgba(255,255,255,.6); }
.top nav .lang { background: var(--paper); box-shadow: 0 3px 0 rgba(15,92,99,.18); padding: .45rem 1rem; }
@media (max-width: 40rem) { .top nav .hide-s { display: none; } }

/* Hero: the game's own lake, sky and ducks */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(56rem, 100vh);
  padding: 6.5rem 0 11.5rem;
  background: linear-gradient(#3ea9f3, #7fd2fb 55%, #51c5fa);
}
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene-art {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 92%;
  object-fit: cover; object-position: 50% 100%; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%);
}
.cloud { position: absolute; image-rendering: pixelated; opacity: .95; }
.cloud.c1 { width: 44rem; top: 3.5rem; left: -8rem; }
.cloud.c2 { width: 36rem; top: 1.5rem; right: -6rem; opacity: .8; }
.scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,251,255,.72) 0%, rgba(240,251,255,.5) 36%, rgba(240,251,255,0) 56%); }
.hero .wrap.grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .wordmark { width: min(21rem, 78%); height: auto; display: block; margin: 0 auto 1.4rem; image-rendering: pixelated; }
.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.5rem); line-height: 1.12; margin-bottom: .35rem; text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.nw { white-space: nowrap; }
.subhead { margin: 0 0 1.1rem; font: 500 clamp(1.3rem, 2.1vw, 1.65rem)/1.3 var(--display); color: var(--pond-deep); text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.hero .lead { max-width: 33rem; margin: 0; padding: .95rem 1.2rem; font-size: 1.1rem; font-weight: 500; line-height: 1.6; color: var(--ink);
  background: rgba(255,255,255,.84); border-radius: 1.1rem; box-shadow: 0 4px 0 rgba(15,92,99,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.facts { list-style: none; margin: 1rem 0 0; padding: .7rem .6rem; display: inline-flex; flex-wrap: nowrap; gap: .4rem 0;
  background: rgba(255,255,255,.82); border-radius: 1.1rem; box-shadow: 0 4px 0 rgba(15,92,99,.12); }
.facts li { display: flex; align-items: center; gap: .55rem; padding: .2rem .9rem; font: 500 .95rem/1.2 var(--display); color: var(--ink); }
.facts li + li { border-left: 2px solid var(--line); }
.facts img { width: 2.1rem; height: 2.1rem; object-fit: contain; image-rendering: pixelated; }
.facts b { display: block; font-weight: 600; }
.get { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.get .badge img { height: 3.4rem; width: auto; display: block; }
.hero .get .badge img { height: 4.25rem; }
/* "Coming soon" stands where the App Store badge goes until the app is live; it is not a link */
.soon { display: inline-flex; align-items: center; gap: .7rem; min-height: 4.25rem; padding: .45rem 1.5rem .45rem 1rem; border-radius: 1rem;
  background: #0d181b; color: #fff; border: 2px solid #5d7479; box-shadow: 0 4px 0 rgba(9,56,80,.28); text-align: left; cursor: default; }
.soon img { width: 2.5rem; height: 2.5rem; object-fit: contain; image-rendering: pixelated; }
.soon span { display: flex; flex-direction: column; line-height: 1.15; }
.soon em { font: 500 .8rem var(--body); font-style: normal; letter-spacing: .02em; color: #cfe5e2; }
.soon b { font: 600 1.55rem/1.15 var(--display); color: var(--duck); }
.cta .soon { min-height: 3.8rem; }
.get small { font-size: .95rem; color: var(--ink); max-width: 14rem; line-height: 1.45; }
.hero .get small { text-align: left; font-weight: 500; background: rgba(255,255,255,.84); padding: .45rem .8rem; border-radius: .8rem; box-shadow: 0 3px 0 rgba(15,92,99,.1); }

/* The playable pond, framed like a wooden board tilted toward the text */
.board-stage { perspective: 1600px; display: flex; justify-content: center; }
/* The phone the little pond is played in */
.device {
  position: relative; width: min(100%, 23.5rem); padding: 3.4rem .95rem 1.4rem;
  border: 13px solid #1c2b30; border-radius: 3.3rem;
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 9rem), #58c6e0 url(/img/site/pond-water.png) 0 0 / 128px 128px repeat;
  box-shadow: inset 0 0 0 3px #3d5359, 0 0 0 3px #0d181b, 0 0 0 6px rgba(255,255,255,.45), 0 2.2rem 3.2rem rgba(9, 56, 80, .42);
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(3.5deg);
}
.device::after { content: ""; position: absolute; left: 50%; bottom: .45rem; width: 7rem; height: .3rem; margin-left: -3.5rem; border-radius: 99px; background: rgba(13,24,27,.55); }
.island { position: absolute; top: .75rem; left: 50%; width: 6.6rem; height: 1.8rem; margin-left: -3.3rem; border-radius: 99px; background: #0d181b; }
.pad-in { position: absolute; width: 4.2rem; image-rendering: pixelated; pointer-events: none; opacity: .95; }
.pad-in.pa { left: .4rem; bottom: 4.6rem; } .pad-in.pb { right: .5rem; top: 42%; width: 3.6rem; }
.pond { position: relative; width: 100%; }
.hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; margin-bottom: 1.5rem; }
.pill { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.94); border-radius: 99px; padding: .28rem .7rem .28rem .4rem;
  font: 600 .88rem var(--display); color: var(--ink); white-space: nowrap; box-shadow: 0 3px 0 rgba(15,92,99,.22); }
.pill img { width: 1.25rem; height: 1.25rem; image-rendering: pixelated; }
.stage-pill { justify-self: center; font: 600 1rem/1.2 var(--display); color: #fff3cf; padding: .38rem .95rem; border-radius: .8rem; white-space: nowrap;
  background: linear-gradient(#be8448, #9b5f2d); border: 3px solid #5a3418; text-shadow: 0 2px 0 #4a2710; box-shadow: 0 3px 0 rgba(60,28,8,.3); }
.round { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.94); box-shadow: 0 3px 0 rgba(15,92,99,.22); }
.round img { width: 1.35rem; height: 1.35rem; image-rendering: pixelated; }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(15,92,99,.22); }
.rafts { display: grid; grid-template-columns: 1fr; gap: .15rem; }
.raft {
  position: relative; appearance: none; border: 0; cursor: pointer; font: inherit;
  width: min(100%, 20rem); height: 4.1rem; padding: 0 .6rem .45rem; border-radius: 1rem;
  background: transparent; display: flex; align-items: flex-end;
  transition: background-color .15s;
}
.raft::before {
  content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .5rem; height: 2.1rem;
  background:
    url(/img/site/raft-left.png) left bottom / auto 100% no-repeat,
    url(/img/site/raft-right.png) right bottom / auto 100% no-repeat,
    url(/img/site/raft-mid.png) left bottom / auto 100% repeat-x;
  background-clip: content-box; image-rendering: pixelated;
}
.raft:hover { background: rgba(255,255,255,.22); }
.raft[aria-pressed="true"] { background: rgba(255,214,90,.45); }
.raft .ducks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; align-items: end; margin-bottom: 1rem; }
.raft .ducks img { height: 2.9rem; width: auto; justify-self: center; image-rendering: pixelated; }
.raft[aria-pressed="true"] .ducks img.lift { transform: translateY(-.5rem); transition: transform .12s; }
.raft .ducks img.land { animation: land .28s ease-out; }
@keyframes land { 0% { transform: translateY(-1rem); } 70% { transform: translateY(.12rem); } 100% { transform: none; } }
.hand { position: absolute; z-index: 3; width: 3.2rem; right: 5%; top: -1.6rem; image-rendering: pixelated; pointer-events: none; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(.45rem); } }
.flyer { position: absolute; width: 64px; height: 64px; background-size: 384px 256px; image-rendering: pixelated; pointer-events: none; z-index: 2;
  animation: flap .5s steps(6) infinite, away 1.1s ease-in forwards; }
@keyframes flap { to { background-position-x: -384px; } }
@keyframes away { to { transform: translate(3rem, -9rem); opacity: 0; } }
.pond-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .5rem; min-height: 2.5rem;
  background: rgba(255,251,240,.92); border-radius: .9rem; padding: .45rem .8rem; }
.pond-foot p { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.pond-foot button { appearance: none; border: 0; cursor: pointer; font: 500 .95rem var(--display); color: var(--paper); background: var(--play); border-radius: 99px; padding: .45rem 1rem; white-space: nowrap; box-shadow: 0 3px 0 #c5520a; }
.pond-foot button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c5520a; }

/* Foreground: the dock and the two hero ducks */
.shoreline { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.shoreline img { position: absolute; image-rendering: pixelated; height: auto; }
.scene .canopy, .scene .butterfly { position: absolute; image-rendering: pixelated; height: auto; }
.scene .canopy { width: 15rem; left: -5rem; bottom: 2.5rem; }
.pier-img { width: 33rem; left: 37%; bottom: -2rem; filter: drop-shadow(0 8px 0 rgba(9,56,80,.2)); }
.bloomfront { z-index: 2; }
.bl1 { width: 7.5rem; left: -1rem; bottom: -1rem; } .bl2 { width: 6rem; left: 5.5rem; bottom: -1.4rem; } .bl3 { width: 8rem; right: 16%; bottom: -2.2rem; }
.butterfly { width: 2.6rem; }
.b1 { left: 44%; top: 8rem; animation: flutter 11s ease-in-out infinite; }
.b2 { right: 6%; top: 11rem; width: 2.1rem; animation: flutter 13s ease-in-out -4s infinite reverse; }
@keyframes flutter { 0% { transform: translate(0,0) scaleX(1); } 25% { transform: translate(6rem,-2rem) scaleX(1); } 50% { transform: translate(10rem,1.5rem) scaleX(-1); } 75% { transform: translate(3rem,3rem) scaleX(-1); } 100% { transform: translate(0,0) scaleX(1); } }
.hero-duck { position: absolute; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(9,56,80,.18)); }
.hero-duck.sailor { width: 200px; left: 45%; bottom: 5.9rem; z-index: 1; }
.post { position: absolute; right: 5%; bottom: 0; width: 150px; height: 8.5rem;
  background: repeating-linear-gradient(90deg, #a4683a 0 22px, #8e5830 22px 26px);
  border: 5px solid #5a3418; border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: inset 0 16px 0 #c38b55, inset 0 21px 0 #7a4a24; }
.hero-duck.pink { width: 200px; right: calc(5% - 25px); bottom: calc(8.5rem - 8px); }

/* Motion: one entrance, a little life, depth on scroll (motion.js sets --sy) */
.hero-copy > *, .board-stage { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .22s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
.hero-copy > :nth-child(5) { animation-delay: .38s; }
.hero-copy > :nth-child(6) { animation-delay: .46s; }
.board-stage { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero-duck.sailor { transform-origin: 50% 100%; animation: bob 2.8s ease-in-out infinite; }
.hero-duck.pink { transform-origin: 50% 100%; animation: bob 3.2s ease-in-out .7s infinite; }
@keyframes bob { 50% { transform: translateY(-7px) scaleY(1.02); } }
@keyframes sway { 50% { transform: translateY(3px) rotate(-4deg); } }
.cloud.c1 { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation: drift 46s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(3.5rem); } }
.cloud { translate: 0 calc(var(--sy, 0) * .3px); }
.scene-art { translate: 0 calc(var(--sy, 0) * .12px); }
.board-stage { translate: 0 calc(var(--sy, 0) * -.06px); }
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .raft .ducks img.land, .flyer, .hand, .hero-copy > *, .board-stage, .hero-duck, .butterfly, .cloud { animation: none !important; }
  .cloud, .scene-art, .board-stage { translate: none !important; }
  .js .reveal { opacity: 1; translate: none; }
  .flyer { display: none; }
}
@media (max-width: 64rem) {
  .hero-duck.sailor { width: 170px; left: 46%; }
  .hero-duck.pink, .post { display: none; }
  .pier-img { width: 26rem; left: 40%; }
  .hero-duck.sailor { bottom: 5rem; }
}
@media (max-width: 56rem) {
  .hero { padding: 5.5rem 0 10.5rem; min-height: 0; }
  .hero .wrap.grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .scrim { background: linear-gradient(rgba(240,251,255,.88) 0%, rgba(240,251,255,.7) 45%, rgba(240,251,255,.15) 75%); }
  .scene-art { height: 45%; }
  .device { transform: none; }
  .scene .canopy { display: none; }
  .pier-img { width: 19rem; left: -1rem; bottom: -1.6rem; }
  .bl1, .bl2 { display: none; }
  .bl3 { width: 5.5rem; right: 30%; bottom: -1.6rem; }
  .hero-duck.sailor { left: 10%; bottom: 3.6rem; width: 120px; }
  .post { display: block; right: 6%; width: 86px; height: 4.6rem; border-width: 4px; box-shadow: inset 0 10px 0 #c38b55, inset 0 13px 0 #7a4a24; }
  .hero-duck.pink { display: block; right: calc(6% - 12px); bottom: calc(4.6rem - 6px); width: 110px; }
  .hero .wordmark { width: min(17rem, 80%); }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 0; width: 100%; max-width: 22rem; }
  .facts li { flex-direction: column; gap: .3rem; text-align: center; }
  .facts li + li { border-left: 0; }
  .get { flex-direction: column; gap: .8rem; }
  .hero .get small { text-align: center; max-width: none; }
}
@media (max-width: 26rem) { .raft .ducks img { height: 2.4rem; } .raft { height: 4.1rem; } .facts li { padding: .2rem .5rem; } .device { padding: 3.2rem .6rem 1.2rem; border-width: 10px; } .stage-pill { font-size: .88rem; padding: .3rem .6rem; } }

/* Sections: one continuous lake world, bright and soft */
.sec { position: relative; overflow: hidden; isolation: isolate; padding: 5.5rem 0 6.5rem; }
.sec > .wrap { position: relative; z-index: 2; }
.deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco img { position: absolute; image-rendering: pixelated; z-index: 1; }
.deco .water { z-index: 0; }
.deco .bg-scene { z-index: 0; } .deco .wash { z-index: 0; }
.deco .bg-scene { inset: auto 0 0 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* The photo's top edge is soft grey cloud; fade it in so a section never starts on a smudge */
.deco .bg-scene { -webkit-mask-image: linear-gradient(transparent, #000 5rem); mask-image: linear-gradient(transparent, #000 5rem); }
.deco .wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,251,255,.86), rgba(240,251,255,.55) 45%, rgba(240,251,255,.25)); }
.deco .water { position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; background: #58c6e0 url(/img/site/pond-water.png) 0 0 / 128px 128px repeat; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(transparent, #000 2.5rem); mask-image: linear-gradient(transparent, #000 2.5rem); }
.deco .tree { height: auto; }
.deco .t-left { width: 13rem; left: -2rem; bottom: 5rem; }
.deco .t-right { width: 12rem; right: -2rem; bottom: 5.5rem; }
.deco .pad { width: 5.5rem; }
.pd1 { left: 22%; bottom: 1.5rem; } .pd2 { left: 58%; bottom: 3rem; } .pd3 { right: 16%; bottom: 1rem; }
.deco .fall { width: 2.2rem; opacity: .9; animation: fall 14s linear infinite; }
.fall.f1 { left: 12%; top: -3rem; } .fall.f2 { left: 55%; top: -3rem; animation-delay: -5s; animation-duration: 17s; } .fall.f3 { left: 82%; top: -3rem; animation-delay: -9s; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(3rem, 45vh) rotate(160deg); } 92% { opacity: .9; } 100% { transform: translate(-1rem, 95vh) rotate(320deg); opacity: 0; } }

.sec-head { text-align: center; margin: 0 auto 2.75rem; max-width: 46rem; }
.sec-head .kicker { font: 600 clamp(1.35rem, 2.4vw, 1.8rem)/1.3 var(--display); color: var(--ink); margin: 1.4rem auto .3rem; max-width: none; }
.sec-head .sub { font-size: 1.1rem; font-weight: 500; color: var(--ink-soft); margin: .9rem auto 0; max-width: 40rem; }
.sec-head.light h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.sec-head.light .sub { color: #d7f3ee; }

/* The wooden sign every section heading hangs on */
.sign { position: relative; display: inline-block; padding: .55rem 2.4rem .75rem; border: 5px solid #5a3418; border-radius: 1.1rem;
  background: repeating-linear-gradient(0deg, transparent 0 1.35rem, rgba(70,36,12,.25) 1.35rem calc(1.35rem + 3px)), linear-gradient(#be8448, #9b5f2d);
  box-shadow: inset 0 4px 0 rgba(255,222,165,.4), inset 0 -5px 0 rgba(60,28,8,.3), 0 7px 0 rgba(60,28,8,.28); }
.sign h2 { margin: 0; font: 600 clamp(2rem, 4.6vw, 3.3rem)/1.15 var(--display); color: #fff3cf; letter-spacing: .01em;
  text-shadow: 0 3px 0 #4a2710, 3px 0 0 #4a2710, -3px 0 0 #4a2710, 0 -3px 0 #4a2710, 2px 2px 0 #4a2710, -2px 2px 0 #4a2710, 2px -2px 0 #4a2710, -2px -2px 0 #4a2710, 0 7px 0 rgba(40,20,5,.3); }
:lang(th) .sign h2 { line-height: 1.35; }
.sign .perch { position: absolute; top: -2.6rem; height: 3.2rem; width: auto; image-rendering: pixelated; }
.sign .perch.l { left: 1.4rem; } .sign .perch.r { right: 1.4rem; }
.sign .bloom { position: absolute; width: 2.8rem; image-rendering: pixelated; }
.sign .bloom.l { left: -1.3rem; top: -1.2rem; } .sign .bloom.r { right: -1.3rem; bottom: -1.2rem; }

/* Just play: the no-ads perks */
.calm { padding-bottom: 4rem; }
.two { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 2.25rem; align-items: start; }
.big { font-size: clamp(2.3rem, 3.9vw, 3.35rem); line-height: 1.08; letter-spacing: -.02em; margin: 1rem 0 1rem; }
:lang(th) .big { line-height: 1.3; letter-spacing: 0; }
.intro .lead { color: var(--ink); font-weight: 500; }
.pier { position: relative; height: 17rem; margin-top: 1rem; }
.pier .boards, .boards { position: absolute; background: url(/img/site/deck.png) 0 0 / 96px 96px repeat; image-rendering: pixelated; border: 5px solid #6e4220; border-radius: 10px; box-shadow: inset 0 -10px 0 rgba(90,50,20,.3), 0 8px 0 rgba(9,56,80,.18); }
.pier .boards { left: 0; right: 8%; bottom: 3.2rem; height: 4.2rem; transform: skewX(-12deg); }
.piling { position: absolute; width: 2.6rem; background: repeating-linear-gradient(90deg, #a4683a 0 .6rem, #8e5830 .6rem .75rem); border: 4px solid #5a3418; border-radius: 8px 8px 0 0; box-shadow: inset 0 8px 0 #c38b55; }
.pier .p1 { left: 12%; bottom: 0; height: 5.5rem; } .pier .p2 { right: 12%; bottom: 0; height: 5.5rem; }
.pier img { position: absolute; height: auto; image-rendering: pixelated; }
.pier .sitter { filter: drop-shadow(0 5px 0 rgba(9,56,80,.18)); }
.pier .pier-img { width: min(100%, 27rem); left: 0; bottom: 0; filter: drop-shadow(0 8px 0 rgba(9,56,80,.18)); }
.pier .yellow { width: 8.6rem; left: 14%; bottom: 6.6rem; animation: bob 3s ease-in-out infinite; }
.pier .pink { width: 7.2rem; left: 54%; bottom: 6.8rem; animation: bob 3.4s ease-in-out .6s infinite; }
.pier .lantern { width: 2.8rem; left: 2%; bottom: 6.9rem; }
.pier .flowers { width: 4.6rem; right: 2%; bottom: -.6rem; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.perk { display: grid; grid-template-columns: 7rem 1fr; gap: .9rem; align-items: center; background: rgba(255,255,255,.93); border-radius: 1.5rem; padding: 1.1rem 1.2rem;
  box-shadow: 0 6px 0 rgba(15,92,99,.1), 0 18px 30px -18px rgba(15,92,99,.35); }
.perk.wide { grid-column: 1 / -1; grid-template-columns: 8rem 1fr; margin: 0 8%; }
.perk h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: .3rem; }
.perk p { margin: 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.55; }
.perk p b { color: var(--ink); }
.art { position: relative; width: 7rem; height: 6rem; }
.perk.wide .art { width: 8rem; }
.art .illo { left: 50%; bottom: .15rem; width: 92%; transform: translateX(-50%); filter: drop-shadow(0 3px 0 rgba(15,92,99,.12)); }
.art .note { width: 1.4rem; right: .1rem; top: .1rem; }
.art::before { content: ""; position: absolute; inset: .3rem .2rem .1rem; border-radius: 50%; background: var(--tint, #ffe1ea); }
.tint-pink { --tint: #ffe0e8; } .tint-sun { --tint: #fff0c7; } .tint-mint { --tint: #dcf5e3; } .tint-sky { --tint: #dcefff; } .tint-lilac { --tint: #ece3ff; }
.art img { position: absolute; image-rendering: pixelated; height: auto; }
.art .who { width: 3.3rem; left: 1rem; bottom: .3rem; }
.art .what { width: 2.6rem; right: .7rem; top: .4rem; }
.art .what.big { width: 3.2rem; top: auto; bottom: .2rem; right: .3rem; }
.art .what.cloud { width: 3.6rem; left: .6rem; right: auto; top: auto; bottom: -.2rem; }
.art .dot { width: 1.5rem; right: 1rem; top: .3rem; }
.tint-lilac .art .dot, .tint-mint .art .dot { width: 1.9rem; left: .1rem; right: auto; top: auto; bottom: 0; }

.tint-sky .art .who { bottom: 1.1rem; z-index: 1; }

/* Inside the pond: phones with caption cards */
.sky { background: linear-gradient(#a9dcf8, #d7f1fd 42%, #e9f8fb 70%, #cdeef2); padding-bottom: 12rem; }
.deco .cloud-l { width: 40rem; left: -6rem; top: 1rem; opacity: .9; }
.phones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem 1.25rem 1.5rem; margin: 0 -1.25rem; scrollbar-width: thin; }
.phones figure { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; padding: .75rem .75rem 0; background: rgba(255,255,255,.96); border-radius: 2.3rem 2.3rem 1.4rem 1.4rem;
  box-shadow: 0 6px 0 rgba(15,92,99,.1), 0 22px 30px -18px rgba(15,60,70,.4); }
.phone { border: 7px solid #1d2f33; border-radius: 1.7rem; overflow: hidden; background: #1d2f33; box-shadow: 0 6px 14px -8px rgba(15,60,70,.5); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1305; }
.phones figcaption { flex: 1; padding: 1rem .35rem 1.1rem; }
.phones figcaption h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.08rem; font-weight: 600; margin-bottom: .35rem; }
.phones figcaption h3 img { width: 1.7rem; height: 1.7rem; object-fit: contain; image-rendering: pixelated; }
.phones figcaption p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }
.shore-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; z-index: 3; pointer-events: none; }
.shore-strip .pier-img { position: absolute; width: 26rem; left: -2rem; bottom: -1.6rem; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(9,56,80,.18)); }
.shore-strip .stander { position: absolute; width: 8rem; left: 7%; bottom: 4.5rem; image-rendering: pixelated; animation: bob 3s ease-in-out infinite; }
.shore-strip .piling.solo { right: 7%; bottom: 0; height: 4.2rem; width: 5rem; }
.shore-strip .stander.white { width: 4.6rem; left: auto; right: calc(7% + .2rem); bottom: 4rem; animation-delay: .8s; }

/* How to play: three little scenes on the water */
.shallows { background: linear-gradient(#cdeef2, #e8f8fb 30%, #d8f3f5 60%, #bfe9ef); padding-bottom: 5rem; }
.shallows .deco .water { height: 23rem; -webkit-mask-image: linear-gradient(transparent, #000 4rem); mask-image: linear-gradient(transparent, #000 4rem); }
.shallows .deco .t-left { bottom: 19rem; left: -4rem; } .shallows .deco .t-right { bottom: 19rem; }
.deco .lamp-pier { width: 15rem; left: -3rem; bottom: 14.5rem; }
.deco .lamp { width: 3.2rem; left: 3.2rem; bottom: 18.7rem; }
/* Below ~1440px the wrap reaches the screen edge, so the trees step outside it instead of sitting behind the steps' text */
@media (max-width: 90rem) { .shallows .deco .t-left { left: -9.5rem; } .shallows .deco .t-right { right: -9.5rem; } }
.shallows .pd1 { left: 20%; bottom: 3rem; } .shallows .pd2 { left: 80%; bottom: 1.5rem; } .shallows .pd3 { right: 6%; bottom: 10rem; }
/* The sheet's rows 3–4 face right, the way the glide goes (rows 1–2 face left). */
.bird { position: absolute; z-index: 1; left: 30%; top: 24rem; width: 64px; height: 64px; background-size: 384px 256px; background-position-y: -128px; image-rendering: pixelated;
  animation: flap .45s steps(6) infinite, glide 16s linear infinite; }
@keyframes glide { 0% { transform: translate(-40vw, 1rem); } 50% { transform: translate(10vw, -1.5rem); } 100% { transform: translate(60vw, .5rem); } }
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.step-top { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; align-items: start; }
.num { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--duck); color: var(--ink); font: 600 1.35rem var(--display); box-shadow: 0 4px 0 #d69a00, 0 0 0 4px #fff; }
.howto h3 { font-size: 1.45rem; font-weight: 600; margin: .2rem 0 .3rem; }
.howto p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.vignette { position: relative; height: 12rem; margin-top: 1.2rem; }
.vignette::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: .7rem; height: 2rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.float-raft { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 1; width: 13rem; height: 5.2rem; display: flex; align-items: flex-end; justify-content: center; gap: .1rem; padding: 0 .8rem 1.6rem; }
.float-raft::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4rem; z-index: -1; image-rendering: pixelated;
  background: url(/img/site/raft-left.png) left bottom / auto 100% no-repeat, url(/img/site/raft-right.png) right bottom / auto 100% no-repeat, url(/img/site/raft-mid.png) left bottom / auto 100% repeat-x; }
.float-raft img { height: 3.4rem; width: auto; image-rendering: pixelated; }
.float-raft { animation: rock 3.6s ease-in-out infinite; }
@keyframes rock { 50% { transform: translateX(-50%) translateY(-4px) rotate(-1deg); } }
.v1 .up { animation: hop 1.6s ease-in-out infinite; }
.v1 .up + .up { animation-delay: .12s; }
@keyframes hop { 0%, 45%, 100% { transform: none; } 20% { transform: translateY(-.8rem); } }
.v1 .tap { position: absolute; width: 3.6rem; left: calc(50% + 3rem); bottom: 3.4rem; z-index: 2; transform: rotate(-20deg); image-rendering: pixelated; animation: nudge 1.6s ease-in-out infinite; }
.v1 .zing { position: absolute; left: calc(50% + 1rem); top: .2rem; width: 3rem; height: 2rem;
  background: linear-gradient(60deg, transparent 45%, #ffc93c 45% 55%, transparent 55%) 0 0 / 1rem 2rem no-repeat, linear-gradient(90deg, transparent 42%, #ffc93c 42% 58%, transparent 58%) 1rem 0 / 1rem 2rem no-repeat, linear-gradient(120deg, transparent 45%, #ffc93c 45% 55%, transparent 55%) 2rem 0 / 1rem 2rem no-repeat; }
.v2 .float-raft.small { width: 7rem; left: 24%; }
.v2 .float-raft.small.r { left: 76%; }
.v2 .arc { position: absolute; left: 18%; right: 14%; top: 1.2rem; width: 68%; height: 7rem; overflow: visible; }
.v2 .arc path { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 6 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flying { position: absolute; width: 64px; height: 64px; background-size: 384px 256px; image-rendering: pixelated; animation: flap .5s steps(6) infinite; z-index: 2; }
.flying.a { left: 38%; top: .6rem; } .flying.b { left: 54%; top: 1.6rem; animation-delay: -.25s; }
.v3 .float-raft.go { width: 15rem; animation: sail 5s ease-in-out infinite; }
@keyframes sail { 0%, 100% { transform: translateX(-58%); } 50% { transform: translateX(-42%) translateY(-3px); } }
.post-sign { position: absolute; right: 2%; top: .6rem; z-index: 2; font: 600 1.05rem/1.1 var(--display); color: #fff3cf; text-align: center; padding: .45rem .7rem;
  background: linear-gradient(#be8448, #9b5f2d); border: 4px solid #5a3418; border-radius: .7rem; text-shadow: 0 2px 0 #4a2710; transform: rotate(6deg); }
.post-sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: .7rem; height: 3.4rem; margin-left: -.35rem; background: #8e5830; border: 3px solid #5a3418; border-top: 0; }
.rules { text-align: center; margin: 2rem auto 0; max-width: 44rem; color: var(--ink); font-weight: 500; background: rgba(255,255,255,.85); padding: .9rem 1.3rem; border-radius: 1.1rem; }

/* Made for every age: the deep-teal band */
.teal { background: linear-gradient(#2b8a86, #1f6f70 55%, #1a6466); color: #e8fbf8; padding-bottom: 9rem; }
.teal .deco .water { height: 7rem; }
.teal .big-tree { width: 19rem; left: -3rem; bottom: 4rem; opacity: .95; }
.reader { position: absolute; left: 1%; bottom: 2rem; width: 20rem; height: 13rem; }
.reader img { position: absolute; image-rendering: pixelated; height: auto; }
.reader .pier-img { width: 20rem; left: 0; bottom: 0; }
.reader .readers { width: 12.5rem; left: 3.2rem; bottom: 4.5rem; }
.teal .wrap { padding-left: max(1.25rem, 14rem); }
.age-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.age-cards li { background: rgba(255,255,255,.96); border-radius: 1.4rem; padding: 1.1rem 1rem 1.2rem; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.age-cards .art { margin: 0 auto .6rem; width: 8rem; height: 5.6rem; }
.age-cards .art::before { background: #fff4d6; }
.age-cards li:nth-child(2) .art::before { background: #ffe3ea; }
.age-cards li:nth-child(3) .art::before { background: #e3f0ff; }
.age-cards li:nth-child(4) .art::before { background: #efe6ff; }
.age-cards .illo { width: 5.4rem; bottom: .1rem; }
.age-cards li:nth-child(3) .illo { width: 4.2rem; }
.age-cards .note { right: 1.3rem; top: .2rem; }
.age-cards .who { width: 3.3rem; left: 2.2rem; }
.age-cards .who.two { left: 4.3rem; }
.age-cards li:nth-child(2) .who:first-child { left: 1.2rem; }
.age-cards .what { width: 1.8rem; right: 1.2rem; top: .4rem; }
.age-cards .side { width: 2.6rem; left: .2rem; right: auto; bottom: 0; top: auto; }
.family { position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%); display: flex; gap: .05rem; }
.family img { position: static; width: 1.75rem; image-rendering: pixelated; }
.age-cards h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.age-cards p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

/* Grow a little duck farm */
.meadowland { background: linear-gradient(#bfe9ef, #e4f6dc 35%, #d5efc6); padding-bottom: 4.5rem; }
.farm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.meadow { position: relative; border-radius: 2.6rem; padding: 2rem 1.5rem 1.5rem; border: 18px solid transparent; image-rendering: pixelated;
  background: linear-gradient(#bfe6a4, #bfe6a4) padding-box, #58c6e0 url(/img/site/pond-water.png) 0 0 / 96px 96px border-box;
  box-shadow: inset 0 0 0 5px #ecd9a6, inset 0 -14px 0 5px #a6d88a, 0 0 0 3px rgba(15,92,99,.3), 0 14px 0 rgba(15,92,99,.12); }
.meadow > * { image-rendering: pixelated; }
.meadow .row { display: flex; align-items: flex-end; justify-content: center; gap: .5rem 1.25rem; flex-wrap: wrap; }
.meadow .row + .row { margin-top: 1rem; }
.meadow img { image-rendering: pixelated; }
.meadow .row.homes { flex-wrap: nowrap; gap: 4%; }
.meadow .row.homes img { width: 22%; height: auto; }
.meadow .row.ducks img { height: 3.4rem; width: auto; animation: bob 3s ease-in-out infinite; }
.meadow .row.ducks img:nth-child(2n) { animation-delay: .7s; }
.farm-card { background: rgba(255,255,255,.93); border-radius: 1.5rem; padding: 1.4rem 1.6rem; box-shadow: 0 6px 0 rgba(60,110,40,.12); }
.farm-card p { color: var(--ink); }
.farm-card p:last-child { margin-bottom: 0; color: var(--ink-soft); }

/* Questions */
.faq.sky { padding-top: 4rem; padding-bottom: 6rem; background: linear-gradient(#d5efc6, #e7f7fd 25%, #d9f1fb); }
.faq-list { max-width: 48rem; margin: 0 auto; display: grid; gap: .8rem; }
.faq-list details { background: rgba(255,255,255,.95); border-radius: 1.2rem; padding: .2rem 1.3rem; box-shadow: 0 5px 0 rgba(15,92,99,.1); }
.faq-list summary { cursor: pointer; list-style: none; padding: 1rem 2.4rem 1rem 0; position: relative; font: 500 1.12rem/1.4 var(--display); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: .7rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--duck); font: 600 1.2rem/1 var(--display); color: var(--ink); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { color: var(--ink-soft); margin: 0 0 1.1rem; }

/* Closing call */
.cta { position: relative; overflow: hidden; isolation: isolate; padding: 4.5rem 0 15.5rem; text-align: center; }
.cta .deco .wash { background: linear-gradient(rgba(240,251,255,.55), rgba(240,251,255,.2)); }
.cta .pier-img { width: 30rem; left: 50%; margin-left: -15rem; bottom: -1.6rem; filter: drop-shadow(0 8px 0 rgba(9,56,80,.18)); }
.cta .stander { width: 8.4rem; left: calc(50% - 10rem); bottom: 5.4rem; animation: bob 3s ease-in-out infinite; }
.cta .stander.pink { width: 7.6rem; left: calc(50% + 1.5rem); animation-delay: .6s; }
.cta-card { display: inline-block; background: rgba(255,255,255,.92); border-radius: 1.8rem; padding: 2rem 2.6rem 2.2rem; box-shadow: 0 8px 0 rgba(15,92,99,.12); }
.cta-card h2 { margin-bottom: .5rem; }
.cta-card p { margin: 0 auto 1.3rem; color: var(--ink); font-weight: 500; }
.cta .get { justify-content: center; margin: 0; }
.cta .get .badge img { height: 3.8rem; }

@media (prefers-reduced-motion: reduce) {
  .deco .fall, .pier .sitter, .shore-strip .stander, .float-raft, .v1 .up, .v1 .tap, .flying, .meadow .row.ducks img, .cta .stander, .bird { animation: none !important; }
  .bird { display: none; }
  .deco .fall { display: none; }
}
@media (max-width: 64rem) {
  .age-cards { grid-template-columns: 1fr 1fr; }
  .teal .wrap { padding-left: 1.25rem; }
  .reader, .teal .big-tree { display: none; }
  .howto { gap: 1.25rem; }
}
@media (max-width: 56rem) {
  .sec { padding: 4rem 0 5rem; }
  .two, .farm-row { grid-template-columns: 1fr; }
  .intro { text-align: center; }
  .intro .lead { margin: 0 auto; }
  .pier { height: 12.5rem; max-width: 24rem; margin: 1.2rem auto 0; }
  .pier .yellow { width: 6.8rem; left: 15%; bottom: 5.4rem; }
  .pier .pink { width: 5.8rem; left: 60%; bottom: 5.5rem; }
  .shore-strip .pier-img { width: 16rem; }
  .shore-strip .stander { width: 5.4rem; bottom: 2.3rem; left: 8%; }
  .shore-strip .stander.white { width: 3.6rem; bottom: 4rem; }
  .shore-strip .piling.solo { height: 4.2rem; width: 4rem; }
  .cta .stander { width: 6.5rem; left: calc(50% - 7rem); }
  .cta .stander.pink { width: 5.6rem; left: calc(50% + 1rem); }
  .cta .pier-img { width: 20rem; margin-left: -10rem; }
  .cta .stander, .cta .stander.pink { bottom: 3.1rem; }
  .perks { grid-template-columns: 1fr; }
  .perk.wide { margin: 0; }
  .howto { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
  .age-cards { grid-template-columns: 1fr 1fr; }
  .deco .t-left, .deco .t-right { width: 8rem; opacity: .6; }
  .deco .lamp, .deco .lamp-pier { display: none; }
  .shallows .deco .water { height: 14rem; }
  .shore-strip .boards { width: 60%; }
  .sign { padding: .5rem 1.6rem .65rem; }
  .sign .perch { height: 2.6rem; top: -2.1rem; }
}
@media (max-width: 30rem) {
  .perk, .perk.wide { grid-template-columns: 5.6rem 1fr; padding: 1rem; }
  .perk .art { transform: scale(.8); transform-origin: 0 50%; }
  .age-cards { grid-template-columns: 1fr; }
}


/* Footer */
footer.site { background: var(--ink); color: #cfe5e2; font-size: .95rem; padding: 2.25rem 0 2.75rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
footer.site a { color: #fff; }
footer.site nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
footer.site p { margin: 0; }

/* Finishing touches: leafy signs, a nav that follows you, cards that lift */
.sign::before, .sign::after { content: ""; position: absolute; width: 3.2rem; height: 2.6rem; image-rendering: pixelated; pointer-events: none;
  background: url(/img/deco/leaf.png) 0 .6rem / 1.7rem no-repeat, url(/img/deco/leaf.png) 1.3rem 0 / 1.4rem no-repeat, url(/img/deco/leaf.png) 1.5rem 1.2rem / 1.3rem no-repeat; }
.sign::before { left: -1.4rem; top: -1rem; }
.sign::after { right: -1.4rem; bottom: -1.1rem; transform: scale(-1, -1); }
.top.stuck { position: fixed; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 20px -12px rgba(15,60,70,.5); animation: drop .35s ease-out; }
.top.stuck .wrap { padding-top: .55rem; padding-bottom: .55rem; }
@keyframes drop { from { transform: translateY(-100%); } }
.perk, .age-cards li, .phones figure, .faq-list details, .facts { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
@media (hover: hover) {
  .perk:hover, .age-cards li:hover, .phones figure:hover { transform: translateY(-5px); }
  .perk:hover, .age-cards li:hover { box-shadow: 0 10px 0 rgba(15,92,99,.1), 0 26px 34px -18px rgba(15,92,99,.45); }
}
@media (prefers-reduced-motion: reduce) { .top.stuck { animation: none; } .perk, .age-cards li, .phones figure { transition: none; } }

/* A little parade along the top of the footer */
footer.site { position: relative; overflow-x: clip; }
.parade { position: absolute; left: 0; top: -66px; height: 70px; display: flex; gap: 6px; animation: parade 34s linear -14s infinite; pointer-events: none; }
.parade span { width: 70px; height: 70px; background-size: 280px 280px; background-position: 0 -140px; image-rendering: pixelated; animation: waddle .6s steps(4) infinite; }
.parade span:nth-child(2) { animation-delay: -.15s; } .parade span:nth-child(3) { animation-delay: -.3s; } .parade span:nth-child(4) { animation-delay: -.45s; }
@keyframes waddle { from { background-position-x: 0; } to { background-position-x: -280px; } }
@keyframes parade { from { transform: translateX(-420px); } to { transform: translateX(100vw); } }
@media (prefers-reduced-motion: reduce) { .parade { animation: none; left: 1rem; } .parade span { animation: none; } }