/* 0pad.fun pre-launch site
   Layout: one long scroll of themed "stations" (hero, countdown, 0pad ID, moon),
   each a full-bleed band with a wavy top edge and a centered 1180px track. */

:root {
  /* Brand, sampled from the 0p logo */
  --yolk: #FAEC7E;
  --yolk-hi: #FFF6B0;
  --yolk-deep: #E7CF55;
  --grape: #8B6CC0;
  --grape-hi: #AC8CF1;
  --grape-deep: #5E4598;

  /* Supporting cartoon palette */
  --ink: #2A1B4A;
  --ink-soft: #54467A;
  --paper: #FFFFFF;
  --cream: #FFF9E6;
  --lilac: #EEE5FF;
  --night: #3A2870;
  --night-2: #4A3787;
  --night-deep: #1E1340;
  --pink: #FF8FB8;
  --pink-deep: #E2487F;
  --mint: #7FE3C4;
  --sky: #8FD3FF;
  --orange: #FFB36B;
  --moon: #FFF4CC;
  --gold: #F2C94C;
  --gold-hi: #FFE89A;
  --guilloche: #E6DCFB;
  --dot: rgba(42, 27, 74, .09);

  /* Type */
  --font-display: 'Fredoka', 'Baloo 2', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Shape and motion */
  --bw: 3px;
  --radius: 26px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: max(18px, env(safe-area-inset-left, 0px));
  --gutter-r: max(18px, env(safe-area-inset-right, 0px));
  --nav-top: calc(12px + env(safe-area-inset-top, 0px));

  color-scheme: light;
}

/* ---------- Fonts (self-hosted so the page, the share image and the server render match) ---------- */
@font-face { font-family: 'Fredoka'; src: url('/assets/fonts/Fredoka_500Medium.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/assets/fonts/Fredoka_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/assets/fonts/Fredoka_700Bold.ttf') format('truetype'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/SpaceMono_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 500;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--grape-hi); color: var(--paper); }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 12px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--yolk); border: var(--bw) solid var(--ink); border-radius: 999px;
  padding: .5em 1em; font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 .35em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0 0 .35em;
}
.body-lg { font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 34em; color: var(--ink-soft); margin: 0; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding: .3em .85em;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-2deg);
}

/* Yellow face with the logo's purple extrusion, down and to the left */
.hl {
  color: var(--yolk);
  text-shadow:
    -1.5px -1.5px 0 var(--grape-deep), 1.5px -1.5px 0 var(--grape-deep),
    -1.5px 1.5px 0 var(--grape-deep), 1.5px 1.5px 0 var(--grape-deep),
    -.02em .02em 0 var(--grape), -.035em .035em 0 var(--grape),
    -.05em .05em 0 var(--grape), -.065em .065em 0 var(--grape),
    -.08em .08em 0 var(--grape-deep), -.09em .1em .12em rgba(42, 27, 74, .25);
}
.hl--ink {
  color: var(--grape-hi);
  text-shadow:
    -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink),
    -.02em .02em 0 var(--ink), -.035em .035em 0 var(--ink),
    -.05em .05em 0 var(--ink), -.065em .065em 0 var(--ink),
    -.08em .08em 0 var(--ink);
}

/* Split headings: each letter can jump */
.word { display: inline-block; white-space: nowrap; }
.ch {
  display: inline-block;
  transition: transform .45s var(--spring);
  will-change: transform;
}
.ch.is-jump { animation: chJump .6s var(--spring); }
@media (hover: hover) {
  .ch:hover { transform: translateY(-.14em) rotate(-7deg) scale(1.06); transition-duration: .18s; }
}
@keyframes chJump {
  0% { transform: none; }
  35% { transform: translateY(-.28em) rotate(-8deg) scale(1.08, .94); }
  65% { transform: translateY(.04em) scale(.96, 1.06); }
  100% { transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  --sh: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .01em;
  padding: .85em 1.35em;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--sh);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), background-color .2s;
  user-select: none;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 3px)); box-shadow: 0 8px 0 var(--sh); }
.btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 4px)); box-shadow: 0 1px 0 var(--sh); transition-duration: .06s; }
.btn--primary { background: var(--yolk); }
.btn--primary:hover { background: var(--yolk-hi); }
.btn--grape { background: var(--grape-hi); color: var(--paper); text-shadow: 0 2px 0 var(--grape-deep); }
.btn--grape:hover { background: #BBA0FA; }
.btn--lg { font-size: 1.15rem; padding: 1em 1.6em; }
.btn--sm { font-size: .95rem; padding: .65em 1.05em; box-shadow: 0 4px 0 var(--sh); }
.btn--block { width: 100%; }
.btn[disabled] {
  background: #EFEAF8;
  color: #9A90B6;
  border-color: #CFC6E3;
  box-shadow: 0 3px 0 #CFC6E3;
  text-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn.is-busy { opacity: .75; cursor: progress; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--lilac);
  cursor: pointer;
  transition: transform .2s var(--spring), background-color .2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { transform: rotate(-10deg) scale(1.08); background: var(--yolk); }
.icon-btn[aria-pressed="true"] { background: var(--mint); }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: calc(5px + env(safe-area-inset-top, 0px));
  z-index: 70;
  pointer-events: none;
}
.progress__bar {
  position: absolute; left: 0; bottom: 0;
  height: 5px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--grape) 0 14px, var(--grape-hi) 14px 28px);
}
.progress__rocket {
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 26px;
  height: 26px;
  transform: translateX(-13px) rotate(55deg);
  filter: drop-shadow(-2px 2px 0 var(--grape));
  opacity: 0;
  transition: opacity .3s;
}
.progress.is-on .progress__rocket { opacity: 1; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: 0; right: 0;
  z-index: 60;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  max-width: 1184px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 12px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .4s var(--spring), box-shadow .3s;
}
.nav.is-hidden .nav__inner { transform: translateY(calc(-100% - 30px)); }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__logo { width: 44px; height: auto; transition: transform .5s var(--spring); }
.brand:hover .brand__logo { transform: rotate(-14deg) scale(1.12); }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
.brand__tld { color: var(--grape); }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  padding: .45em .8em;
  border-radius: 999px;
  transition: background-color .2s, transform .25s var(--spring);
}
.nav__links a:hover { background: var(--lilac); transform: translateY(-2px) rotate(-2deg); }
.nav__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__links + .nav__tools { margin-left: 8px; }

.heat {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 8px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  transition: transform .25s var(--spring), background-color .2s;
}
.heat:hover { transform: translateY(-2px); background: var(--yolk-hi); }
.heat__flame { width: 24px; height: 24px; transform-origin: 50% 90%; animation: flicker 1.6s ease-in-out infinite; }
.heat__track {
  width: 64px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.heat__fill {
  display: block;
  height: 100%;
  width: var(--heat, 0%);
  background: linear-gradient(90deg, var(--yolk), var(--orange), var(--pink));
  border-radius: 999px;
  transition: width .8s var(--spring);
}
.heat__num { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; font-size: .95rem; }
.heat.is-bump { animation: bump .6s var(--spring); }
.heat.is-hot { background: var(--yolk); }
.heat.is-hot .heat__flame { animation-duration: .5s; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.12, .94) rotate(4deg); }
}
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-3deg); }
  100% { transform: scale(1); }
}

.quests {
  pointer-events: auto;
  position: absolute;
  right: var(--gutter-r);
  top: calc(100% + 14px);
  width: min(360px, calc(100vw - 36px));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 7px 0 var(--ink);
  padding: 18px;
  transform-origin: top right;
  animation: popIn .45s var(--spring);
}
@media (min-width: 1260px) {
  .quests { right: calc((100vw - 1184px) / 2); }
}
.quests__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0; }
.quests__sub { margin: .2em 0 .9em; color: var(--ink-soft); font-size: .95rem; line-height: 1.4; }
.quests__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quest {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--cream);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
}
.quest__box {
  width: 28px; height: 28px;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  display: grid;
  place-items: center;
}
.quest__box svg { width: 18px; height: 18px; opacity: 0; transform: scale(.3); transition: transform .4s var(--spring), opacity .2s; }
.quest__pts { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--grape-deep); font-variant-numeric: tabular-nums; }
.quest.is-done { background: #E6FFF6; }
.quest.is-done .quest__box { background: var(--mint); }
.quest.is-done .quest__box svg { opacity: 1; transform: scale(1); }
.quest.is-done .quest__name { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.quests__reset {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@keyframes popIn {
  from { transform: scale(.6) translateY(-10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(84px, 11vw, 150px); }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.has-wave::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -27px;
  height: 28px;
  background: var(--wave, var(--cream));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'%3E%3Cpath d='M0 28V14Q20 0 40 14T80 14T120 14T160 14V28Z'/%3E%3C/svg%3E") repeat-x bottom left / 160px 28px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'%3E%3Cpath d='M0 28V14Q20 0 40 14T80 14T120 14T160 14V28Z'/%3E%3C/svg%3E") repeat-x bottom left / 160px 28px;
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: a scroll container would break the sticky card */
  padding-top: calc(clamp(118px, 13vw, 150px) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(56px, 7vw, 96px);
  background-color: var(--cream);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.9px);
  background-size: 26px 26px;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}
.blob--a { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -6vw; background: var(--lilac); }
.blob--b { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: -10vw; bottom: -12vw; background: var(--yolk-hi); }
.blob--c { width: 14vw; height: 14vw; max-width: 200px; max-height: 200px; left: 42%; top: 58%; background: #FFE1EC; animation-delay: -9s; }
/* Stickers are fixed decoration in the side gutters; they never sit over content. */
.stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  transform: rotate(var(--r));
  transition: transform .4s var(--spring);
}
.sticker:hover { transform: rotate(calc(var(--r) - 10deg)) scale(1.08); }
.sticker__float { width: 100%; height: 100%; }
.sticker.is-pop .sticker__float { animation: stickerPop .6s var(--spring); }
.sticker svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(-4px 5px 0 var(--grape)); }
@keyframes stickerPop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.3) rotate(-16deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (max-width: 1379px) { .stickers { display: none; } }

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}
.hero__copy { min-width: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: .45em 1em .45em .8em;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
}
.chip__dot {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid var(--ink);
}
.chip__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--mint);
  animation: ping 1.8s var(--ease-out) infinite;
}
@keyframes ping {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.1rem, 7.6vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 24px;
}
.hero__title > span { display: block; }
.hero__line2 { white-space: nowrap; }

