/*
  ApuMon starter site.
  Colors are sampled from "ApuMon Logo.png" (yellow / green / navy / red shadow)
  and "media kit/Image1.png" (sky / grass / sandy path).
  Title font: "Pokemon Solid" from dafont.com/pokemon.font, converted to WOFF2.
*/

@font-face {
  font-family: "Pokemon Solid";
  src: url("../fonts/pokemon-solid.woff2") format("woff2");
  font-display: swap;
}

:root {
  --navy: #24446d;
  --yellow: #fad342;
  --green: #468c08;
  --red: #e04540;
  --cream: #fff6dc;
  --sky-top: #0aa6ee;
  --sky-bottom: #9adcf8;
  --hill: #8ccf5f;
  --meadow: #5aad2a;
  --sand-light: #fdd286;
  --sand: #fcbd53;
  --forest: #2f6d16;

  --pad: 16px;
  --mon-h: clamp(96px, min(26vh, 17vw), 230px);

  /* Hero encounter timeline */
  --t-logo: .1s;
  --t-flash: .6s;
  --t-pan: .95s;
  --t-reveal: 1.9s;
  --t-text: 2.5s;
  --t-cue: 3.3s;

  --ease-pan: cubic-bezier(.15, .75, .25, 1);
  --ease-pop: cubic-bezier(.25, 1.4, .45, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--sky-top); }

body {
  margin: 0;
  color: var(--navy);
  font-family: ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }

a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 14px; }

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

/* ---------- Pokemon-style title text: yellow fill, navy outline, red drop shadow ---------- */

.poke {
  --o: .075em;   /* outline width */
  --sx: .045em;  /* drop shadow offset */
  --sy: .08em;
  max-width: 100%;
  margin: 0;
  font-family: "Pokemon Solid", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: normal;
  font-size: clamp(2rem, min(6.2vw, 8.5vh), 4.6rem);
  line-height: 1.25;
  letter-spacing: .07em;
  color: var(--yellow);
  text-align: center;
  /* A ring of hard shadows reads like the logo's rounded outline in every browser. */
  text-shadow:
    calc(var(--o) * 1.0) 0 0 var(--navy),
    calc(var(--o) * 0.924) calc(var(--o) * 0.383) 0 var(--navy),
    calc(var(--o) * 0.707) calc(var(--o) * 0.707) 0 var(--navy),
    calc(var(--o) * 0.383) calc(var(--o) * 0.924) 0 var(--navy),
    0 calc(var(--o) * 1.0) 0 var(--navy),
    calc(var(--o) * -0.383) calc(var(--o) * 0.924) 0 var(--navy),
    calc(var(--o) * -0.707) calc(var(--o) * 0.707) 0 var(--navy),
    calc(var(--o) * -0.924) calc(var(--o) * 0.383) 0 var(--navy),
    calc(var(--o) * -1.0) 0 0 var(--navy),
    calc(var(--o) * -0.924) calc(var(--o) * -0.383) 0 var(--navy),
    calc(var(--o) * -0.707) calc(var(--o) * -0.707) 0 var(--navy),
    calc(var(--o) * -0.383) calc(var(--o) * -0.924) 0 var(--navy),
    0 calc(var(--o) * -1.0) 0 var(--navy),
    calc(var(--o) * 0.383) calc(var(--o) * -0.924) 0 var(--navy),
    calc(var(--o) * 0.707) calc(var(--o) * -0.707) 0 var(--navy),
    calc(var(--o) * 0.924) calc(var(--o) * -0.383) 0 var(--navy),
    calc(var(--o) * 0.5) 0 0 var(--navy),
    calc(var(--o) * 0.354) calc(var(--o) * 0.354) 0 var(--navy),
    0 calc(var(--o) * 0.5) 0 var(--navy),
    calc(var(--o) * -0.354) calc(var(--o) * 0.354) 0 var(--navy),
    calc(var(--o) * -0.5) 0 0 var(--navy),
    calc(var(--o) * -0.354) calc(var(--o) * -0.354) 0 var(--navy),
    0 calc(var(--o) * -0.5) 0 var(--navy),
    calc(var(--o) * 0.354) calc(var(--o) * -0.354) 0 var(--navy),
    var(--sx) var(--sy) 0 var(--red),
    calc(var(--o) * 1.0 + var(--sx)) var(--sy) 0 var(--red),
    calc(var(--o) * 0.866 + var(--sx)) calc(var(--o) * 0.5 + var(--sy)) 0 var(--red),
    calc(var(--o) * 0.5 + var(--sx)) calc(var(--o) * 0.866 + var(--sy)) 0 var(--red),
    var(--sx) calc(var(--o) * 1.0 + var(--sy)) 0 var(--red),
    calc(var(--o) * -0.5 + var(--sx)) calc(var(--o) * 0.866 + var(--sy)) 0 var(--red),
    calc(var(--o) * -0.866 + var(--sx)) calc(var(--o) * 0.5 + var(--sy)) 0 var(--red),
    calc(var(--o) * -1.0 + var(--sx)) var(--sy) 0 var(--red),
    calc(var(--o) * -0.866 + var(--sx)) calc(var(--o) * -0.5 + var(--sy)) 0 var(--red),
    calc(var(--o) * -0.5 + var(--sx)) calc(var(--o) * -0.866 + var(--sy)) 0 var(--red),
    var(--sx) calc(var(--o) * -1.0 + var(--sy)) 0 var(--red),
    calc(var(--o) * 0.5 + var(--sx)) calc(var(--o) * -0.866 + var(--sy)) 0 var(--red),
    calc(var(--o) * 0.866 + var(--sx)) calc(var(--o) * -0.5 + var(--sy)) 0 var(--red);
}
.poke .g { color: var(--green); }
/* Red fill with a white drop shadow (the shadow list reads --red), like a Poké-ball */
.poke--red { --red: #fff; color: #e04540; }

/* Letters split by main.js. Each word is one unbreakable block, so lines wrap only at spaces. */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }

/* ---------- Scroll-down arrows ---------- */

.cue { display: inline-block; padding: 8px 14px; }
.cue svg { width: 52px; height: auto; overflow: visible; }
.chev path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chev__shadow { stroke: var(--red); stroke-width: 12px; transform: translate(2px, 3px); }
.chev__ink { stroke: var(--navy); stroke-width: 12px; }
.chev__fill { stroke: var(--yellow); stroke-width: 5px; }

/* ---------- Buttons and chips: yellow sticker pills like the logo ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  font-family: "Pokemon Solid", sans-serif;
  font-size: 1.15rem;
  letter-spacing: .05em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  background: var(--yellow);
  border: 3px solid var(--navy);
  border-radius: 999px;
  box-shadow: 3px 5px 0 var(--red);
  cursor: pointer;
  transition: transform .2s var(--ease-pop), box-shadow .2s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 4px 8px 0 var(--red); }
.btn:active { transform: translateY(2px); box-shadow: 1px 2px 0 var(--red); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn svg { flex: none; width: 1.1em; height: 1.1em; fill: currentColor; }
.btn--sm { height: 40px; padding: 0 16px; font-size: .95rem; box-shadow: 2px 4px 0 var(--red); }
.btn--lg {
  /* may wrap onto two lines on narrow phones with large text */
  max-width: 100%;
  height: auto;
  min-height: 60px;
  padding: 8px 30px;
  font-size: 1.35rem;
  line-height: 1.2;
  white-space: normal;
}


.notice {
  margin: 10px auto 0;
  padding: 3px 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  background: rgba(255, 246, 220, .75);
  border-radius: 12px;
  text-wrap: balance;
}

.navpill { position: absolute; z-index: 4; top: 14px; }
.navpill--dex { right: 14px; }
.navpill--home { left: 14px; }

/* ---------- Hero: sky, hills and the wild encounter ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vh, 28px);
  padding: clamp(20px, 5vh, 56px) var(--pad) clamp(96px, 14vh, 130px);
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 75%);
}

.sky { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) / 2);
  overflow: visible;
}
.cloud--far { opacity: .8; }

.logo {
  position: relative;
  z-index: 3;
  width: clamp(240px, min(50vw, 58vh), 600px);
  margin: 0;
}
.logo::before {
  /* Soft white halo behind the logo, as in Image1.png */
  content: "";
  position: absolute;
  inset: -40% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, .4) 55%, rgba(255, 255, 255, 0));
}
.logo img { width: 100%; }

