:root {
  color-scheme: light;
  --paper: #f7efe0;
  --card: #fffaf0;
  --ink: #262a45;
  --ink-soft: #545a78;
  --pencil: #7b7f95;
  --rose: #d6336c;
  --teal: #17a398;
  --sun: #f2b705;
  --sky: #3a9bd5;
  --focus: #d6336c;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.02rem;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Cold-press paper grain over everything, so paint and text share one sheet. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: url("grain.webp") 0 0 / 256px 256px repeat;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 80;
  padding: .7rem 1.1rem;
  color: var(--ink);
  font-weight: 900;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px dashed var(--focus);
  outline-offset: 4px;
  border-radius: 10px;
}

/* ---------- background washes ---------- */
.washes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.wash {
  position: absolute;
  width: clamp(420px, 52vw, 820px);
  opacity: .5;
  animation: drift 38s ease-in-out infinite alternate;
}

.wash-1 { top: -170px; left: -14%; }
.wash-2 { top: 260px; right: -18%; opacity: .38; animation-duration: 44s; animation-delay: -12s; }
.wash-3 { top: 1150px; left: -22%; opacity: .36; animation-duration: 50s; animation-delay: -20s; }
.wash-4 { top: 1900px; right: -20%; opacity: .4; animation-duration: 46s; animation-delay: -6s; }
.wash-5 { bottom: -220px; left: 18%; opacity: .32; animation-duration: 52s; }

@keyframes drift {
  from { translate: 0 0; rotate: 0deg; scale: 1; }
  to { translate: 3% 4%; rotate: 6deg; scale: 1.08; }
}

.splashes {
  position: absolute;
  inset: 0;
  z-index: 55;
  overflow: hidden;
  pointer-events: none;
}

.splash-drop {
  position: absolute;
  width: 150px;
  translate: -50% -50%;
  mix-blend-mode: multiply;
  animation: bloom 3.2s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes bloom {
  0% { opacity: 0; scale: .25; filter: blur(6px); }
  12% { opacity: .95; }
  35% { scale: 1; filter: blur(0); }
  70% { opacity: .85; }
  100% { opacity: 0; scale: 1.06; }
}

/* ---------- layout ---------- */
.shell {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-decoration: none;
}

.brand img {
  width: 54px;
  height: 54px;
  transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1);
}

.brand:hover img { rotate: -14deg; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.small-nav {
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 1.2rem;
  rotate: -2deg;
}

.language-switcher {
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
}

.language-switcher button {
  min-width: 52px;
  min-height: 44px;
  padding: .45rem .7rem;
  color: var(--ink-soft);
  font: 900 .86rem/1 var(--body);
  letter-spacing: .06em;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.language-switcher button[aria-pressed="true"] {
  color: var(--ink);
  background: url("stroke-sun.webp") center / 100% 100% no-repeat;
}

.language-switcher button:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.5rem 0 3.5rem;
}

.eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .35rem 1rem .25rem;
  font-family: var(--hand);
  font-size: 1.3rem;
  rotate: -2.5deg;
}

.eyebrow::before {
  content: "";
  position: absolute;
  inset: -6px -14px;
  z-index: -1;
  background: url("tape-1.webp") center / 100% 100% no-repeat;
  opacity: .9;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.1rem, 7.6vw, 6.4rem);
  font-weight: 850;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  line-height: .94;
  letter-spacing: -.035em;
}

h1 span { display: block; }

h1 .paint-under {
  position: relative;
  width: fit-content;
  color: var(--rose);
}

h1 .paint-under::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -4%;
  bottom: -.02em;
  z-index: -1;
  height: .36em;
  background: url("swash.webp") center / 100% 100% no-repeat;
  opacity: .85;
  clip-path: inset(0 100% 0 0);
  animation: paint-in 1.1s .5s cubic-bezier(.6, 0, .2, 1) forwards;
}

@keyframes paint-in { to { clip-path: inset(0 0 0 0); } }

html[lang="vi"] h1 { font-size: clamp(2.7rem, 6.4vw, 5.3rem); }

.intro {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2rem;
}

.paint-hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 1.2rem;
  rotate: -2deg;
}

.paint-hint svg { width: 34px; height: 34px; flex: none; }

.hero-art {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  justify-self: center;
  touch-action: manipulation;
}

.hero-art img {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 100%);
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-bg { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px); transition: translate .6s ease-out; }

.hero-float {
  position: absolute;
  inset: 0;
  translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 12px);
  transition: translate .5s ease-out;
}

