:root {
  color-scheme: dark;
  --ambient: #f5e59a;
  --ambient-strength: .15;
  --ambient-mode: screen;
  --scene-brightness: 1;
  --scene-saturation: 1;
  --scene-contrast: 1;
  --ocean-top: #78dce2;
  --ocean-mid: #47bfd2;
  --ocean-deep: #258da9;
  --ocean-glint: rgba(235, 255, 255, .52);
  --ocean-night: 0;
  --stage-edge-blend: 2px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #45bdd0;
}

body {
  min-height: 100svh;
  font-family: system-ui, sans-serif;
  overscroll-behavior: none;
}

button,
a,
input {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
a,
input,
button:focus,
a:focus,
input:focus,
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: none;
}

.page-shell {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, var(--ocean-top), var(--ocean-mid) 48%, var(--ocean-deep));
}

.scene-backdrop {
  position: absolute;
  inset: -10%;
  z-index: 0;
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  filter:
    blur(46px)
    brightness(calc(var(--scene-brightness) * .86))
    saturate(calc(var(--scene-saturation) * 1.08));
  opacity: .18;
  transform: scale(1.1);
  pointer-events: none;
  transition: filter 1200ms ease, opacity 1200ms ease;
}

.ocean-extension {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(220, 255, 255, .035), rgba(25, 103, 140, .055)),
    linear-gradient(180deg, var(--ocean-top), var(--ocean-mid) 48%, var(--ocean-deep));
  filter:
    brightness(calc(var(--scene-brightness) * .97))
    saturate(calc(var(--scene-saturation) * 1.05));
  transition: background 1200ms ease, filter 1200ms ease;
  contain: paint;
  pointer-events: none;
}

.ocean-extension::before,
.ocean-extension::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ocean-extension::before {
  inset: -16% -10%;
  opacity: .28;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(247, 255, 255, .20), transparent 25%),
    radial-gradient(ellipse at 82% 68%, rgba(219, 252, 255, .15), transparent 28%);
  mix-blend-mode: screen;
  transform: translate3d(-1%, 0, 0);
  animation: seaRipples 13s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.ocean-extension::after {
  inset: 0;
  opacity: calc(var(--ocean-night) * .86);
  background:
    radial-gradient(circle at 9% 16%, #eaf4ff 0 1px, transparent 2px),
    radial-gradient(circle at 18% 41%, #d7e9ff 0 1px, transparent 2px),
    radial-gradient(circle at 89% 22%, #fff1bd 0 1px, transparent 2px),
    radial-gradient(circle at 80% 64%, #e5f2ff 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 18%, rgba(163, 205, 255, .23), transparent 48%);
  animation: oceanStars 5.8s steps(7, end) infinite;
}

.page-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 19%, transparent 82%, rgba(12, 101, 132, .09)),
    radial-gradient(ellipse at 50% 50%, transparent 57%, rgba(8, 89, 118, .10));
  pointer-events: none;
}

body[data-time="medianoche"] {
  --ocean-top: #244c83;
  --ocean-mid: #173f70;
  --ocean-deep: #102d58;
  --ocean-glint: rgba(197, 224, 255, .35);
  --ocean-night: .84;
  --stage-edge-blend: 9px;
}

body[data-time="madrugada"] {
  --ocean-top: #396b91;
  --ocean-mid: #285a82;
  --ocean-deep: #194467;
  --ocean-glint: rgba(218, 238, 255, .38);
  --ocean-night: .54;
  --stage-edge-blend: 7px;
}

body[data-time="amanecer"] {
  --ocean-top: #9bd9dc;
  --ocean-mid: #6bc4d0;
  --ocean-deep: #3d9bb7;
  --ocean-glint: rgba(255, 239, 219, .58);
  --ocean-night: .08;
  --stage-edge-blend: 4px;
}

body[data-time="manana"] {
  --ocean-top: #82e0e2;
  --ocean-mid: #4fc6d3;
  --ocean-deep: #2897b0;
  --ocean-glint: rgba(241, 255, 245, .58);
  --ocean-night: 0;
  --stage-edge-blend: 2px;
}

body[data-time="mediodia"] {
  --ocean-top: #78e5ea;
  --ocean-mid: #45c9dc;
  --ocean-deep: #2095b8;
  --ocean-glint: rgba(255, 255, 225, .68);
  --ocean-night: 0;
  --stage-edge-blend: 2px;
}

body[data-time="tarde"] {
  --ocean-top: #6fd8dc;
  --ocean-mid: #45bdcb;
  --ocean-deep: #268ea8;
  --ocean-glint: rgba(255, 247, 210, .56);
  --ocean-night: 0;
  --stage-edge-blend: 3px;
}

body[data-time="atardecer"] {
  --ocean-top: #87c9d0;
  --ocean-mid: #4da9bd;
  --ocean-deep: #327a9c;
  --ocean-glint: rgba(255, 222, 188, .58);
  --ocean-night: .12;
  --stage-edge-blend: 5px;
}

body[data-time="noche"] {
  --ocean-top: #346c91;
  --ocean-mid: #24567e;
  --ocean-deep: #163b64;
  --ocean-glint: rgba(211, 232, 255, .38);
  --ocean-night: .64;
  --stage-edge-blend: 8px;
}

.stage {
  position: relative;
  z-index: 4;
  width: min(100vw, calc(100svh * 941 / 1672));
  max-width: 941px;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  isolation: isolate;
  background: #173f22;
  box-shadow:
    0 0 34px rgba(22, 123, 139, .28),
    0 16px 48px rgba(8, 82, 105, .23);
  user-select: none;
}

.pokemon-layer,
.link-layer,
.cameo-layer,
.music-minimized,
.music-panel,
.gallery-trigger {
  transition: opacity 220ms ease;
}

body.is-booting .pokemon-layer,
body.is-booting .link-layer,
body.is-booting .cameo-layer,
body.is-booting .music-minimized,
body.is-booting .music-panel,
body.is-booting .gallery-trigger {
  opacity: 0;
  pointer-events: none;
}

body.is-booting .pokemon-unit,
body.is-booting .cameo-unit,
body.is-booting .logo-hotspot,
body.is-booting .music-action,
body.is-booting .gallery-trigger {
  pointer-events: none;
}

.boot-curtain {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
  background:
    linear-gradient(108deg, transparent 35%, rgba(235, 255, 255, .18) 47%, rgba(255, 255, 255, .24) 50%, rgba(218, 251, 255, .13) 54%, transparent 67%),
    rgba(80, 194, 205, .07);
  backdrop-filter: blur(1px) brightness(1.03);
  transition: opacity 260ms ease, visibility 0s linear 260ms;
  pointer-events: none;
}

body:not(.is-booting) .boot-curtain {
  opacity: 0;
  visibility: hidden;
}

.boot-pulse {
  width: 5px;
  height: 5px;
  background: #fff4bd;
  box-shadow:
    -9px 0 #caf8ff,
    9px 0 #ffe0ef,
    0 -9px #ffffff,
    0 9px #c5f3e8;
  animation: bootPulse 1.05s steps(6, end) infinite;
}

.scene-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast));
  transition: filter 1200ms ease;
  pointer-events: none;
}