.field {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vh, 30px);
}
.field > .poke { position: relative; z-index: 3; }

.meadow {
  background: var(--meadow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='140'%3E%3Cg fill='none' stroke='%234c9c21' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 46c-1-6-4-10-8-12M26 46c0-7 1-12 4-16M30 46c2-5 5-8 9-9'/%3E%3Cpath d='M118 106c-1-6-4-10-8-12M122 106c0-7 1-12 4-16M126 106c2-5 5-8 9-9'/%3E%3Cpath d='M148 36c-1-4-3-7-6-8M151 36c0-5 1-8 3-11M154 36c1-3 3-5 6-6'/%3E%3C/g%3E%3C/svg%3E");
}

.ground {
  position: absolute;
  z-index: 1;
  top: calc(var(--mon-h) * .62);
  bottom: -100vh;
  left: calc(var(--pad) * -1);
  right: calc(var(--pad) * -1);
}
.ground__hills {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: clamp(48px, 7vw, 110px);
}
.hill-back { fill: var(--hill); }
.hill-front { fill: var(--meadow); }
.hill-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.deco {
  position: absolute;
  z-index: 2;
  bottom: clamp(18px, 5vh, 56px);
  width: clamp(60px, 9vw, 132px);
  height: auto;
  overflow: visible;
}
.deco--shrooms { left: clamp(10px, 5vw, 96px); }
.deco--flowers { right: clamp(10px, 5vw, 96px); }
.ink path, .ink circle { stroke: var(--navy); stroke-width: 3; stroke-linejoin: round; }
.shroom-cap { fill: var(--red); }
.shroom-stem, .shroom-spots { fill: var(--cream); }
.flower-stem { fill: none; stroke: #2f7a12; stroke-width: 4; stroke-linecap: round; }
.flower-petals circle { fill: var(--yellow); }
.flower-petals--red circle { fill: var(--red); }
.flower-petals .flower-center { fill: #f39a2b; }
.flower-petals .flower-center--yellow { fill: var(--yellow); }

.party {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 3vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mon__slide { display: grid; justify-items: center; isolation: isolate; }
.mon__bob, .mon__hop { position: relative; }
.mon__hop { transform-origin: 50% 100%; }
.mon__img { position: relative; height: var(--mon-h); width: auto; max-width: none; }
.mon__burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 6px solid #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.mon__platform {
  /* Battle platform: a sandy patch like the path in Image1.png */
  position: relative;
  z-index: -1;
  width: calc(var(--mon-h) * .95);
  height: calc(var(--mon-h) * .24);
  margin-top: calc(var(--mon-h) * -.13);
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fde6ae 55%, #f7c669 58%);
  box-shadow: 0 4px 0 rgba(36, 68, 109, .25);
}
.mon__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 52%;
  translate: -50% -55%;
  border-radius: 50%;
  background: rgba(36, 68, 109, .3);
}

.cue--hero {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(12px, 3vh, 28px);
  translate: -50% 0;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

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

.section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(56px, 9vh, 104px) var(--pad) clamp(36px, 6vh, 64px);
  text-align: center;
}
.section > .cue { display: block; width: fit-content; margin: clamp(28px, 5vh, 52px) auto 0; }

.trailer { padding-top: clamp(40px, 7vh, 80px); }

.tv {
  position: relative;
  width: min(100%, 880px);
  margin: clamp(28px, 5vh, 48px) auto 0;
  padding: 12px 12px 8px;
  background: var(--cream);
  border: 4px solid var(--navy);
  border-radius: 24px;
  box-shadow: 7px 9px 0 var(--red);
}
.tv__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
}
.tv__caption { margin: 8px 0 0; font-size: .85rem; font-weight: 700; }
.tv__caption a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  color: var(--navy);
  text-decoration: none;
}
.tv__caption a:hover { text-decoration: underline; }
.tv__caption svg { width: 13px; height: 13px; fill: currentColor; }