.hero-bob {
  position: absolute;
  inset: 0;
  animation: hover 6s ease-in-out infinite;
}

@keyframes hover {
  50% { translate: 0 -2.4%; rotate: 1.5deg; }
}

.hero-ring-back { z-index: 1; }
.hero-planet { z-index: 3; cursor: pointer; }
.hero-eyes { z-index: 4; translate: calc(var(--px, 0) * 2.2%) calc(var(--py, 0) * 2.8%); }
.hero-eyes { animation: blink 5.2s infinite; transform-origin: 50% 50%; }
.hero-ring-front { z-index: 5; }

.hero-art .hero-orbiter {
  z-index: 2;
  width: 10.5%;
  will-change: transform;
}

.hero-art .hero-orbiter.front { z-index: 6; }

@keyframes blink {
  0%, 90%, 100% { scale: 1 1; }
  93% { scale: 1 .08; }
}

.hero-planet-wrap.giggle { animation: giggle .8s cubic-bezier(.3, 1.6, .5, 1); }

.hero-planet-wrap { position: absolute; inset: 0; }

@keyframes giggle {
  20% { rotate: -9deg; scale: 1.04; }
  45% { rotate: 7deg; }
  70% { rotate: -4deg; }
}

/* ---------- section heading ---------- */
.library { padding: 1.5rem 0 5rem; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2.6rem;
}

h2 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 820;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.03em;
  line-height: 1;
}

h2::after {
  content: "";
  display: block;
  width: 78%;
  height: .32em;
  margin-top: .12em;
  background: url("swash.webp") left center / 100% 100% no-repeat;
  filter: hue-rotate(140deg) saturate(.9);
  opacity: .8;
}

.count-note {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 1.35rem;
  rotate: 2deg;
}

.count-note svg { width: 54px; height: 40px; flex: none; }

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.6rem 2rem;
}

.model-card {
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.6rem;
  border: 0 solid transparent;
  border-image: url("card.webp") 70 fill / 46px / 26px round;
  rotate: var(--tilt);
  transition: rotate .45s cubic-bezier(.3, 1.4, .5, 1), translate .45s cubic-bezier(.3, 1.4, .5, 1);
}

.model-card:hover,
.model-card:focus-within {
  rotate: 0deg;
  translate: 0 -6px;
}

.model-card .tape {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 3;
  width: 128px;
  translate: -50% 0;
  rotate: var(--tape-tilt, -3deg);
  pointer-events: none;
}

.card-art { margin: -.2rem -.3rem .4rem; }

.card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.card-no {
  display: inline-block;
  margin-bottom: .2rem;
  color: var(--pencil);
  font-family: var(--hand);
  font-size: 1.1rem;
  letter-spacing: .04em;
}

.model-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 780;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.model-card p {
  margin: .6rem 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.play-button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 52px;
  margin-top: auto;
  padding: .75rem 1.7rem .8rem 1.5rem;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  background: var(--stroke, url("stroke-mint.webp")) center / 100% 100% no-repeat;
  transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1), scale .3s cubic-bezier(.3, 1.6, .5, 1);
}

.card-copy p { margin-bottom: 1.3rem !important; }

/* The whole card is one big tap target. */
.model-card .play-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.play-button .arrow {
  width: 30px;
  height: 16px;
  transition: translate .3s cubic-bezier(.3, 1.6, .5, 1);
}

.model-card:hover .play-button {
  rotate: -2deg;
  scale: 1.05;
}

.model-card:hover .play-button .arrow { translate: 5px 0; }

.stroke-sun { --stroke: url("stroke-sun.webp"); }
.stroke-rose { --stroke: url("stroke-rose.webp"); }
.stroke-sky { --stroke: url("stroke-sky.webp"); }
.stroke-mint { --stroke: url("stroke-mint.webp"); }

.model-card.featured { grid-column: span 2; }

.model-card.featured .card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 1.6rem;
}

.model-card.featured .card-copy > :not(.play-button) { grid-column: 1; }

.model-card.featured .play-button { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-bottom: 1.3rem; }

.model-card.featured h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.model-card.featured p { max-width: 34rem; font-size: 1.06rem; }

/* The last card spans the whole row: painting on the left, words on the right. */
.model-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; }
.model-card.wide .card-art { flex: 1.5 1 0; min-width: 0; margin: -.2rem 0 -.2rem -.3rem; }
.model-card.wide .card-copy { flex: 1 1 0; align-self: stretch; justify-content: center; }
.model-card.wide .card-copy .play-button { margin-top: .4rem; }
.model-card.wide h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.model-card.wide p { font-size: 1.06rem; }
.model-card.wide.flip .card-art { order: 1; margin: -.2rem -.3rem -.2rem 0; }
.badge-new { margin-top: .2rem; background-image: url("stroke-sun.webp"); }