.time-light-layer,
.time-effects-layer {
  position: absolute;
  inset: 0;
  contain: paint;
  pointer-events: none;
}

.time-light-layer {
  z-index: 3;
  opacity: 0;
  transition: opacity 1200ms ease, background 1200ms ease;
}

.time-light-layer[data-light="island-midnight"] {
  --lantern-low: .865;
  --lantern-high: .98;
  opacity: var(--lantern-low);
  background:
    radial-gradient(circle at 41% 16%, rgba(255, 208, 96, .56) 0 .65%, transparent 4.4%),
    radial-gradient(circle at 62% 16%, rgba(255, 208, 96, .56) 0 .65%, transparent 4.4%),
    radial-gradient(circle at 33% 25.5%, rgba(255, 195, 75, .48) 0 .62%, transparent 4%),
    radial-gradient(circle at 70% 25.5%, rgba(255, 195, 75, .48) 0 .62%, transparent 4%),
    radial-gradient(circle at 32.5% 49%, rgba(255, 190, 67, .46) 0 .65%, transparent 4.2%),
    radial-gradient(circle at 70% 49%, rgba(255, 190, 67, .46) 0 .65%, transparent 4.2%),
    radial-gradient(circle at 30% 84%, rgba(255, 196, 78, .45) 0 .65%, transparent 4.3%),
    radial-gradient(circle at 70% 84%, rgba(255, 196, 78, .45) 0 .65%, transparent 4.3%),
    radial-gradient(ellipse at 50% 51%, rgba(86, 132, 205, .13), transparent 46%),
    linear-gradient(180deg, rgba(25, 42, 92, .16), rgba(8, 18, 49, .28));
  animation: lanternBreath 4.8s steps(6, end) infinite;
}

.time-light-layer[data-light="island-night"] {
  --lantern-low: .771;
  --lantern-high: .918;
  opacity: var(--lantern-low);
  background:
    radial-gradient(circle at 41% 16%, rgba(255, 211, 105, .48) 0 .65%, transparent 4.2%),
    radial-gradient(circle at 62% 16%, rgba(255, 211, 105, .48) 0 .65%, transparent 4.2%),
    radial-gradient(circle at 33% 25.5%, rgba(255, 198, 80, .40) 0 .62%, transparent 3.8%),
    radial-gradient(circle at 70% 25.5%, rgba(255, 198, 80, .40) 0 .62%, transparent 3.8%),
    radial-gradient(circle at 32.5% 49%, rgba(255, 193, 72, .38) 0 .65%, transparent 4%),
    radial-gradient(circle at 70% 49%, rgba(255, 193, 72, .38) 0 .65%, transparent 4%),
    radial-gradient(circle at 30% 84%, rgba(255, 200, 84, .37) 0 .65%, transparent 4.1%),
    radial-gradient(circle at 70% 84%, rgba(255, 200, 84, .37) 0 .65%, transparent 4.1%),
    linear-gradient(180deg, rgba(51, 76, 139, .13), rgba(16, 30, 73, .25));
  animation: lanternBreath 5.4s steps(6, end) infinite;
}

.time-light-layer[data-light="island-mist"] {
  opacity: .64;
  background:
    linear-gradient(168deg, transparent 11%, rgba(202, 230, 235, .19) 25%, transparent 40%),
    linear-gradient(174deg, transparent 45%, rgba(177, 218, 227, .18) 58%, transparent 73%),
    radial-gradient(ellipse at 50% 51%, rgba(195, 231, 238, .16), transparent 34%);
}

.time-light-layer[data-light="island-sunrise"] {
  opacity: .67;
  background:
    linear-gradient(145deg, rgba(255, 229, 180, .31), transparent 29%),
    radial-gradient(ellipse at 88% 5%, rgba(255, 179, 125, .31), transparent 40%),
    linear-gradient(180deg, rgba(255, 197, 205, .10), transparent 48%);
}

.time-light-layer[data-light="island-morning"] {
  opacity: .32;
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 253, 191, .26) 0 1%, transparent 7%),
    radial-gradient(circle at 76% 43%, rgba(255, 248, 183, .20) 0 1.2%, transparent 8%),
    radial-gradient(circle at 34% 75%, rgba(255, 248, 183, .18) 0 1%, transparent 7%);
}

.time-light-layer[data-light="island-noon"] {
  opacity: .45;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 211, .31) 0 1.2%, transparent 7%),
    radial-gradient(circle at 74% 44%, rgba(255, 253, 198, .27) 0 1.4%, transparent 8%),
    radial-gradient(circle at 37% 76%, rgba(255, 250, 184, .25) 0 1.1%, transparent 7%),
    linear-gradient(180deg, rgba(255, 246, 185, .09), transparent 46%);
}

.time-light-layer[data-light="island-breeze"] {
  opacity: .50;
  background:
    linear-gradient(153deg, rgba(255, 206, 121, .22), transparent 42%, rgba(248, 153, 103, .14)),
    repeating-linear-gradient(168deg, transparent 0 23px, rgba(255, 244, 196, .08) 24px 25px, transparent 26px 47px);
}