.soon {
  padding-top: clamp(84px, 13vh, 150px);
  padding-bottom: clamp(56px, 9vh, 100px);
  /* Sandy path bulging into the meadow above */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='40'%3E%3Cpath d='M0 0H300V22C250 22 200 8 150 8S50 22 0 22Z' fill='%235aad2a'/%3E%3Cpath d='M0 22C50 22 100 8 150 8S250 22 300 22' fill='none' stroke='%2324446d' stroke-width='3'/%3E%3C/svg%3E") repeat-x top / 300px 40px,
    linear-gradient(var(--sand-light), var(--sand));
}

.pack {
  position: relative;
  width: fit-content;
  margin: clamp(32px, 6vh, 56px) auto 0;
}
.pack__glow {
  position: absolute;
  inset: -14% -55%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffcea, rgba(255, 220, 130, .85) 35%, rgba(255, 150, 60, .45) 58%, rgba(255, 120, 40, 0) 78%);
}
.pack__embers {
  position: absolute;
  inset: -10% -20% 0;
  z-index: 2;
  pointer-events: none;
}
.pack__embers i {
  position: absolute;
  left: var(--x);
  bottom: 14%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffc93a 45%, #ff5a14);
  box-shadow: 0 0 10px 3px rgba(255, 110, 20, .7);
  opacity: 0;
}
.pack__slide { position: relative; z-index: 1; }
.pack__float { filter: drop-shadow(0 20px 16px rgba(110, 50, 0, .3)); }
.pack__tilt {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease-out;
}
.pack__img { height: clamp(250px, 50vh, 421px); width: auto; }
.pack__shine {
  /* Glare sweep, clipped to the pack's body (inside the crimped foil edges) */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat;
  clip-path: inset(3% 1.5% round 4px);
}

/* ---------- Launch email signup (Netlify Forms) ---------- */

.signup {
  position: relative;
  z-index: 3;
  width: min(100%, 540px);
  margin: clamp(40px, 7vh, 64px) auto 0;
  padding: 28px clamp(18px, 5vw, 32px) 22px;
  background: var(--cream);
  border: 4px solid var(--navy);
  border-radius: 24px;
  box-shadow: 7px 9px 0 var(--red);
}
.poke--sm { font-size: clamp(1.3rem, 5vw, 2.1rem); text-wrap: balance; }
.signup__hp { display: none; }
.signup__text { max-width: 34em; margin: 12px auto 20px; font-size: 1.02rem; line-height: 1.5; }
.signup__row { display: flex; gap: 10px; }
.signup__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: #fff;
  border: 3px solid var(--navy);
  border-radius: 999px;
}
.signup__input::placeholder { color: rgba(36, 68, 109, .45); }
.signup__input:focus { outline: none; box-shadow: 0 0 0 4px var(--yellow); }
.signup__input[aria-invalid="true"] { border-color: var(--red); }
.signup__btn { flex: none; }
.signup__error { min-height: 1.4em; margin: 8px 0 0; font-size: .92rem; font-weight: 700; color: #c0322c; }

.toast {
  /* Pops up just under the Notify button, straddling the card's bottom edge */
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% - 26px);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 20px 10px 10px;
  text-align: left;
  font-weight: 700;
  color: var(--navy);
  background: var(--cream);
  border: 3px solid var(--navy);
  border-radius: 18px;
  box-shadow: 4px 6px 0 var(--red);
  translate: -50% 0;
  transform: translateY(-14px) scale(.9);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s var(--ease-pop), opacity .3s, visibility 0s .45s;
}
.toast.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .45s var(--ease-pop), opacity .3s;
}
.toast img { flex: none; width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-shown { transition: none; }
}

/* ---------- Homepage Apudex teaser: a parade of frens ---------- */

.parade {
  --gap: clamp(28px, 4vw, 56px);
  margin: clamp(20px, 4vh, 40px) calc(var(--pad) * -1) clamp(28px, 4vh, 44px);
  padding: 22px 0 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.parade__track {
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  width: max-content;
  padding-right: var(--gap); /* keeps the looped copy evenly spaced */
}
.parade__mon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: clamp(130px, 18vw, 220px);
}
.parade__mon img { height: 100%; width: auto; transform-origin: 50% 100%; }
.parade__mon::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12%;
  right: 12%;
  bottom: -7px;
  height: 14px;
  border-radius: 50%;
  background: rgba(36, 68, 109, .28);
}