/* The brand 0 is a tall pill, like the logo; Fredoka and Nunito draw a round 0 that reads as an O.
   The real "0" stays in the text (pushed out of view) for copying and screen readers. */
.z0 {
  display: inline-block;
  box-sizing: border-box;
  width: .44em;
  height: .7em;
  margin: 0 .06em 0 .02em;
  border: .095em solid currentColor;
  border-radius: 1em;
  text-indent: 300%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: baseline;
}
.nw { white-space: nowrap; }
.chip .z0, .done__lead .z0, .eyebrow .z0 { border-width: .125em; }
.brand__word .z0, .marquee .z0 { border-width: .15em; }
.hl .z0, .footer__big .z0 {
  border-width: .145em;
  border-color: var(--yolk);
  box-shadow:
    0 0 0 1.5px var(--grape-deep), inset 0 0 0 1.5px var(--grape-deep),
    -.04em .04em 0 1.5px var(--grape), -.065em .065em 0 1.5px var(--grape-deep),
    inset -.045em .045em 0 1.5px var(--grape);
}
.footer__big .z0 { box-shadow: -.03em .03em 0 var(--grape), -.055em .055em 0 var(--grape-deep), inset -.04em .04em 0 var(--grape); }

.hero__lede { font-size: clamp(1.08rem, 1.45vw, 1.28rem); color: var(--ink-soft); max-width: 31em; margin: 0 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--grape-deep);
  transform: rotate(-2deg);
}
.hero__hint-arrow {
  order: 2;
  width: 54px;
  height: 30px;
  background: var(--grape-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22 C 14 4, 30 30, 46 10'/%3E%3Cpath d='M38 9 L47 9 L46 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22 C 14 4, 30 30, 46 10'/%3E%3Cpath d='M38 9 L47 9 L46 18'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Mascot */
.hero__stage { display: grid; justify-items: center; min-width: 0; }
.mascot {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 800 / 710;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.mascot:focus-visible .mascot__float { outline: 3px dashed var(--grape); outline-offset: 10px; border-radius: 40px; }
.mascot__float { position: absolute; inset: 0; animation: float 5.5s ease-in-out infinite; }
.mascot__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s var(--ease-out); }
.mascot__squish { position: absolute; inset: 0; transform-origin: 50% 95%; }
.mascot__squish.is-boop { animation: squish .7s var(--spring); }
.mascot__img { position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(-6px 14px 18px rgba(42, 27, 74, .18)); }
.mascot__shadow {
  position: absolute;
  left: 22%; right: 22%;
  bottom: -5%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 27, 74, .22), transparent);
  animation: shadow 5.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-18px) rotate(1.5deg); }
}
@keyframes shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.8); opacity: .6; }
}
@keyframes squish {
  0% { transform: scale(1, 1); }
  18% { transform: scale(1.14, .82); }
  40% { transform: scale(.9, 1.12) translateY(-6%); }
  62% { transform: scale(1.05, .95); }
  100% { transform: scale(1, 1); }
}

/* Eyes live behind the logo and peek through its holes */
.eye {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, var(--paper) 55%, #E4DBFA 100%);
}
.eye--0 { left: 21.2%; top: 24%; width: 13.4%; height: 43.6%; border-radius: 999px; }
.eye--p { left: 59.2%; top: 35.6%; width: 20.2%; height: 25.2%; border-radius: 50%; }
.pupil {
  position: absolute;
  left: 50%; top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  transition: transform .12s linear;
}
.eye--0 .pupil { width: 74%; }
.eye--p .pupil { width: 50%; }
.pupil::after {
  content: "";
  position: absolute;
  width: 32%; height: 32%;
  left: 18%; top: 16%;
  border-radius: 50%;
  background: var(--paper);
}
.lid {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: var(--grape);
  transition: height .07s ease-in;
}
.mascot.is-blink .lid { height: 100%; }
.mascot.is-happy .lid { height: 58%; transition-duration: .12s; }