.time-light-layer[data-light="island-sunset"] {
  --lantern-low: .639;
  --lantern-high: .762;
  opacity: var(--lantern-low);
  background:
    radial-gradient(circle at 41% 16%, rgba(255, 187, 74, .36) 0 .65%, transparent 4%),
    radial-gradient(circle at 62% 16%, rgba(255, 187, 74, .36) 0 .65%, transparent 4%),
    radial-gradient(circle at 32.5% 49%, rgba(255, 178, 65, .31) 0 .65%, transparent 3.8%),
    radial-gradient(circle at 70% 49%, rgba(255, 178, 65, .31) 0 .65%, transparent 3.8%),
    linear-gradient(155deg, rgba(255, 151, 95, .28), transparent 44%, rgba(139, 77, 150, .18));
  animation: lanternBreath 6.2s steps(6, end) infinite;
}

.time-effects-layer {
  z-index: 8;
  overflow: hidden;
}

.time-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  image-rendering: pixelated;
  will-change: transform, opacity;
}

.particle-firefly {
  background: #fff27a;
  box-shadow: 0 0 0 1px rgba(255, 216, 73, .82), 0 0 8px rgba(255, 231, 110, .96);
  animation: fireflyFloat var(--duration) steps(9, end) var(--delay) infinite;
}

.particle-moonMote {
  width: 2px;
  height: 2px;
  background: #c9dcff;
  box-shadow: 4px 0 #a8c9ff, -3px 3px #d6e4ff;
  animation: moteRise var(--duration) linear var(--delay) infinite;
}

.particle-mist {
  width: 78px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0 5%,
    rgba(207, 230, 233, .15) 15%,
    rgba(207, 230, 233, .58) 37%,
    rgba(224, 239, 236, .42) 58%,
    rgba(224, 239, 236, .13) 83%,
    transparent 96% 100%
  );
  animation: mistPass var(--duration) linear var(--delay) infinite;
}

.particle-dew,
.particle-sunGlint,
.particle-waterGlint {
  width: 4px;
  height: 4px;
  background: #eaffff;
  box-shadow: -4px 0 #bcefff, 4px 0 #fff5b7, 0 -4px #f4ffff, 0 4px #9adfff;
  animation: pixelTwinkle var(--duration) steps(5, end) var(--delay) infinite;
}

.particle-sunGlint {
  background: #fffbd0;
  box-shadow: -4px 0 #ffe57b, 4px 0 #fff5a9, 0 -4px #fffbd0, 0 4px #ffd66d;
}

.particle-waterGlint {
  width: 6px;
  height: 2px;
  background: #f4ffff;
  box-shadow: -5px 0 #a9efff, 5px 0 #d9f9ff, 0 3px rgba(255, 255, 255, .72);
  animation: waterGlint var(--duration) steps(7, end) var(--delay) infinite;
}

.particle-pollen {
  width: 4px;
  height: 4px;
  background: #ffe77d;
  box-shadow: 3px 2px #fff2ad;
  animation: pollenDrift var(--duration) linear var(--delay) infinite;
}

.particle-butterfly {
  width: 4px;
  height: 4px;
  background: #44265c;
  box-shadow: -3px -1px #ff9fd4, 3px -1px #a9d8ff, -3px 2px #ffcfec, 3px 2px #d1eeff;
  animation: butterflyDance var(--duration) steps(10, end) var(--delay) infinite;
}

.particle-leaf,
.particle-goldLeaf,
.particle-petal {
  width: 8px;
  height: 5px;
  background: #7cc447;
  border: 1px solid rgba(35, 92, 38, .58);
  animation: windDrift var(--duration) linear var(--delay) infinite;
}

.particle-goldLeaf { background: #f2b94f; border-color: rgba(130, 68, 31, .62); }
.particle-petal { background: #ff9db9; border-color: rgba(160, 62, 89, .54); }

.ambient-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  background:
    radial-gradient(circle at 48% 38%, color-mix(in srgb, var(--ambient) 15%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--ambient) 32%, transparent), transparent 62%);
  mix-blend-mode: var(--ambient-mode);
  opacity: var(--ambient-strength);
  contain: paint;
  transition: opacity 1200ms ease, background 1200ms ease;
  pointer-events: none;
}

.pokemon-layer,
.cameo-layer,
.link-layer {
  position: absolute;
  inset: 0;
}

.pokemon-layer { z-index: 4; pointer-events: none; }
.cameo-layer { z-index: 7; overflow: hidden; pointer-events: none; }
.link-layer { z-index: 12; pointer-events: none; }

.pokemon-unit {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
}

.pokemon-unit::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  bottom: 3%;
  width: 64%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(24, 41, 33, .42) 0 48%, transparent 72%);
  transform-origin: center;
  pointer-events: none;
}

.pokemon-unit::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.pokemon-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 1px 0 rgba(31, 35, 38, .28));
  transform-origin: 50% 84%;
  backface-visibility: hidden;
  z-index: 1;
  pointer-events: none;
}

.pokemon-facing {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  transform-origin: 50% 84%;
  pointer-events: none;
}

.pokemon-unit[data-mirrored="true"] .pokemon-facing {
  transform: scaleX(-1);
}

.pokemon-effect {
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--effect-width, 60px);
  height: auto;
  left: var(--effect-left, 38px);
  top: var(--effect-top, -22px);
  opacity: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation));
  animation: none;
  transform-origin: 40% 80%;
  pointer-events: none;
}

.pokemon-unit[data-habitat="air"]::before,
.pokemon-unit[data-habitat="ghost"]::before {
  left: 27%;
  bottom: -15%;
  width: 46%;
  height: 9%;
  opacity: .52;
  filter: blur(.35px);
  animation: airShadow 3.4s ease-in-out infinite;
}

.pokemon-unit:is([data-pokemon="wingull"], [data-pokemon="butterfree"])::before {
  display: none;
}