/* ---------- Apudex page ---------- */

.dex-hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 76px var(--pad) clamp(76px, 10vw, 140px);
  text-align: center;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}
.dex-hero__logo { position: relative; z-index: 2; width: clamp(200px, 30vw, 330px); margin-bottom: 4px; }
.dex-hero__logo img { width: 100%; }
.dex-hero .reveal,
.dex-hero .notice { position: relative; z-index: 2; }
.dex-hero__hills {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(44px, 6vw, 92px);
}

.dex { padding: clamp(24px, 4vh, 48px) var(--pad) clamp(72px, 10vh, 120px); }
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.dex-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 10px 14px;
  text-align: center;
  background: var(--cream);
  border: 4px solid var(--navy);
  border-radius: 22px;
  box-shadow: 5px 7px 0 var(--red);
  transition: transform .35s var(--ease-pop), box-shadow .35s var(--ease-pop);
}
.dex-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, #fff 0 35%, #e2f4fd 70%, #c8ecfc);
}
.dex-card__no {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--cream);
  background: var(--navy);
  border-radius: 999px;
}
.dex-card__platform {
  /* sandy battle platform; its middle lines up with the ApuMon's feet */
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 68%;
  height: 15%;
  translate: -50% 0;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fde6ae 55%, #f7c669 58%);
}
.dex-card__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 52%;
  translate: -50% -55%;
  border-radius: 50%;
  background: rgba(36, 68, 109, .3);
}
.dex-card__img {
  position: absolute;
  z-index: 1;
  left: 9%;
  top: 9%;
  width: 82%;
  height: 76.5%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
}
.dex-card__name {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.dex-card__get { width: 100%; margin-top: auto; }

@media (hover: hover) {
  .dex-card:hover,
  .dex-card:focus-within { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 8px 14px 0 var(--red); }
  .dex-card:nth-child(even):hover,
  .dex-card:nth-child(even):focus-within { transform: translateY(-8px) rotate(1.5deg); }
}

/* ---------- Footer socials ---------- */

.footer {
  padding: 96px var(--pad) 28px;
  text-align: center;
  color: var(--cream);
  /* Bushes growing out of the sand above */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 0H160V40A26 26 0 0 0 110 32 28 28 0 0 0 58 34 30 30 0 0 0 0 40Z' fill='%23fcbd53'/%3E%3Cpath d='M0 40A30 30 0 0 1 58 34 28 28 0 0 1 110 32 26 26 0 0 1 160 40' fill='none' stroke='%2324446d' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x top / 160px 56px,
    var(--forest);
}
.footer--meadow {
  /* Apudex page: bushes growing out of the meadow above */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 0H160V40A26 26 0 0 0 110 32 28 28 0 0 0 58 34 30 30 0 0 0 0 40Z' fill='%235aad2a'/%3E%3Cpath d='M0 40A30 30 0 0 1 58 34 28 28 0 0 1 110 32 26 26 0 0 1 160 40' fill='none' stroke='%2324446d' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x top / 160px 56px,
    var(--forest);
}
.footer a:focus-visible { outline-color: var(--cream); }

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 5vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.social {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.social__icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 4px solid var(--navy);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 4px 6px 0 var(--red);
  transition: transform .3s var(--ease-pop), background-color .2s, box-shadow .3s;
}
.social__icon svg { width: 30px; height: 30px; fill: var(--navy); transition: fill .2s; }
.social:hover .social__icon,
.social:focus-visible .social__icon {
  background: var(--brand);
  transform: translateY(-6px) rotate(-8deg);
  box-shadow: 5px 12px 0 var(--red);
}
.social:hover svg,
.social:focus-visible svg { fill: #fff; }
.social__label {
  font-family: "Pokemon Solid", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
}

.fineprint {
  max-width: 48em;
  margin: 36px auto 0;
  font-size: .8rem;
  opacity: .8;
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  :root { --mon-h: clamp(84px, 33vw, 170px); }
  .logo { width: min(80vw, 340px); }
  .party {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: clamp(20px, 8vw, 48px);
    row-gap: 6px;
  }
  .deco { width: 54px; }
  .hero { padding-top: 66px; } /* room for the Apudex button */
  .dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dex-card { padding: 8px 8px 12px; border-width: 3px; box-shadow: 4px 5px 0 var(--red); }
  .dex-card__get { padding: 0 10px; }
}

@media (max-width: 460px) {
  .signup__row { flex-direction: column; }
  .signup__input { flex: none; }
  .socials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 300px;
    margin-inline: auto;
    gap: 26px 12px;
  }
}

/* ---------- Motion (skipped entirely for reduced-motion users) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .cloud { left: 0; animation: drift var(--d) linear var(--delay) infinite; }

  .cue svg { animation: cue-bob .9s ease-in-out infinite alternate; }
  .chev { animation: cue-pulse 1.2s ease-in-out calc(var(--k) * .18s) infinite; }

  /* Hero: hidden until main.js adds .is-ready, then a wild encounter plays out */
  .js .logo { opacity: 0; }
  .js .mon__slide { transform: translateX(calc(-100vw - 100%)); }
  .js .mon__img { filter: brightness(0); }
  .js .hero .poke { transform: translateX(calc(100vw + 100%)); }
  .js .cue--hero { opacity: 0; }

  .is-ready .logo { animation: logo-drop .8s var(--ease-pop) var(--t-logo) both; }
  .is-ready .flash { animation: flash .7s linear var(--t-flash) both; }
  .is-ready .mon__slide { animation: pan-left .9s var(--ease-pan) calc(var(--t-pan) + (3 - var(--n)) * 80ms) both; }
  .is-ready .mon__img { animation: reveal .55s ease-out calc(var(--t-reveal) + var(--n) * 150ms) both; }
  .is-ready .mon__burst { animation: burst .6s ease-out calc(var(--t-reveal) + var(--n) * 150ms + .2s) forwards; }
  .is-ready .mon__bob { animation: bob var(--bob) ease-in-out calc(var(--t-reveal) + var(--n) * 150ms + .55s) infinite alternate both; }
  .is-ready .mon__shadow { animation: shadow var(--bob) ease-in-out calc(var(--t-reveal) + var(--n) * 150ms + .55s) infinite alternate both; }
  .is-ready .hero .poke { animation: pan-right .85s var(--ease-pop) var(--t-text) both; }
  .is-ready .hero .poke .ch { animation: wave 2.4s ease-in-out calc(var(--t-text) + .85s + var(--i) * 70ms) infinite; }
  .is-ready .cue--hero { animation: fade-in .6s ease var(--t-cue) both; }
  .mon__hop.is-hopping { animation: hop .6s ease-out; }

  /* Sections: main.js adds .io, then .is-in as each block scrolls into view */
  .io .reveal:not(.is-in) > .poke { transform: translateX(calc(100vw + 100%)); }
  .io .reveal.is-in > .poke { animation: pan-right .85s var(--ease-pop) both; }
  .io .reveal.is-in > .poke .ch { animation: wave 2.4s ease-in-out calc(.85s + var(--i) * 70ms) infinite; }

  .io .reveal:not(.is-in) > .tv { transform: translateX(calc(-100vw - 100%)); }
  .io .reveal.is-in > .tv { animation: pan-left 1s var(--ease-pan) .15s both; }

  .pack__float { animation: float 3.4s ease-in-out infinite alternate; }
  .pack__glow { animation: glow 3.2s ease-in-out infinite alternate; }
  .pack__shine { animation: shine 5s ease-in-out 2s infinite; }
  .pack__embers i { animation: ember var(--t) ease-in var(--d) infinite; }
  .io .reveal:not(.is-in) .pack__slide { transform: translateX(calc(-100vw - 100%)); }
  .io .reveal:not(.is-in) .pack__glow,
  .io .reveal:not(.is-in) .pack__embers { opacity: 0; }
  .io .reveal:not(.is-in) .pack__shine { animation: none; }
  .io .reveal.is-in .pack__slide { animation: pan-left 1s var(--ease-pan) .15s both; }
  .io .reveal.is-in .pack__shine { animation: shine 5s ease-in-out 2.2s infinite; }
  .io .reveal.is-in .pack__glow { animation: fade-in .8s ease 1.2s both, glow 3.2s ease-in-out 1.2s infinite alternate; }
  .io .reveal.is-in .pack__embers { animation: fade-in .6s ease 1.4s both; }

  .io .reveal:not(.is-in) > .signup { opacity: 0; }
  .io .reveal.is-in > .signup { animation: rise .7s var(--ease-pop) .2s both; }

  .parade.is-looping .parade__track { animation: parade 60s linear infinite; }
  .parade:hover .parade__track { animation-play-state: paused; }
  .parade__mon img { animation: parade-hop .9s ease-in-out calc(var(--k) * -.23s) infinite alternate; }

  .io .dex-card:not(.is-in) { opacity: 0; transform: translateY(40px); }
  .io .dex-card.is-in { animation: rise .6s var(--ease-pop) var(--d, 0s) backwards; }
  .dex-card__img.is-hopping { animation: hop .6s ease-out; }

  .io .socials:not(.is-in) .social__icon { transform: scale(0); }
  .io .socials.is-in .social__icon { animation: pop .55s var(--ease-pop) calc(var(--k) * 90ms) backwards; }
}