.bubble {
  position: absolute;
  z-index: 3;
  left: -2%;
  top: 2%;
  padding: .55em 1em;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  white-space: nowrap;
  transform-origin: 80% 120%;
  transform: scale(0) rotate(-10deg);
  transition: transform .35s var(--spring);
  pointer-events: none;
}
.bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -12px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-right: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  transform: rotate(45deg) skew(10deg, 10deg);
}
.bubble.is-on { transform: scale(1) rotate(-4deg); }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-block: 40px 52px;
  margin-block: -36px -20px;
}
.marquee__band {
  width: 112%;
  margin-left: -6%;
  border-block: var(--bw) solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.marquee__band--a { background: var(--yolk); transform: rotate(-2deg); position: relative; z-index: 2; }
.marquee__band--b { background: var(--grape); color: var(--paper); transform: rotate(-2deg); margin-top: calc(var(--bw) * -1); }
.marquee__track { display: inline-flex; align-items: center; padding: .62em 0; will-change: transform; }
.marquee__unit { display: inline-flex; align-items: center; gap: .7em; padding-right: .7em; flex-shrink: 0; }
.marquee__track svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* ---------- Soon (slot machine) ---------- */
.soon { background: var(--lilac); --wave: var(--lilac); }
.soon__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.slot { position: relative; padding-right: 56px; max-width: 560px; justify-self: end; width: 100%; }
.slot__cabinet {
  position: relative;
  z-index: 1;
  background: var(--grape);
  border: var(--bw) solid var(--ink);
  border-radius: 30px;
  padding: 16px;
  box-shadow: -8px 10px 0 var(--grape-deep), -8px 10px 0 var(--bw) var(--ink);
}
.slot__marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--pink);
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  padding: .55em .8em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.82rem, 1.6vw, 1rem);
  letter-spacing: .1em;
}
.slot__name { white-space: nowrap; }
.slot__bulbs {
  flex: 1;
  height: 10px;
  min-width: 20px;
  background: radial-gradient(circle, var(--yolk) 3px, transparent 3.5px) 0 50% / 14px 10px repeat-x;
  animation: bulbs .5s steps(2) infinite;
}
.slot.is-spinning .slot__bulbs { animation-duration: .16s; }
@keyframes bulbs { to { background-position: 14px 50%; } }
.slot__window {
  --cell: clamp(64px, 9vw, 112px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
  padding: 11px;
  background: var(--ink);
  border-radius: 20px;
}
.reel {
  position: relative;
  height: var(--cell);
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(var(--paper), var(--cream));
}
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(42, 27, 74, .35), transparent 22%, transparent 78%, rgba(42, 27, 74, .35));
}
.reel__strip { will-change: transform; }
.reel__strip span {
  display: block;
  height: var(--cell);
  line-height: var(--cell);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--cell) * .64);
  color: var(--ink);
}
.reel.is-blur .reel__strip { filter: blur(1.4px); }
.slot__msg {
  min-height: 1.5em;
  margin: 14px 4px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  text-shadow: 0 2px 0 var(--grape-deep);
}
.slot__msg.is-new { animation: chJump .6s var(--spring); }
.slot.is-jackpot .slot__cabinet { animation: shake .5s linear 2; }