.pokemon-unit[data-habitat="air"]::after {
  left: 7%;
  top: 36%;
  width: 15%;
  height: 2px;
  opacity: .42;
  background: #e8fbff;
  box-shadow: -7px 6px 0 rgba(222, 248, 255, .65), 3px 12px 0 rgba(255, 255, 255, .5);
  animation: airTrail 3.2s steps(7, end) infinite;
}

.pokemon-unit[data-habitat="water"]::before {
  left: 5%;
  bottom: 3%;
  width: 90%;
  height: 18%;
  border: 2px solid rgba(229, 253, 255, .78);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(74, 190, 224, .33);
  animation: waterRipple 2.7s steps(8, end) infinite;
}

.pokemon-unit[data-habitat="water"]::after,
.pokemon-unit[data-habitat="pool-edge"]::after {
  right: 7%;
  bottom: 17%;
  width: 3px;
  height: 3px;
  opacity: .72;
  background: #f1ffff;
  box-shadow: 7px -4px 0 #b8edff, -6px -2px 0 #d8f8ff, 2px -8px 0 #ffffff;
  animation: splashBits 2.4s steps(6, end) infinite;
}

.pokemon-unit[data-habitat="ghost"]::after {
  inset: 8% 4% 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(184, 91, 255, .22), transparent 65%);
  filter: blur(2px);
  animation: ghostAura 3.6s steps(8, end) infinite;
}

.pokemon-unit[data-favorite="true"] .pokemon-sprite {
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 0 3px rgba(255, 221, 239, .58));
}

.pokemon-unit[data-pokemon="mew"]::after {
  left: 18%;
  top: 9%;
  width: 3px;
  height: 3px;
  opacity: .78;
  background: #ffd8ef;
  box-shadow: 36px 4px 0 #fff1fa, -7px 27px 0 #f9b8df, 45px 34px 0 #ffe4f3;
  animation: favoriteMotes 4.2s steps(8, end) infinite;
}

.pokemon-unit[data-pokemon="chikorita"] {
  --effect-width: 45px; --effect-left: -26px; --effect-top: -1px;
}
.pokemon-unit[data-pokemon="haunter"] {
  --effect-width: 48px; --effect-left: -8px; --effect-top: 18px;
}
.pokemon-unit[data-pokemon="glameow"] {
  --effect-width: 43px; --effect-left: -2px; --effect-top: -2px;
}
.pokemon-unit[data-pokemon="chatot"] {
  --effect-width: 40px; --effect-left: -5px; --effect-top: -14px;
}
.pokemon-unit[data-pokemon="pikachu"] {
  --effect-width: 46px; --effect-left: -6px; --effect-top: -12px;
}
.pokemon-unit[data-pokemon="eevee"] {
  --effect-width: 44px; --effect-left: 9px; --effect-top: -12px;
}
.pokemon-unit[data-pokemon="marill"] {
  --effect-width: 42px; --effect-left: -6px; --effect-top: -10px;
}
.pokemon-unit[data-pokemon="togepi"] {
  --effect-width: 38px; --effect-left: 5px; --effect-top: -14px;
}

.pokemon-unit[data-motion="garden"],
.pokemon-unit[data-motion="hedge-roam"],
.pokemon-unit[data-motion="bench-roam"],
.pokemon-unit[data-motion="sand-roam"] {
  animation: residentRoam 7.4s steps(10, end) infinite;
}

.pokemon-unit[data-motion="plaza-play"],
.pokemon-unit[data-motion="shore-play"],
.pokemon-unit[data-motion="garden-splash"] {
  animation: residentPlay 5.8s steps(8, end) infinite;
}

.pokemon-unit[data-motion="coast-flight"] { animation: coastFlight 8.4s ease-in-out infinite; }
.pokemon-unit[data-motion="garden-flight"] { animation: gardenFlight 6.2s ease-in-out infinite; }
.pokemon-unit[data-motion="plaza-float"] { animation: verticalFloat 5.6s ease-in-out infinite; }
.pokemon-unit[data-motion="mew-flight"] { animation: mewFlight 7.6s ease-in-out infinite; }
.pokemon-unit[data-motion="neon-haunt"] { animation: ghostDrift 6.8s ease-in-out infinite; }
.pokemon-unit[data-motion="swim-left"] { animation: swimLeft 7.2s ease-in-out infinite; }
.pokemon-unit[data-motion="swim-right"] { animation: swimRight 6.6s ease-in-out infinite; }
.pokemon-unit[data-motion="splash-play"] .pokemon-sprite { animation: waterBob 2.8s ease-in-out infinite; }

.pokemon-unit[data-habitat="air"] .pokemon-sprite,
.pokemon-unit[data-habitat="ghost"] .pokemon-sprite {
  animation: airBodyFloat 3.4s ease-in-out infinite;
}

.pokemon-unit[data-habitat="water"] .pokemon-sprite {
  animation: waterBob 2.7s ease-in-out infinite;
}

.pokemon-unit[data-pokemon="pikachu"] { animation-delay: -1.3s; }
.pokemon-unit[data-pokemon="eevee"] { animation-delay: -3.7s; }
.pokemon-unit[data-pokemon="chikorita"] { animation-delay: -2.1s; }
.pokemon-unit[data-pokemon="growlithe"] { animation-delay: -5.3s; }
.pokemon-unit[data-pokemon="phanpy"] { animation-delay: -6.2s; }
.pokemon-unit[data-pokemon="sandshrew"] { animation-delay: -4.4s; }

.stage:is([data-time="medianoche"], [data-time="madrugada"], [data-time="noche"]) .pokemon-unit {
  animation-duration: 8.8s;
}

.pokemon-unit.is-pressed .pokemon-sprite {
  animation: pokemonReact 520ms steps(5, end) 1;
}

.pokemon-unit.is-bursting .pokemon-effect {
  animation: effectTap 1250ms steps(7, end) 1;
}

.cameo-unit {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  isolation: isolate;
  will-change: transform, opacity;
}

.cameo-sprite {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 1px 0 rgba(22, 31, 37, .32));
  transform-origin: 50% 82%;
  pointer-events: none;
}