/* Apudex: the hovered fren keeps bouncing on its platform (mouse and trackpad only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dex-card:hover .dex-card__img { animation: dex-bounce .75s infinite; }
  .dex-card:hover .dex-card__shadow { animation: dex-shadow .75s infinite; }
}

@keyframes drift {
  from { transform: translateX(calc(-1 * var(--w) - 40px)); }
  to { transform: translateX(calc(100vw + 40px)); }
}
@keyframes logo-drop {
  0% { opacity: 0; transform: translateY(-60px) scale(.85); }
  60% { opacity: 1; transform: translateY(6px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes flash {
  0%, 36%, 100% { opacity: 0; }
  18%, 58% { opacity: .85; }
}
@keyframes pan-left {
  from { transform: translateX(calc(-100vw - 100%)); }
  to { transform: none; }
}
@keyframes pan-right {
  from { transform: translateX(calc(100vw + 100%)); }
  to { transform: none; }
}
@keyframes reveal {
  /* silhouette -> bright flash -> full color */
  0% { filter: brightness(0); transform: none; }
  55% { filter: brightness(2.2); transform: scale(1.08); }
  100% { filter: none; transform: none; }
}
@keyframes burst {
  from { opacity: 1; transform: scale(.3); }
  to { opacity: 0; transform: scale(1.6); }
}
@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--mon-h) * -.07)); }
}
@keyframes shadow {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(.75); opacity: .55; }
}
@keyframes hop {
  0% { transform: none; }
  15% { transform: scale(1.1, .88); }
  42% { transform: translateY(-24%) scale(.94, 1.07); }
  68% { transform: scale(1.08, .92); }
  84% { transform: scale(.97, 1.03); }
  100% { transform: none; }
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.1em); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cue-bob {
  from { transform: translateY(-4px); }
  to { transform: translateY(8px); }
}
@keyframes cue-pulse {
  0%, 100% { opacity: .5; }
  45% { opacity: 1; }
}
@keyframes float {
  from { transform: translateY(0) rotate(-1.5deg); }
  to { transform: translateY(-16px) rotate(1.5deg); }
}
@keyframes glow {
  from { transform: scale(.92); }
  to { transform: scale(1.08); }
}
@keyframes shine {
  0%, 55% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -280px) scale(.3); }
}
@keyframes pop {
  0% { transform: scale(0) rotate(-20deg); }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@keyframes parade {
  to { transform: translateX(-50%); }
}
@keyframes parade-hop {
  from { transform: translateY(0); }
  to { transform: translateY(-9%); }
}
@keyframes dex-bounce {
  0%, 100% { transform: translateY(0) scale(1.06, .94); animation-timing-function: ease-out; }
  45% { transform: translateY(-13%) scale(.96, 1.05); animation-timing-function: ease-in; }
  80% { transform: translateY(-2%) scale(.98, 1.02); animation-timing-function: ease-in; }
}
@keyframes dex-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(.7); opacity: .5; }
}