.badge {
  display: inline-block;
  justify-self: start;
  margin-bottom: .55rem;
  padding: .25rem .8rem;
  color: var(--ink);
  font: 900 .74rem/1.4 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: url("stroke-rose.webp") center / 100% 100% no-repeat;
}

/* ---------- scenes ---------- */
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.scene .layer,
.scene .group {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: none;
  height: auto;
}

.scene .group { height: var(--h); overflow: hidden; }

.scene.is-paused *,
.scene.is-paused *::before { animation-play-state: paused !important; }

/* Solar */
.solar-rays { animation: spin 60s linear infinite; }
.solar-glow { animation: glow 4s ease-in-out infinite; }
.solar-sun { animation: breathe 4s ease-in-out infinite; }
.scene-solar .orbiter { z-index: 2; will-change: transform; }
.scene-solar .orbiter.behind { z-index: 0; }
.solar-sky, .solar-stars { z-index: -1; }
.solar-glow, .solar-rays { z-index: 0; }
.solar-sun { z-index: 1; }
.solar-rocket { z-index: 3; opacity: 0; }
.twinkle { animation: twinkle 3s ease-in-out infinite; }
.twinkle:nth-of-type(2n) { animation-duration: 2.3s; animation-delay: -1s; }
.twinkle:nth-of-type(3n) { animation-duration: 3.7s; animation-delay: -2s; }

@keyframes spin { to { rotate: 360deg; } }
@keyframes glow { 50% { opacity: .55; scale: 1.08; } }
@keyframes breathe { 50% { scale: 1.035; } }
@keyframes twinkle {
  0%, 100% { opacity: .25; scale: .6; rotate: 0deg; }
  50% { opacity: 1; scale: 1.15; rotate: 25deg; }
}

/* Temple */
.pulse { animation: glow 5s ease-in-out infinite; }
.sway { transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
.temple-tree-1 { animation-duration: 6.2s; animation-delay: -2s; }
.temple-tree-2 { animation-duration: 5.6s; animation-delay: -4s; }
.temple-tree-3 { animation-duration: 4.4s; animation-delay: -1s; }

@keyframes sway {
  from { rotate: -2.2deg; }
  to { rotate: 2deg; }
}

.ripple {
  opacity: 0;
  animation: flow 5s linear infinite;
}

.temple-ripple-0 { --dx: -90%; animation-delay: 0s; }
.temple-ripple-1 { --dx: 140%; animation-delay: -.7s; }
.temple-ripple-2 { --dx: -260%; animation-delay: -1.4s; }
.temple-ripple-3 { --dx: 260%; animation-delay: -2.1s; }
.temple-ripple-4 { --dx: 20%; animation-delay: -2.8s; }
.temple-ripple-5 { --dx: -180%; animation-delay: -3.5s; }
.temple-ripple-6 { --dx: 220%; animation-delay: -4.2s; }

@keyframes flow {
  0% { opacity: 0; translate: 0 0; scale: .35; }
  15% { opacity: .95; }
  80% { opacity: .8; }
  100% { opacity: 0; translate: var(--dx) 1150%; scale: 1.7; }
}

.temple-fish { opacity: 0; animation: leap 7s ease-in-out infinite 1.5s; }

@keyframes leap {
  0%, 58% { opacity: 0; translate: -70% 50%; rotate: -40deg; }
  62% { opacity: 1; translate: -60% 10%; rotate: -36deg; }
  70% { translate: 0 -120%; rotate: 0deg; }
  78% { opacity: 1; translate: 60% 10%; rotate: 38deg; }
  82%, 100% { opacity: 0; translate: 70% 50%; rotate: 42deg; }
}

.bird { animation: fly 20s linear infinite, flap .5s ease-in-out infinite alternate; }
.temple-bird-1 { animation-delay: -6s, -.2s; animation-duration: 23s, .44s; }
.temple-bird-2 { animation-delay: -12s, -.1s; animation-duration: 18s, .56s; }

@keyframes fly {
  from { translate: -320% 0; }
  to { translate: 1400% -60%; }
}

@keyframes flap { to { scale: 1 .45; } }

/* Distance */
.distance-arrow { overflow: visible !important; }
.distance-arrow img { clip-path: inset(0 100% 0 0); }
.distance-shine { opacity: 0; }
.walker { will-change: transform; }

/* Density */
.bob { transform-origin: 50% 70%; animation: bob 3.2s ease-in-out infinite; }
.density-block { animation-duration: 3.8s; animation-delay: -1.2s; }
.density-ball { animation-duration: 2.6s; animation-delay: -.6s; }

@keyframes bob {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 6%; rotate: 3deg; }
}