.cameo-unit::before,
.cameo-unit::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.cameo-unit[data-category="ghost-phase"]::before {
  inset: 9% 3% 1%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(185, 112, 255, .36), rgba(107, 73, 190, .12) 48%, transparent 72%);
  filter: blur(2px);
  animation: cameoAura 2.2s steps(7, end) infinite;
}

.cameo-unit[data-category="ghost-phase"]::after,
.cameo-unit[data-category="teleport"]::after {
  left: 14%;
  top: 14%;
  width: 3px;
  height: 3px;
  background: #f6deff;
  box-shadow: 29px -6px #bbfff7, -6px 23px #d7b5ff, 36px 32px #ffffff, 10px 43px #ffcff0;
  animation: cameoSparkle 1.4s steps(6, end) infinite;
}

.cameo-unit[data-category="teleport"]::before {
  left: 8%;
  right: 8%;
  bottom: -5%;
  height: 24%;
  border: 2px solid rgba(255, 224, 251, .88);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(109, 219, 255, .29), 0 0 10px rgba(255, 152, 225, .54);
  animation: cameoPortal 1.1s steps(7, end) infinite;
}

.cameo-unit[data-category="sky-pass"]::after {
  left: -18%;
  top: 52%;
  width: 10px;
  height: 2px;
  opacity: .55;
  background: #eafdff;
  box-shadow: -9px 6px rgba(219, 248, 255, .72), -18px -4px rgba(255, 255, 255, .48);
  animation: cameoAirTrail .9s steps(5, end) infinite;
}

.cameo-unit[data-category="water-rise"]::before {
  left: -3%;
  right: -3%;
  bottom: 0;
  height: 17%;
  border: 2px solid rgba(228, 255, 255, .85);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(63, 190, 225, .30);
  animation: cameoWaterRing 1.6s steps(7, end) infinite;
}

.cameo-unit[data-category="water-rise"]::after {
  right: 2%;
  bottom: 22%;
  width: 3px;
  height: 3px;
  background: #f4ffff;
  box-shadow: 7px -5px #b9efff, -8px -2px #dffaff, 2px -11px #fff;
  animation: splashBits 1.8s steps(6, end) infinite;
}

.cameo-unit[data-category="burrow"]::before {
  left: 5%;
  right: 5%;
  bottom: -1%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(111, 67, 34, .54) 0 44%, rgba(222, 166, 83, .68) 46% 62%, transparent 68%);
  box-shadow: -7px -2px #d9a35e, 9px 1px #f2c980;
  animation: cameoSand 1.35s steps(6, end) infinite;
}

.cameo-unit[data-category="glitch"]::before {
  inset: -4%;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(104, 255, 217, .54) 18% 22%, transparent 23% 61%, rgba(255, 121, 231, .46) 62% 67%, transparent 68%),
    linear-gradient(180deg, transparent 0 29%, rgba(226, 255, 131, .48) 30% 34%, transparent 35% 73%, rgba(116, 213, 255, .48) 74% 78%, transparent 79%);
  animation: cameoGlitchBits .72s steps(5, end) infinite;
}

.cameo-unit.is-active[data-category="ghost-phase"] {
  animation: cameoGhostPhase var(--cameo-duration) steps(18, end) both;
}

.cameo-unit.is-active[data-category="teleport"] {
  animation: cameoTeleport var(--cameo-duration) steps(16, end) both;
}

.cameo-unit.is-active[data-category="sky-pass"] {
  animation: cameoSkyPass var(--cameo-duration) linear both;
}

.cameo-unit.is-active[data-category="water-rise"] {
  animation: cameoWaterRise var(--cameo-duration) steps(18, end) both;
}

.cameo-unit.is-active[data-category="burrow"] {
  animation: cameoBurrow var(--cameo-duration) steps(18, end) both;
}

.cameo-unit.is-active[data-category="glitch"] {
  animation: cameoGlitch var(--cameo-duration) steps(20, end) both;
}

.cameo-unit:is([data-category="ghost-phase"], [data-category="teleport"], [data-category="sky-pass"]) .cameo-sprite {
  animation: cameoBodyFloat 2.1s ease-in-out infinite;
}

.cameo-unit.is-tapped .cameo-sprite {
  animation: cameoTap 520ms steps(5, end) 1;
}

.logo-hotspot {
  position: absolute;
  display: block;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.logo-hotspot::after,
.music-action::after,
.music-minimized::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  opacity: 0;
  background: #fff8b9;
  box-shadow:
    -13px -9px 0 #fff8b9,
    12px -11px 0 #c9ff9a,
    -10px 12px 0 #ffe57f,
    13px 10px 0 #fff8b9;
  transform: translate(-50%, -50%) scale(.35);
  pointer-events: none;
}

.logo-hotspot.is-pressed::after,
.logo-hotspot:focus-visible::after,
.music-action.is-pressed::after,
.music-minimized.is-pressed::after {
  animation: logoSpark 440ms steps(5, end) 1;
}

.music-minimized,
.music-panel,
.music-action {
  position: absolute;
}

.music-minimized {
  z-index: 14;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.music-minimized-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 2px 2px rgba(32, 28, 24, .38));
  animation: musicInvite 4.8s steps(8, end) infinite;
  pointer-events: none;
}

.music-label-art {
  position: absolute;
  z-index: 3;
  left: -18%;
  top: -39%;
  display: block;
  width: 136%;
  height: auto;
  image-rendering: auto;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 1px 1px rgba(45, 29, 21, .42));
  pointer-events: none;
}

.music-minimized::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 19%;
  top: 18%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 192, 224, .32), transparent 68%);
  animation: musicAura 4.8s steps(8, end) infinite;
  pointer-events: none;
}

.music-panel[hidden],
.gallery-overlay[hidden] { display: none; }

.music-panel-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.music-panel {
  z-index: 15;
  overflow: visible;
}

.music-panel-art {
  position: absolute;
  inset: 0;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    drop-shadow(0 4px 5px rgba(2, 12, 6, .52));
}