.lever {
  position: absolute;
  right: 0;
  top: 22%;
  width: 56px;
  height: 160px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lever__base {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 30px;
  height: 46px;
  background: var(--grape-hi);
  border: var(--bw) solid var(--ink);
  border-left: 0;
  border-radius: 0 14px 14px 0;
}
.lever__arm {
  position: absolute;
  left: 14px;
  bottom: 38px;
  width: 12px;
  height: 108px;
  background: linear-gradient(90deg, #D9D2EA, var(--paper) 40%, #C9C0E0);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  transform-origin: 50% 100%;
}
.lever__knob {
  position: absolute;
  left: 50%;
  top: -22px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFC3D8, var(--pink) 45%, var(--pink-deep));
  border: var(--bw) solid var(--ink);
}
.lever:hover .lever__arm { transform: rotate(8deg); transition: transform .3s var(--spring); }
.lever.is-pulled .lever__arm { animation: pull .8s var(--ease-out); }
@keyframes pull {
  0% { transform: scaleY(1); }
  30% { transform: scaleY(-.75); }
  45% { transform: scaleY(-.8); }
  80% { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- Form controls ---------- */
.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 6px;
  padding: 0;
}
.label__opt { font-weight: 500; color: var(--ink-soft); font-size: .85em; }
.hint { margin: 6px 0 14px; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.input {
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  padding: .8em 1em;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 3px 0 rgba(42, 27, 74, .08);
  outline: 0;
  transition: box-shadow .2s, transform .2s var(--spring);
}
.input::placeholder { color: #A59BBE; font-weight: 600; }
.input:focus { box-shadow: 0 0 0 4px var(--grape-hi); }
.input.is-error { border-color: var(--pink-deep); animation: shake .4s linear; }
.form-msg { margin: 0; min-height: 1.6em; font-weight: 800; font-size: .98rem; }
.form-msg.is-error { color: var(--pink-deep); }
.form-msg.is-ok { color: #1E7A5C; }
.panel .form-msg:empty { display: none; }
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-30deg) scale(2.4); }
  60% { opacity: 1; transform: rotate(-14deg) scale(.86); }
  100% { opacity: .92; transform: rotate(-16deg) scale(1); }
}

/* ---------- Early ID (the first screen) ---------- */
.hero { padding-bottom: clamp(70px, 8vw, 110px); }
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; column-gap: clamp(28px, 4vw, 64px); }
.hero__title { font-size: clamp(2.7rem, 6vw, 5.2rem); margin-bottom: 18px; }
.hero__lede { margin-bottom: 20px; max-width: 34em; }

.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin: 0 0 24px; padding: 0; list-style: none; }
.tally li {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px 11px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--ink);
}
.tally b { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tally span { font-size: .8rem; font-weight: 800; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tally li:nth-child(2) { background: linear-gradient(120deg, #FFE1EE, #DDF1FF 50%, #DDFBF0); }
.tally li:nth-child(3) { background: linear-gradient(120deg, var(--yolk-hi), #FFE2C2); }
.tally b.is-bump { animation: bump .5s var(--spring); }

.studio {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 28px;
  box-shadow: -8px 10px 0 var(--grape), -8px 10px 0 var(--bw) var(--ink);
}
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 4px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .25s var(--spring), background-color .2s, box-shadow .2s;
}
.stepper button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: .78rem;
}
.stepper button[aria-current="step"] { background: var(--yolk); box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.stepper button.is-done span { background: var(--mint); }
.stepper button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.panel { display: grid; gap: 14px; min-width: 0; animation: panelIn .45s var(--spring); }
@keyframes panelIn { from { transform: translateY(14px); opacity: 0; } }
.panel__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel__nav--end { justify-content: flex-end; }
.panel .hint { margin: 0; }

/* Rarity badge */
.tier {
  display: inline-block;
  padding: .32em .85em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.tier[data-tier="rare"] { background: var(--sky); }
.tier[data-tier="epic"] { background: var(--grape-hi); color: var(--paper); }
.tier[data-tier="legendary"] { background: linear-gradient(90deg, var(--yolk), var(--orange)); }
.tier[data-tier="mythic"] {
  background: linear-gradient(90deg, var(--pink), var(--sky), var(--mint), var(--yolk), var(--pink));
  background-size: 200% 100%;
  animation: holoShift 2.4s linear infinite;
}
@keyframes holoShift { to { background-position: 200% 0; } }
.tier.is-new { animation: chJump .6s var(--spring); }
.tier[data-tier="mythic"].is-new { animation: chJump .6s var(--spring), holoShift 2.4s linear infinite; }

/* Roller */
.roller { display: grid; gap: 12px; }
.roller__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.roller__odds { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.roller__odds b { color: var(--ink); }
.roller__count { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.roller__traits { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.roller__traits:empty { display: none; }
.roller__traits li { padding: .22em .62em; font-size: .78rem; font-weight: 800; line-height: 1.3; white-space: nowrap; border-radius: 999px; background: var(--lilac); }
.roller__traits li small { font-weight: 700; color: var(--ink-soft); }
.roller__traits li.is-rare { background: var(--yolk); box-shadow: inset 0 0 0 1.5px var(--ink); }
.roller__btn svg { width: 1.35em; height: 1.35em; }
.roller__btn.is-rolling svg { animation: spin .45s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.roller__history { display: flex; gap: 8px; min-height: 58px; overflow-x: auto; padding: 4px 4px 6px; scrollbar-width: thin; }
.roller__history:empty { display: none; }
.roller__history button {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 13px;
  background: var(--paper);
  cursor: pointer;
  transition: transform .25s var(--spring);
}
.roller__history button:hover { transform: translateY(-3px) rotate(-4deg); }
.roller__history button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--grape); }
.roller__history button i { position: absolute; left: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); }
.roller__history button i[data-tier="rare"] { background: var(--sky); }
.roller__history button i[data-tier="epic"] { background: var(--grape-hi); }
.roller__history button i[data-tier="legendary"] { background: var(--orange); }
.roller__history button i[data-tier="mythic"] { background: linear-gradient(135deg, var(--pink), var(--sky), var(--mint)); }
.roller__history svg { display: block; width: 100%; height: 100%; }
.turnstile:empty { display: none; }

/* Signature pad */
.sig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sig-head .label { margin: 0; }
.sig-tools { display: flex; gap: 14px; }
.link-btn {
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--grape-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--pink-deep); }
.sigpad {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background-color: var(--cream);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.5px);
  background-size: 18px 18px;
  box-shadow: inset 0 4px 0 rgba(42, 27, 74, .06);
  touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M4 26l2.2-7.2L21 4l5 5L11.2 23.8z' fill='%23FAEC7E' stroke='%232A1B4A' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 26l2.2-7.2 5 5z' fill='%232A1B4A'/%3E%3C/svg%3E") 3 27, crosshair;
  transition: box-shadow .2s;
}
.sigpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sigpad__x { position: absolute; left: 5%; bottom: 20%; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--grape); pointer-events: none; }
.sigpad__line { position: absolute; left: 11%; right: 6%; bottom: 24%; border-bottom: 2.5px dashed rgba(42, 27, 74, .25); pointer-events: none; }
.sigpad__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 14%; text-align: center; font-family: var(--font-display); font-weight: 500; color: rgba(42, 27, 74, .4); pointer-events: none; transition: opacity .2s; }
.sigpad.has-ink .sigpad__ph { opacity: 0; }
.sigpad.is-drawing { box-shadow: 0 0 0 4px var(--grape-hi); }
.sigpad.is-error { border-color: var(--pink-deep); animation: shake .4s linear; }

/* Claim fields */
.field-block { display: grid; gap: 6px; }
.field-block .label { margin: 0; }
.field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px 0 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  transition: box-shadow .2s, border-color .2s;
}
.field:focus-within { box-shadow: 0 0 0 4px var(--grape-hi); }
.field > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--grape); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: .78em 0; font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.field input::placeholder { color: #A59BBE; font-weight: 600; }
.field--status input { font-family: var(--font-mono); font-weight: 400; font-size: .9rem; letter-spacing: -.01em; }
.field__status { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: .9rem; }
.field.is-ok { border-color: #2E9E78; }
.field.is-ok .field__status { background: var(--mint); border: 2px solid var(--ink); }
.field.is-ok .field__status::before { content: "\2713"; }
.field.is-bad { border-color: var(--pink-deep); }
.field.is-bad .field__status { background: var(--pink); border: 2px solid var(--ink); }
.field.is-bad .field__status::before { content: "!"; }
.field.is-error { animation: shake .4s linear; }
.hint.is-bad { color: var(--pink-deep); font-weight: 700; }
.fineprint { margin: 0; font-size: .84rem; color: var(--ink-soft); }
.fineprint a { color: var(--grape-deep); font-weight: 700; }

/* Verify and done */
.verify__lead, .done__lead { margin: 0; font-weight: 700; }
.verify__lead b { font-family: var(--font-display); }
.verify__steps { display: grid; gap: 16px; margin: 0; padding-left: 1.4em; }
.verify__steps li::marker { font-family: var(--font-display); font-weight: 700; color: var(--grape-deep); }
.verify__steps .label { margin: 0 0 6px; }
.tweet-preview {
  margin: 0 0 10px;
  padding: 12px 14px;
  max-height: 190px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.45;
  background: var(--cream);
  border: 2px dashed rgba(42, 27, 74, .3);
  border-radius: 14px;
}
.row-gap { display: flex; flex-wrap: wrap; gap: 10px; }
.row-gap--fill > .input { flex: 1 1 220px; min-width: 0; }
.done__big { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; }
.done__big b { color: var(--yolk); text-shadow: -1.5px -1.5px 0 var(--grape-deep), 1.5px -1.5px 0 var(--grape-deep), -1.5px 1.5px 0 var(--grape-deep), 1.5px 1.5px 0 var(--grape-deep), -.05em .05em 0 var(--grape), -.08em .08em 0 var(--grape-deep); }

/* The card on the right */
.hero__stage { position: sticky; top: 76px; display: grid; justify-items: center; min-width: 0; margin-top: -22px; }
.card-stage { position: relative; width: 100%; max-width: 680px; padding-top: 86px; perspective: 1500px; }
.peeker.mascot { position: absolute; z-index: 0; right: 10%; top: 0; width: 132px; transition: transform .35s var(--spring); }
.peeker.mascot:hover { transform: translateY(-6px); }
.peeker .mascot__float { animation: none; }
.peeker .bubble { left: auto; right: 92%; top: 2px; font-size: 1rem; }
.peeker .bubble::after { right: 12px; }
.idcard {
  position: relative;
  z-index: 1;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--spring);
}
.idcard.is-tilt { transition-duration: .12s; }
.idcard.is-shuffle { animation: shuffle .14s linear infinite; }
.idcard.is-pop { animation: cardPop .55s var(--spring); }
.idcard.is-issuing { animation: issue .9s var(--spring); }
@keyframes shuffle { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg) scale(1.01); } }
@keyframes cardPop { 0% { transform: scale(1); } 40% { transform: scale(1.03) rotate(-1deg); } 100% { transform: scale(1); } }
@keyframes issue { 0% { transform: scale(1); } 30% { transform: scale(.94) rotate(-2.5deg); } 62% { transform: scale(1.04) rotate(1.5deg); } 100% { transform: scale(1); } }
.idcard__svg > svg { display: block; width: 100%; height: auto; }
.idcard__foil, .idcard__glare {
  position: absolute;
  left: 2.5%; top: .86%;
  width: 96%; height: 94.8%;
  border-radius: 4.6% / 7%;
  pointer-events: none;
}
.idcard__foil {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 143, 184, .5) 40%, rgba(143, 211, 255, .5) 47%, rgba(127, 227, 196, .5) 54%, rgba(250, 236, 126, .5) 61%, transparent 72%);
  background-size: 300% 300%;
  background-position: var(--hx, 20%) var(--hy, 20%);
  mix-blend-mode: color-dodge;
  opacity: .3;
}
.idcard__glare { background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .45), transparent 42%); mix-blend-mode: soft-light; }
.idcard.is-issuing .idcard__foil { animation: foilSweep .9s ease-out; }
@keyframes foilSweep { from { background-position: 0% 0%; opacity: .9; } to { background-position: 100% 100%; opacity: .3; } }
@media (hover: none) { .idcard__foil { animation: foilIdle 6s ease-in-out infinite alternate; } }
@keyframes foilIdle { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.idcard-stamp { transform-box: fill-box; transform-origin: center; }
.idcard.is-stamping .idcard-stamp { animation: stampDrop .55s cubic-bezier(.2, 1.6, .5, 1) both; }
@keyframes stampDrop { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 60% { opacity: 1; transform: scale(.88); } 100% { opacity: .92; transform: scale(1); } }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  --wave: var(--ink);
  overflow-x: clip;
  padding-block: clamp(110px, 14vw, 180px) calc(36px + env(safe-area-inset-bottom, 0px));
}
.footer__sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8% 20%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 28% 40%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(2.5px 2.5px at 46% 14%, rgba(250, 236, 126, .9), transparent),
    radial-gradient(1.5px 1.5px at 60% 52%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(2px 2px at 18% 70%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(2px 2px at 92% 66%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 38% 86%, rgba(255, 255, 255, .5), transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}
.moon {
  position: absolute;
  right: clamp(-90px, -4vw, -20px);
  top: clamp(40px, 6vw, 80px);
  width: clamp(170px, 24vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--paper), var(--moon) 45%, #F0DE98);
  border: var(--bw) solid var(--ink);
  box-shadow: -10px 12px 0 var(--grape-deep), 0 0 80px 10px rgba(255, 244, 204, .2);
}
.moon__crater { position: absolute; border-radius: 50%; background: #EBD88E; box-shadow: inset -3px 3px 0 rgba(42, 27, 74, .15); }
.moon__crater--a { width: 22%; height: 22%; left: 20%; top: 44%; }
.moon__crater--b { width: 13%; height: 13%; left: 52%; top: 64%; }
.moon__crater--c { width: 10%; height: 10%; left: 58%; top: 30%; }
.moon__flag {
  position: absolute;
  left: 30%;
  top: -24%;
  width: 4px;
  height: 30%;
  background: var(--paper);
  border-radius: 2px;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .6s var(--spring) .9s;
}
.moon__flag img { position: absolute; left: 3px; top: -2px; width: 46px; max-width: none; transform-origin: 0 50%; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave {
  0%, 100% { transform: skewY(-4deg) scaleX(1); }
  50% { transform: skewY(4deg) scaleX(.92); }
}
.moon__rocket {
  position: absolute;
  left: 50%;
  top: -42%;
  width: 34%;
  height: 34%;
  transform: translate(-260%, -200%) rotate(125deg);
  opacity: 0;
  filter: drop-shadow(-3px 3px 0 var(--grape));
}
.moon.is-landed .moon__rocket { animation: land 1.2s var(--ease-out) forwards; }
.moon.is-landed .moon__flag { transform: scaleY(1); }
@keyframes land {
  0% { transform: translate(-260%, -200%) rotate(125deg); opacity: 1; }
  70% { transform: translate(-30%, 4%) rotate(-10deg); opacity: 1; }
  85% { transform: translate(-30%, -6%) rotate(4deg); opacity: 1; }
  100% { transform: translate(-30%, 0) rotate(-35deg); opacity: 1; }
}

.footer__inner { position: relative; z-index: 1; }
.footer__big {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--yolk);
  text-shadow:
    -.012em .012em 0 var(--grape), -.024em .024em 0 var(--grape),
    -.036em .036em 0 var(--grape), -.048em .048em 0 var(--grape),
    -.06em .06em 0 var(--grape-deep);
}
.wiggle--big .ch:hover { transform: translateY(-.1em) rotate(-6deg) scale(1.04); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.socials { display: flex; gap: 12px; }
.social {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--grape);
  transition: transform .35s var(--spring), background-color .2s;
}
.social svg { width: 22px; height: 22px; }
.social:hover { background: var(--yolk); transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 4px)) rotate(-10deg); }
.fine { margin: 34px 0 0; font-size: .9rem; color: #B8ACDA; max-width: 60em; }

/* ---------- FX layers ---------- */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
.cursor {
  position: fixed;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2.5px solid var(--paper);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  transition: width .25s var(--spring), height .25s var(--spring), margin .25s var(--spring), opacity .3s, background-color .2s;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(255, 255, 255, .9); }
.cursor.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.toasts {
  position: fixed;
  z-index: 100;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  animation: toastIn .5s var(--spring);
}
.toast.is-out { animation: toastOut .35s ease-in forwards; }
.toast__icon { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--yolk); border: 2.5px solid var(--ink); }
.toast__icon svg { width: 24px; height: 24px; }
.toast__text small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .8rem; color: var(--ink-soft); }
@keyframes toastIn { from { transform: translateX(-120%) rotate(-8deg); } to { transform: none; } }
@keyframes toastOut { to { transform: translateY(20px) scale(.9); opacity: 0; } }