.wave { animation: wave 4s ease-in-out infinite alternate; }

@keyframes wave { to { translate: -1.2% 1.5%; } }

.pebble { opacity: 0; animation: sink 8s infinite; }

@keyframes sink {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; animation-timing-function: ease-in; }
  4% { opacity: 1; }
  20% { translate: 0 283%; rotate: 40deg; animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  52% { translate: 4% 726%; rotate: 80deg; }
  86% { opacity: 1; translate: 4% 726%; rotate: 80deg; }
  94%, 100% { opacity: 0; translate: 4% 726%; rotate: 80deg; }
}

.splash { opacity: 0; transform-origin: 50% 100%; animation: splash 8s infinite; }

@keyframes splash {
  0%, 19% { opacity: 0; scale: .3 .2; }
  21% { opacity: 1; }
  30%, 100% { opacity: 0; scale: 1.3 1.1; }
}

.bubble { opacity: 0; animation: rise 4.2s ease-in infinite; }
.density-bubble-1 { animation-delay: -1.3s; animation-duration: 3.6s; }
.density-bubble-2 { animation-delay: -2.6s; animation-duration: 4.8s; }
.density-bubble-3 { animation-delay: -.6s; animation-duration: 5.2s; }
.density-bubble-4 { animation-delay: -3.4s; }
.density-bubble-5 { animation-delay: -2s; animation-duration: 3.9s; }

@keyframes rise {
  0% { opacity: 0; translate: 0 0; }
  10% { opacity: 1; }
  35% { translate: 60% -240%; }
  70% { translate: -50% -500%; opacity: .9; }
  100% { opacity: 0; translate: 30% -700%; }
}

/* Fluid displacement: the stone and the water level move together. */
.fluid-stone { animation: lower 10s linear infinite; }
.fluid-water { animation: level 10s linear infinite; }
.fluid-marker { animation: marker 10s linear infinite; }
.fluid-bulb { opacity: 0; animation: idea 10s ease-out infinite; }
.fluid-glass { z-index: 2; }

@keyframes lower {
  0%, 10% { translate: 0 0; }
  40%, 62% { translate: 0 37.6%; }
  92%, 100% { translate: 0 0; }
}

@keyframes level {
  0%, 24.8% { translate: 0 0; }
  33.5%, 68.6% { translate: 0 -13.3%; }
  77.3%, 100% { translate: 0 0; }
}

@keyframes marker {
  0%, 24.8% { translate: 0 0; }
  33.5%, 68.6% { translate: 0 -133%; }
  77.3%, 100% { translate: 0 0; }
}

@keyframes idea {
  0%, 34% { opacity: 0; scale: .4; rotate: -20deg; }
  38% { opacity: 1; scale: 1.15; rotate: 8deg; }
  42% { scale: 1; rotate: 0deg; }
  58% { opacity: 1; scale: 1; }
  62%, 100% { opacity: 0; scale: .8; }
}

/* Digestion: the stomach churns, the bite travels (moved by script), nutrients pop out. */
.digestion-stomach { animation: churn 1.8s ease-in-out infinite; }
.digestion-traveller { will-change: transform; }
.digestion-poo { opacity: 0; }
.digestion-spark { opacity: 0; animation: nutrient 3.2s ease-out infinite; }
.digestion-spark-0 { --dx: -380%; --dy: -260%; }
.digestion-spark-1 { --dx: 420%; --dy: -220%; animation-delay: -.8s; }
.digestion-spark-2 { --dx: -440%; --dy: 160%; animation-delay: -1.6s; }
.digestion-spark-3 { --dx: 400%; --dy: 220%; animation-delay: -2.4s; }

@keyframes churn {
  0%, 100% { scale: 1 1; rotate: 0deg; }
  50% { scale: 1.07 .94; rotate: -4deg; }
}

@keyframes nutrient {
  0% { opacity: 0; translate: 0 0; scale: .4; }
  15% { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: .7; }
}