.music-action {
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.music-minimize {
  position: absolute;
  z-index: 4;
  top: -22%;
  right: 1.5%;
  width: 10%;
  height: 34%;
  min-width: 18px;
  min-height: 13px;
  margin: 0;
  padding: 0;
  border: 1px solid #58341d;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2c779, #b97036);
  box-shadow: 0 1px 0 #ffdfa2 inset, 0 2px 2px rgba(31, 20, 13, .42);
  cursor: pointer;
}

.music-minimize::after {
  position: absolute;
  left: 23%;
  right: 23%;
  bottom: 28%;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: #35261e;
  box-shadow: 0 1px 0 rgba(255, 226, 164, .62);
}

.music-previous { left: 10.5%; top: 7%; width: 17%; height: 86%; }
.music-play { left: 31%; top: 7%; width: 17%; height: 86%; }
.music-pause { left: 52%; top: 7%; width: 17%; height: 86%; }
.music-next { left: 72.5%; top: 7%; width: 17%; height: 86%; }

.music-action:disabled {
  cursor: default;
}

.music-action:disabled::before {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  content: "";
  background: rgba(8, 15, 19, .18);
  pointer-events: none;
}

.gallery-trigger {
  position: absolute;
  z-index: 14;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(45, 29, 21, .38));
  animation: galleryInvite 5.7s steps(9, end) infinite;
}

.gallery-trigger-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter:
    brightness(var(--scene-brightness))
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast));
  pointer-events: none;
}

.gallery-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  opacity: 0;
  background: #fff8ce;
  box-shadow: -28px -7px #ffc9e6, 27px -8px #d0fff1, -24px 8px #fff0a8, 26px 9px #fff;
  transform: translate(-50%, -50%) scale(.4);
  pointer-events: none;
}

.gallery-trigger:is(:focus-visible, .is-pressed)::after {
  animation: logoSpark 480ms steps(5, end) 1;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 21;
  display: grid;
  place-items: center;
  background: rgba(13, 40, 49, .56);
  backdrop-filter: blur(1.5px) saturate(.92);
  animation: galleryOverlayIn 220ms ease-out both;
}

.gallery-dialog {
  position: relative;
  width: 70%;
  height: 70%;
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 8px 10px rgba(9, 35, 42, .52));
  animation: galleryCardIn 300ms steps(8, end) both;
  touch-action: pan-y;
}

.gallery-background,
.gallery-frame,
.gallery-portrait-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-background {
  z-index: 0;
  object-fit: cover;
  image-rendering: auto;
  border-radius: 3.4%;
  background: #efc486;
  pointer-events: none;
}

.gallery-portrait-stage {
  z-index: 1;
  display: grid;
  place-items: end center;
  padding: 7.5% 8.5% 8.5%;
  overflow: hidden;
  pointer-events: none;
}

.gallery-portrait {
  display: block;
  max-width: 86%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 2px rgba(54, 34, 28, .26));
  animation: galleryPortraitIn 240ms steps(7, end) both;
}

.gallery-portrait:not([src]) {
  display: none;
}

.gallery-frame {
  z-index: 3;
  object-fit: fill;
  image-rendering: auto;
  pointer-events: none;
}

.gallery-empty {
  align-self: center;
  max-width: 72%;
  margin: 0 0 8%;
  padding: 7% 5%;
  color: #593624;
  border: 2px solid #af6f42;
  border-radius: 4px;
  background: rgba(255, 230, 183, .90);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 220, .56);
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: clamp(7px, 2.2vw, 15px);
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

.gallery-control {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #4c2c23;
  border: 2px solid #70422a;
  border-radius: 50%;
  background: #f4c57f;
  box-shadow:
    inset 0 0 0 2px #ffe6ad,
    0 2px 0 #684532;
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}

.gallery-control[hidden],
.gallery-counter[hidden],
.gallery-empty[hidden] {
  display: none;
}

.gallery-control:is(:hover, :focus-visible) {
  color: #281a1a;
  background: #ffd69b;
  transform: translateY(-1px);
}

.gallery-control:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px #ffe6ad;
}

.gallery-close {
  top: 1.6%;
  right: 1.7%;
  width: 12%;
  aspect-ratio: 1;
  font-size: clamp(13px, 4.2vw, 28px);
}

.gallery-previous,
.gallery-next {
  top: 47%;
  width: 12%;
  aspect-ratio: 1;
  font-size: clamp(16px, 5vw, 34px);
}

.gallery-previous { left: 2.3%; }
.gallery-next { right: 2.3%; }