/* Reveal on scroll: elements stay visible at rest, and only spring in when first seen */
.reveal.is-in { animation: rise .9s var(--spring) backwards; animation-delay: var(--d, 0ms); }
@keyframes rise { from { transform: translateY(40px) scale(.96); } to { transform: none; } }

/* Logo rain easter egg */
.rain {
  position: fixed;
  top: -120px;
  z-index: 89;
  width: 70px;
  pointer-events: none;
  animation: rain linear forwards;
}
@keyframes rain { to { transform: translateY(calc(100vh + 240px)) rotate(var(--rot, 360deg)); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__links a { padding: .45em .55em; font-size: .95rem; }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__links + .nav__tools { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { order: -1; position: static; margin-top: 0; }
  .hero__copy { display: contents; }
  .hero__copy > .chip, .hero__copy > .hero__title, .hero__copy > .hero__lede, .hero__copy > .tally { order: -2; }
  .hero__copy > .chip { justify-self: start; }
  .card-stage { max-width: 600px; margin-inline: auto; }
  .soon__grid { grid-template-columns: 1fr; }
  .slot { justify-self: center; }
}
@media (max-width: 720px) {
  .sticker { --s-mul: .62; width: calc(var(--s) * var(--s-mul)); height: calc(var(--s) * var(--s-mul)); margin-left: calc(var(--s) * var(--s-mul) / -2); margin-top: calc(var(--s) * var(--s-mul) / -2); }
  .sticker--md, .sticker--lg { display: none; }
  .moon { right: -60px; top: 30px; }
  .peeker.mascot { width: 100px; }
  .card-stage { padding-top: 64px; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .nav__inner { gap: 8px; padding: 6px 6px 6px 8px; }
  .brand__logo { width: 38px; }
  .brand__word { font-size: 1.2rem; }
  .brand__tld { display: none; }
  .heat__track { width: 38px; }
  .nav__cta { display: none; }
  .hero__title { font-size: clamp(2.4rem, 11.5vw, 3.2rem); }
  .btn--lg { font-size: 1.05rem; padding: .95em 1.3em; }
  .slot { padding-right: 46px; }
  .lever { width: 46px; transform: scale(.85); transform-origin: 0 50%; }
  .slot__bulbs { display: none; }
  .stepper button { font-size: .82rem; gap: 4px; padding: 7px 2px; }
  .stepper button span { width: 19px; height: 19px; font-size: .7rem; }
  .tally li { padding: 8px 10px 9px; border-radius: 16px; }
  .tally b { font-size: 1.3rem; }
  .tally span { font-size: .72rem; }
  .panel__nav .btn { flex: 1 1 auto; }
  .row-gap > .btn { flex: 1 1 auto; }
}

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

/* ---------- Public card page (/id/CODE) ---------- */
.cardpage .nav { position: sticky; }
.cardpage__main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  min-height: calc(100vh - 180px);
  padding-top: clamp(30px, 6vw, 70px);
  padding-bottom: 40px;
}
.cardpage__stage .card-stage { padding-top: 0; }
.cardpage__info { display: grid; gap: 16px; justify-items: start; }
.cardpage__info .h2 { margin: 0; word-break: break-word; }
.cardpage__info .eyebrow { margin: 0; }
.cardpage__info .body-lg { margin: 0; }
.cardpage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cardpage__meta:empty { display: none; }
.cardpage__fact { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); }
.cardpage__fact b { color: var(--ink); }
.cardpage__fact--pending { color: var(--pink-deep); }
.cardpage__skeleton { aspect-ratio: 1042 / 696; border-radius: 5% / 7.6%; background: var(--paper); border: var(--bw) solid var(--ink); opacity: .5; }
.cardpage__foot { padding-bottom: 30px; }
@media (max-width: 860px) {
  .cardpage__main { grid-template-columns: 1fr; min-height: 0; }
}
.cardpage__foot .fine { color: var(--ink-soft); }