/* Ark: the ship rides the swell, the waves roll past, the dove crosses with its olive leaf. */
.ark-ship { transform-origin: 50% 90%; animation: bob 4.4s ease-in-out infinite; }
.scene-ark .strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ark-waves { animation-duration: 22s; }
.ark-dove { animation: dove 16s linear infinite, flap .45s ease-in-out infinite alternate; }

@keyframes dove {
  0% { translate: -100% 40%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { translate: 1300% -60%; opacity: 0; }
}

/* Engine (moved by script) */
.engine-crank, .engine-gear { will-change: transform; }
.engine-flame, .engine-spark, .engine-puff { opacity: 0; }
.engine-flame { transform-origin: 50% 0; }

/* Electric */
.spin { animation: spin 3.5s linear infinite; }
.electric-blades-1 { animation-duration: 4.4s; animation-delay: -1s; }
.electric-blades-2 { animation-duration: 3s; animation-delay: -2s; }
.scroll { animation: scroll 16s linear infinite; }
.scroll-fast { animation-duration: 2.4s; }
.scroll-faster { animation-duration: 4s; }

@keyframes scroll { to { translate: -50% 0; } }

.scene-electric .strip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.car { animation: rumble .7s ease-in-out infinite alternate; }

@keyframes rumble {
  to { translate: 0 1.5%; rotate: -.6deg; }
}

.wheel { animation: spin .6s linear infinite; }
.electric-wheel-0, .electric-wheel-1 { margin-top: 0; }
.scene-electric .wheel { animation-name: spin, rumble; animation-duration: .6s, .7s; animation-timing-function: linear, ease-in-out; animation-direction: normal, alternate; }
.drift { animation: cloud 14s ease-in-out infinite alternate; }
.electric-cloud-1 { animation-duration: 18s; animation-delay: -6s; }

@keyframes cloud { to { translate: 30% 0; } }

.speed { animation: speed .45s steps(2) infinite; }

@keyframes speed {
  0% { opacity: .9; translate: 0 0; }
  100% { opacity: .5; translate: -8% 0; }
}

/* Inertia (moved by script) */
.scene-inertia .strip {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

.inertia-zzz { animation: snooze 2.6s ease-in-out infinite; }

@keyframes snooze {
  0%, 100% { scale: .8; translate: 0 6%; }
  50% { scale: 1.08; translate: 4% -4%; }
}

.inertia-dynamic { transition: opacity .35s ease; }
.scene-inertia.fading .inertia-dynamic { opacity: 0; }

.frame-tag {
  position: absolute;
  top: 15%;
  left: 50%;
  padding: .2rem .9rem .15rem;
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(.95rem, 2.4vw, 1.12rem);
  white-space: nowrap;
  background: url("tape-4.webp") center / 100% 100% no-repeat;
  translate: -50% 0;
  rotate: -2deg;
  transition: opacity .35s ease;
}

.scene-inertia.fading .frame-tag { opacity: 0; }

/* ---------- footer ---------- */
footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding: 2.2rem 0 3rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: url("swash.webp") center / 100% 100% no-repeat;
  filter: hue-rotate(200deg) saturate(.6);
  opacity: .55;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--ink);
}

.footer-brand img { width: 34px; height: 34px; }

/* ---------- footer credit ---------- */
.footer-signature {
  display: grid;
  gap: .35rem;
}

.credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .5rem;
  margin: 0;
  padding-left: 2.6rem;
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 1.12rem;
}

.credit .heart {
  display: inline-block;
  width: 22px;
  height: auto;
  margin: 0 .1rem;
  vertical-align: -4px;
  animation: beat 2.4s ease-in-out infinite;
}

@keyframes beat {
  0%, 60%, 100% { scale: 1; }
  68% { scale: 1.25; }
  76% { scale: .95; }
  84% { scale: 1.12; }
}

.credit a,
.how-link {
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  background: url("swash.webp") 0 100% / 100% .4em no-repeat;
  transition: background-size .25s ease;
}

.credit a:hover,
.how-link:hover { background-size: 100% .75em; }

.how-link {
  padding: 0;
  border: 0;
  cursor: pointer;
  background-image: url("stroke-rose.webp");
}

.credit .dot { color: var(--pencil); }

/* ---------- "How this was made" note ---------- */
body:has(.note[open]) { overflow: hidden; }