.gallery-counter {
  position: absolute;
  left: 50%;
  bottom: 2.1%;
  z-index: 5;
  min-width: 24%;
  padding: 1.6% 2.4%;
  color: #4c2c23;
  border: 2px solid #70422a;
  border-radius: 3px;
  background: #f4c57f;
  box-shadow: inset 0 0 0 1px #ffe6ad;
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: clamp(7px, 2.1vw, 14px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

body[data-gallery="open"] .gallery-trigger,
body[data-gallery="open"] .music-minimized,
body[data-gallery="open"] .music-panel {
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes cameoGhostPhase {
  0%, 100% { opacity: 0; transform: translateY(10%) scale(.68); filter: blur(3px); }
  10% { opacity: .18; }
  20%, 76% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  88% { opacity: .34; transform: translateY(-8%) scale(.88); filter: blur(1px); }
}

@keyframes cameoTeleport {
  0%, 100% { opacity: 0; transform: translateY(16%) scale(.18); filter: brightness(2.2) blur(3px); }
  13% { opacity: .85; transform: translateY(6%) scale(.72); }
  22%, 78% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  88% { opacity: .72; transform: translateY(-2%) scale(.58); filter: brightness(1.8) blur(1px); }
}

@keyframes cameoSkyPass {
  0% { opacity: 0; transform: translate3d(0, 8px, 0); }
  7%, 90% { opacity: 1; }
  48% { transform: translate3d(var(--cameo-travel-mid-x), var(--cameo-travel-mid-y), 0); }
  100% { opacity: 0; transform: translate3d(var(--cameo-travel-x), var(--cameo-travel-y), 0); }
}

@keyframes cameoWaterRise {
  0%, 100% { opacity: 0; transform: translateY(52%) scale(.82); }
  14% { opacity: .75; }
  23%, 76% { opacity: 1; transform: translateY(0) scale(1); }
  88% { opacity: .62; transform: translateY(30%) scale(.93); }
}

@keyframes cameoBurrow {
  0%, 100% { opacity: 0; transform: translateY(74%) scaleY(.55); }
  14% { opacity: .72; }
  23%, 74% { opacity: 1; transform: translateY(0) scaleY(1); }
  88% { opacity: .66; transform: translateY(48%) scaleY(.74); }
}

@keyframes cameoGlitch {
  0%, 4%, 100% { opacity: 0; transform: translate(7px, -3px) scale(.75); clip-path: inset(48% 0 48% 0); }
  8% { opacity: .6; transform: translate(-5px, 2px) scale(.92); clip-path: inset(28% 0 37% 0); }
  13% { opacity: .35; transform: translate(4px, -2px) scale(1.04); clip-path: inset(63% 0 8% 0); }
  20%, 76% { opacity: 1; transform: translate(0) scale(1); clip-path: inset(0); }
  82% { opacity: .42; transform: translate(-6px, 1px); clip-path: inset(11% 0 54% 0); }
  89% { opacity: .75; transform: translate(5px, -2px); clip-path: inset(57% 0 7% 0); }
}

@keyframes cameoBodyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}

@keyframes cameoAura {
  0%, 100% { opacity: .42; transform: scale(.82); }
  50% { opacity: .86; transform: scale(1.08); }
}

@keyframes cameoSparkle {
  0%, 100% { opacity: .18; transform: rotate(0deg) scale(.65); }
  45% { opacity: 1; transform: rotate(45deg) scale(1.1); }
}

@keyframes cameoPortal {
  0%, 100% { opacity: .35; transform: scaleX(.62); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

@keyframes cameoAirTrail {
  0%, 100% { opacity: .18; transform: translateX(6px); }
  50% { opacity: .68; transform: translateX(-4px); }
}

@keyframes cameoWaterRing {
  0%, 100% { opacity: .20; transform: scale(.58); }
  56% { opacity: .90; transform: scale(1.08); }
}

@keyframes cameoSand {
  0%, 100% { opacity: .35; transform: scaleX(.72); }
  52% { opacity: .82; transform: scaleX(1.05); }
}

@keyframes cameoGlitchBits {
  0%, 100% { opacity: .18; transform: translate(0); }
  25% { opacity: .72; transform: translate(-5px, 2px); }
  50% { opacity: .35; transform: translate(4px, -3px); }
  75% { opacity: .64; transform: translate(2px, 3px); }
}

@keyframes cameoTap {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-12%) scale(1.12); filter: brightness(1.35); }
}

@keyframes galleryInvite {
  0%, 82%, 100% { transform: translateY(0); }
  88% { transform: translateY(-5%); }
  92% { transform: translateY(2%); }
  96% { transform: translateY(-2%); }
}

@keyframes galleryOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes galleryCardIn {
  0% { opacity: 0; transform: scale(.82) translateY(4%); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes galleryPortraitIn {
  0% { opacity: 0; transform: translateY(3%) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pokemonTwoFrame {
  0%, 49.9% { background-position: 0 0; }
  50%, 100% { background-position: 100% 0; }
}

@keyframes pokemonHop {
  0%, 100% { transform: translateY(0); }
  46% { transform: translateY(-5px); }
}

@keyframes effectIdle {
  0%, 2%, 18%, 100% { opacity: 0; transform: translateY(5px) scale(.72); }
  5%, 12% { opacity: .88; transform: translateY(-3px) scale(1); }
  16% { opacity: 0; transform: translateY(-8px) scale(1.05); }
}

@keyframes effectTap {
  0% { opacity: 0; transform: translateY(4px) scale(.65); }
  24%, 72% { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1.08); }
}

@keyframes logoSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  30%, 66% { opacity: .98; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes playmateWander {
  0%, 100% { transform: translate(0, 0); }
  24% { transform: translate(2px, -2px); }
  48% { transform: translate(4px, 0); }
  72% { transform: translate(1px, 2px); }
}

@keyframes residentRoam {
  0%, 100% { transform: translate(0, 0); }
  24% { transform: translate(2px, -1px); }
  50% { transform: translate(5px, 0); }
  76% { transform: translate(2px, 2px); }
}

@keyframes residentPlay {
  0%, 100% { transform: translate(0, 0); }
  32% { transform: translate(-2px, 1px); }
  58% { transform: translate(2px, -3px); }
  78% { transform: translate(4px, 0); }
}

@keyframes coastFlight {
  0%, 100% { transform: translate(-7px, 2px); }
  50% { transform: translate(10px, -5px); }
}

@keyframes gardenFlight {
  0%, 100% { transform: translate(-3px, 3px); }
  28% { transform: translate(4px, -5px); }
  64% { transform: translate(7px, 2px); }
}

@keyframes verticalFloat {
  0%, 100% { transform: translate(0, 4px); }
  50% { transform: translate(3px, -7px); }
}

@keyframes mewFlight {
  0%, 100% { transform: translate(-7px, 3px); }
  28% { transform: translate(5px, -7px); }
  62% { transform: translate(10px, 1px); }
  82% { transform: translate(2px, 6px); }
}

@keyframes ghostDrift {
  0%, 100% { transform: translate(-4px, 2px); }
  50% { transform: translate(6px, -6px); }
}

@keyframes swimLeft {
  0%, 100% { transform: translate(1px, 1px); }
  50% { transform: translate(9px, -2px); }
}

@keyframes swimRight {
  0%, 100% { transform: translate(1px, -2px); }
  50% { transform: translate(-2px, 2px); }
}

@keyframes airBodyFloat {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-5px); }
}

@keyframes waterBob {
  0%, 100% { transform: translateY(1px) rotate(-.4deg); }
  50% { transform: translateY(-3px) rotate(.6deg); }
}

@keyframes airShadow {
  0%, 100% { transform: scale(.82); opacity: .35; }
  50% { transform: scale(1.08); opacity: .55; }
}

@keyframes airTrail {
  0%, 100% { opacity: 0; transform: translateX(7px); }
  32%, 72% { opacity: .5; transform: translateX(-3px); }
}

@keyframes waterRipple {
  0% { opacity: .22; transform: scale(.72); }
  55% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.13); }
}

@keyframes splashBits {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(.6); }
  36% { opacity: .84; transform: translateY(-3px) scale(1); }
  70% { opacity: .2; transform: translateY(-7px) scale(.82); }
}

@keyframes ghostAura {
  0%, 100% { opacity: .24; transform: scale(.88); }
  50% { opacity: .6; transform: scale(1.06); }
}

@keyframes favoriteMotes {
  0%, 100% { opacity: .18; transform: translate(0, 3px) scale(.7); }
  42% { opacity: .88; transform: translate(4px, -5px) scale(1); }
  74% { opacity: .4; transform: translate(-3px, -9px) scale(.82); }
}

@keyframes pokemonReact {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-7px) scale(1.04); }
}

@keyframes lanternBreath {
  0%, 100% { opacity: var(--lantern-low); }
  50% { opacity: var(--lantern-high); }
}

@keyframes fireflyFloat {
  0%, 100% { opacity: 0; transform: translate(0, 5px) scale(.7); }
  16% { opacity: .94; }
  42% { opacity: .42; transform: translate(calc(var(--drift) * .45), calc(var(--rise) * -.45)) scale(1); }
  68% { opacity: .90; }
  86% { opacity: .18; transform: translate(var(--drift), calc(var(--rise) * -1)) scale(.82); }
}

@keyframes moteRise {
  0% { opacity: 0; transform: translate(0, 12px); }
  18%, 68% { opacity: .58; }
  100% { opacity: 0; transform: translate(var(--drift), calc(var(--rise) * -1)); }
}

@keyframes mistPass {
  0% { opacity: 0; transform: translateX(-72px) scaleX(.78); }
  20%, 72% { opacity: .52; }
  100% { opacity: 0; transform: translateX(86px) scaleX(1.12); }
}

@keyframes pixelTwinkle {
  0%, 100% { opacity: 0; transform: scale(.55); }
  38% { opacity: .88; transform: scale(1); }
  58% { opacity: .18; transform: scale(.72); }
}

@keyframes waterGlint {
  0%, 100% { opacity: 0; transform: translateX(-3px) scaleX(.55); }
  32% { opacity: .92; transform: translateX(0) scaleX(1); }
  62% { opacity: .24; transform: translateX(5px) scaleX(.7); }
}

@keyframes musicInvite {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  46% { transform: translateY(-2px) rotate(-1deg); }
  54% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes musicAura {
  0%, 100% { opacity: .16; transform: scale(.82); }
  50% { opacity: .72; transform: scale(1.12); }
}

@keyframes pollenDrift {
  0% { opacity: 0; transform: translate(-18px, 14px); }
  18%, 75% { opacity: .78; }
  100% { opacity: 0; transform: translate(var(--drift), calc(var(--rise) * -1)); }
}

@keyframes butterflyDance {
  0% { opacity: 0; transform: translate(-12px, 9px) scaleX(.55); }
  18%, 78% { opacity: .82; }
  36% { transform: translate(calc(var(--drift) * .35), -8px) scaleX(1); }
  62% { transform: translate(calc(var(--drift) * .7), 6px) scaleX(.55); }
  100% { opacity: 0; transform: translate(var(--drift), -13px) scaleX(1); }
}

@keyframes windDrift {
  0% { opacity: 0; transform: translate(-52px, -10px) rotate(0deg); }
  12%, 82% { opacity: .88; }
  48% { transform: translate(calc(var(--drift) * .55), 11px) rotate(calc(var(--turn) * .55)); }
  100% { opacity: 0; transform: translate(calc(var(--drift) + 62px), 24px) rotate(var(--turn)); }
}

@keyframes seaRipples {
  0% { opacity: .20; transform: translate3d(-1%, -.4%, 0) scale(1); }
  100% { opacity: .34; transform: translate3d(1%, .5%, 0) scale(1.03); }
}

@keyframes oceanStars {
  0%, 100% { opacity: calc(var(--ocean-night) * .76); transform: translateY(0); }
  50% { opacity: var(--ocean-night); transform: translateY(-2px); }
}

@keyframes bootPulse {
  0%, 100% { opacity: .34; transform: scale(.62) rotate(0deg); }
  48% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (min-width: 700px) {
  .scene-backdrop { opacity: .13; }

  .ocean-extension {
    background:
      linear-gradient(180deg, rgba(220, 255, 255, .035), rgba(25, 103, 140, .055)),
      url("assets/scene/v12-ocean/liz-ocean-desktop-v12.webp") center / 104% 104% no-repeat;
  }

  .stage {
    border-radius: 0;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--stage-edge-blend),
      #000 calc(100% - var(--stage-edge-blend)),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--stage-edge-blend),
      #000 calc(100% - var(--stage-edge-blend)),
      transparent 100%
    );
    box-shadow:
      0 0 48px rgba(34, 159, 170, .24),
      0 22px 62px rgba(7, 78, 103, .28);
  }

  body:is([data-time="medianoche"], [data-time="madrugada"], [data-time="noche"]) .stage {
    box-shadow: none;
  }

  .ocean-extension::before { opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .pokemon-effect { display: none; }
  .time-particle,
  .pokemon-unit,
  .pokemon-sprite,
  .time-light-layer {
    animation: none !important;
  }

  .cameo-unit.is-active {
    opacity: .92;
    transform: none !important;
    animation: none !important;
  }

  .cameo-unit::before,
  .cameo-unit::after,
  .cameo-sprite,
  .gallery-trigger,
  .gallery-dialog,
  .gallery-overlay,
  .gallery-portrait {
    animation: none !important;
  }

  .time-particle { opacity: .22; }

  .ocean-extension,
  .ocean-extension::before,
  .ocean-extension::after,
  .boot-pulse {
    animation: none !important;
  }
}