.note {
  width: min(640px, calc(100% - 1.5rem));
  rotate: -.6deg;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.note::backdrop {
  background:
    radial-gradient(circle at 30% 20%, rgba(58, 155, 213, .22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(214, 51, 108, .2), transparent 55%),
    rgba(38, 42, 69, .45);
  backdrop-filter: blur(3px);
  animation: fade .35s ease-out;
}

.note[open] { animation: unfurl .55s cubic-bezier(.3, 1.35, .5, 1); }
.note.closing { animation: fold .25s ease-in forwards; }
.note img { height: auto; }
.note.closing::backdrop { animation: fade .25s ease-in reverse forwards; }

@keyframes fade { from { opacity: 0; } }

@keyframes unfurl {
  from { opacity: 0; scale: .86; rotate: -3deg; translate: 0 30px; }
}

@keyframes fold {
  to { opacity: 0; scale: .9; rotate: 2deg; translate: 0 20px; }
}

.note-sheet {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  padding: 4.2rem 4.4rem 4.4rem;
  background: url("note-frame.webp") center / 100% 100% no-repeat;
}

.note-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: .4rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d9b98a transparent;
  -webkit-mask-image: linear-gradient(transparent, #000 .8rem, #000 calc(100% - 1.6rem), transparent);
  mask-image: linear-gradient(transparent, #000 .8rem, #000 calc(100% - 1.6rem), transparent);
}

.note-body > :first-child { margin-top: .8rem; }
.note-sign { padding-bottom: 1rem; }

.note-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 2;
  width: 140px;
  translate: -50% 0;
  rotate: 3deg;
  pointer-events: none;
}

.note-mascot {
  position: absolute;
  bottom: -34px;
  left: -38px;
  z-index: 2;
  width: 112px;
  rotate: -14deg;
  animation: hover 5s ease-in-out infinite;
  pointer-events: none;
}

.note-mascot img { width: 100%; }

.note-mascot .note-eyes {
  position: absolute;
  top: 31.25%;
  left: 22.2%;
  width: 55.6%;
  animation: blink 4.6s infinite;
}

.note-close {
  position: absolute;
  top: .7rem;
  right: .8rem;
  z-index: 3;
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1), scale .3s cubic-bezier(.3, 1.6, .5, 1);
}

.note-close:hover { rotate: 90deg; scale: 1.1; }

.note-close img { width: 100%; }

.note-kicker {
  margin: .6rem 0 .1rem;
  color: var(--rose);
  font-family: var(--hand);
  font-size: 1.25rem;
  rotate: -2deg;
  width: fit-content;
}

.note h2 {
  max-width: calc(100% - 40px);
  font-size: clamp(2rem, 6vw, 2.8rem);
}

.note h2::after { width: 92%; filter: none; }

html[lang="vi"] .note h2 { font-size: clamp(1.8rem, 5.2vw, 2.4rem); }

.note-intro {
  margin: 1rem 0 1.4rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.6;
}

.note-list {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: .9rem;
}

.note-list li > img {
  width: 52px;
  rotate: -6deg;
  transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1), scale .4s cubic-bezier(.3, 1.6, .5, 1);
}

.note-list li:nth-child(2n) > img { rotate: 6deg; }
.note-list li:hover > img { rotate: 0deg; scale: 1.12; }

.note-list h3 {
  margin: .2rem 0 .2rem;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 760;
  font-variation-settings: "SOFT" 100;
}

.note-list p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.note-sign {
  margin: 1.6rem 0 0;
  font-family: var(--hand);
  font-size: 1.5rem;
  text-align: right;
  rotate: -3deg;
}

@media (max-width: 520px) {
  .credit { padding-left: 0; }
  .note-sheet { padding: 3.6rem 2.6rem 4rem; }
  .note-mascot { width: 76px; left: -14px; bottom: -22px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .small-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: .5rem; }
  .hero-art { width: min(100%, 440px); order: -1; margin-bottom: -1rem; }
  .model-card.featured .card-copy { display: flex; align-items: flex-start; }
  .model-card.featured .play-button { margin-bottom: 0; }
  .model-card.wide { flex-direction: column; align-items: stretch; gap: 0; }
  .model-card.wide .card-art,
  .model-card.wide.flip .card-art { order: 0; margin: -.2rem -.3rem .4rem; }
  .section-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; gap: 2.4rem; }
  .model-card.featured { grid-column: auto; }
  .model-card { --tilt: 0deg !important; }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 2rem); }
  header { min-height: 76px; }
  .brand { font-size: 1.15rem; }
  .brand img { width: 44px; height: 44px; }
  .model-card { padding: 1.2rem 1.1rem 1.4rem; border-image-width: 40px; }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  h1 .paint-under::after { clip-path: none; }
  .distance-arrow img { clip-path: none; }
  .fluid-bulb { opacity: 1; }
}