/* ==========================================================================
   Tyoke · Coming in 2027
   Brand fills are exact logo hexes; neutrals and tints are OKLCH.
   ========================================================================== */

:root {
  --paper: #fafbf5;
  --card: #fffdf7;
  --white: #fffdf7;
  --ink: oklch(18% 0.012 285);
  --ink-soft: oklch(40% 0.014 285);
  --red: #e92a35;
  --red-deep: oklch(50% 0.2 26);
  --pink: #fd7faf;
  --blue: #6bbcec;
  --yellow: #fed53f;
  --pink-soft: oklch(94% 0.045 350);
  --blue-soft: oklch(94% 0.04 230);
  --yellow-soft: oklch(96% 0.07 95);

  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Helvetica Neue", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --base: 400ms;
  --slow: 700ms;

  --line: 4px;
  --lift: 8px;
  --radius: 1.5rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 1200px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 999px;
  background: var(--yellow); border: var(--line) solid var(--ink);
  font-weight: 800; transition: top var(--fast) var(--ease);
}
.skip:focus-visible { top: 1rem; outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Intro loader: a capsule that spins, settles, then splits the screen ---------- */
html.is-loading { overflow: hidden; }
.no-intro .loader { display: none; }
.loader { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.loader__half {
  position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden;
  transition: transform 780ms cubic-bezier(.55, 0, .7, .2);
}
.loader__half--top { top: 0; background: var(--pink); box-shadow: 0 1px 0 var(--ink); }
.loader__half--bottom { top: 50%; background: var(--paper); box-shadow: 0 -1px 0 var(--ink); }
.loader__half--top::after, .loader__half--bottom::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(oklch(100% 0 0 / .9) 11px, transparent 12px), radial-gradient(var(--yellow) 9px, transparent 10px);
  background-size: 230px 230px, 290px 290px; background-position: 30px 40px, 150px 120px;
}
.loader__half--bottom::after { background-image: radial-gradient(var(--pink-soft) 11px, transparent 12px), radial-gradient(var(--blue-soft) 9px, transparent 10px); opacity: 1; }
.loader__ballbox {
  position: absolute; left: 50%; z-index: 1;
  width: min(64vw, 40vh, 300px); height: min(64vw, 40vh, 300px);
}
.loader__half--top .loader__ballbox { bottom: 0; transform: translate(-50%, 50%); }
.loader__half--bottom .loader__ballbox { top: 0; transform: translate(-50%, -50%); }
.loader__ball {
  width: 100%; height: 100%; overflow: visible;
  stroke: var(--ink); stroke-width: 8; stroke-linecap: round;
  filter: drop-shadow(10px 10px 0 var(--ink));
  animation: loader-in 500ms var(--ease) both;
}
.loader__spin { transform-origin: 100px 100px; animation: loader-spin 3.4s linear 350ms both; }
@keyframes loader-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes loader-spin {
  0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  24%  { transform: rotate(760deg);  animation-timing-function: cubic-bezier(.1, .55, .35, 1); }
  42%  { transform: rotate(830deg);  animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  66%  { transform: rotate(1560deg); animation-timing-function: cubic-bezier(.1, .55, .35, 1); }
  84%  { transform: rotate(1650deg); animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  100% { transform: rotate(1800deg); }
}
.loader.is-split .loader__half--top { transform: translateY(-102%); }
.loader.is-split .loader__half--bottom { transform: translateY(102%); }

/* hero entrance waits for the intro to split */
.js.is-loading .hero :is(.cat-float, .sign, .sign__line span, .hero__copy > *) { animation-play-state: paused; }

/* ---------- Icons (hand-drawn sprite) ---------- */
.icon {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: var(--ink); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
}
.icon--sm { width: 1.1rem; height: 1.1rem; }
.icon--lg { width: 3.75rem; height: 3.75rem; }
.icon--xl { width: 4.5rem; height: 4.5rem; }
.f-white { fill: var(--white); }
.f-pink { fill: var(--pink); }
.f-blue { fill: var(--blue); }
.f-blue-soft { fill: var(--blue-soft); }
.f-yellow { fill: var(--yellow); }
.f-red { fill: var(--red); }
.f-ink { fill: var(--ink); }
.f-none { fill: none; }
.s-white { stroke: var(--white); }

/* ---------- Type ---------- */
h1, h2, h3, .btn, .kicker, .marquee, .sign, .steps, .code, .ticket__eyebrow, .ticket__amount {
  font-family: var(--font-display);
  font-weight: 800;
}
h2 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h3 { font-size: 1.55rem; line-height: 1.1; }
.section-head { display: grid; gap: .75rem; max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { font-size: 1.15rem; color: var(--ink-soft); }
.kicker { color: var(--red); text-transform: uppercase; letter-spacing: .09em; font-size: .95rem; }
.sticker-text, .ticket__amount span, .sign__line span:not(.sp) {
  color: var(--fill);
  -webkit-text-stroke: .085em var(--ink);
  paint-order: stroke fill;
}
.c-w { --fill: var(--white); }
.c-p { --fill: var(--pink); }
.c-b { --fill: var(--blue); }
.c-y { --fill: var(--yellow); }
.c-r { --fill: var(--red); }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.5rem; padding: .85rem 1.6rem;
  font-size: 1.15rem; line-height: 1; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--yellow);
  border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn:disabled { cursor: progress; opacity: .8; transform: none; }
.btn--sm { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: 1rem; box-shadow: 4px 4px 0 var(--ink); }
.btn--big { min-height: 4rem; padding: 1rem 2rem; font-size: 1.3rem; box-shadow: 7px 7px 0 var(--ink); }
.btn--big:hover { box-shadow: 8px 8px 0 var(--ink); }
.btn--big:active { box-shadow: 3px 3px 0 var(--ink); }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-deep); }
.btn--red .icon { stroke: var(--ink); }
.btn--ghost { background: var(--card); }
.btn.is-nudged { animation: nudge 600ms var(--ease) 2; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) rotate(-1.5deg); } }
.linkish {
  background: none; border: 0; padding: .5rem; margin: -.25rem 0 0;
  font-weight: 700; text-decoration: underline; text-underline-offset: .2em; color: var(--ink-soft); cursor: pointer;
}
.linkish:hover { color: var(--ink); }
.linkish:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: .5rem; }

.signup { display: grid; gap: .6rem; }
.signup__label { font-weight: 800; font-size: 1.05rem; }
.signup__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.signup input[type="email"], .signup input[type="tel"], .claim input[type="email"], .claim input[type="tel"] {
  flex: 1 1 15rem; min-height: 3.5rem; min-width: 0; width: 100%;
  padding: .8rem 1.25rem;
  font: inherit; font-weight: 500; color: var(--ink);
  background: var(--white); border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: inset 3px 3px 0 oklch(90% 0.01 95);
}
.signup input::placeholder, .claim input::placeholder { color: oklch(62% 0.01 285); }
.signup input:focus-visible, .claim input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.signup input[type="email"], .signup input[type="tel"] { width: auto; }
.signup input[type="tel"] { flex-basis: 11rem; }
.signup__note { font-size: .92rem; color: var(--ink-soft); }
.signup__status { font-weight: 700; min-height: 1.5em; }
.signup__status:empty { display: none; }
.signup.is-done .signup__row, .signup.is-done .signup__note, .signup.is-done .signup__label { display: none; }
.signup.is-done .signup__status {
  display: inline-block; padding: .9rem 1.4rem; border-radius: var(--radius);
  background: var(--yellow); border: var(--line) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1deg); color: var(--ink);
}
.signup.is-error .signup__status { color: var(--red); }
.signup--band.is-error .signup__status { color: var(--yellow); }
@media (max-width: 480px) { .signup__row .btn { flex: 1 1 100%; } }

/* ---------- Header ---------- */
.top {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--container); margin-inline: auto;
  padding: 1rem var(--gutter) 0;
}
.brand img { height: clamp(3.25rem, 8vw, 4.5rem); width: auto; }
.brand { border-radius: 1rem; }
.brand:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.top__where {
  display: none; align-items: center; gap: .4rem;
  margin-left: auto; padding: .45rem .95rem;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--card);
  font-weight: 800; font-size: .92rem; white-space: nowrap;
}
.top .btn--sm { margin-left: auto; }
@media (min-width: 640px) {
  .top__where { display: inline-flex; }
  .top .btn--sm { margin-left: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(1rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 7vw, 6rem);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(var(--pink-soft) 13px, transparent 14px),
    radial-gradient(var(--blue-soft) 11px, transparent 12px),
    radial-gradient(var(--yellow-soft) 15px, transparent 16px);
  background-size: 240px 240px, 280px 280px, 320px 320px;
  background-position: 0 0, 110px 140px, 190px 50px;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1.05fr; min-height: calc(100svh - 6rem); }
  .hero__stage { order: 2; }
}

.hero__stage { position: relative; padding-top: 42%; }
.cat-wrap {
  position: absolute; top: 0; left: 50%; width: 58%; z-index: 0;
  transform: translateX(-50%);
}
.cat-float { position: relative; animation: cat-rise var(--slow) var(--ease) both, cat-float 5s ease-in-out 1.2s infinite; }
.cat { position: relative; z-index: 1; width: 100%; height: auto; }
@keyframes cat-rise { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes cat-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }

/* the lucky-cat arm sits behind the body and beckons */
.arm {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible;
  stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round;
}
.arm__bone { stroke-width: 92; }
.arm__flesh { stroke: var(--white); stroke-width: 72; }
.arm__pad { fill: var(--white); stroke-width: 10; }
.arm__toes { fill: none; stroke-width: 9; }
.arm__upper { transform-origin: 600px 478px; animation: beckon-arm 1.5s ease-in-out .9s infinite; }
.arm__paw { transform-origin: 588px 262px; animation: beckon-paw 1.5s ease-in-out 1s infinite; }
@keyframes beckon-arm { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-6deg); } }
@keyframes beckon-paw { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-26deg); } }

.sign {
  position: relative; z-index: 1;
  display: grid; gap: .15em; justify-items: center;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.2rem);
  background: var(--card);
  border: 6px solid var(--ink); border-radius: 2rem;
  box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(-2.5deg);
  animation: sign-in var(--slow) var(--ease) both;
  text-transform: uppercase; line-height: .95; letter-spacing: .01em;
}
@keyframes sign-in { from { opacity: 0; transform: rotate(-2.5deg) scale(.94); } to { opacity: 1; transform: rotate(-2.5deg); } }
.sign__line { display: flex; gap: .015em; font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
.sign__line--big { font-size: clamp(4.4rem, 11.5vw, 9.4rem); }
.sign__line .sp { width: .32em; }
.sign__line span:not(.sp) {
  display: inline-block;
  animation: pop var(--slow) var(--ease) both;
  animation-delay: calc(220ms + var(--i, 0) * 45ms);
}
@keyframes pop { from { opacity: 0; transform: scale(.55) translateY(.25em); } to { opacity: 1; transform: none; } }

.hero__copy > * { animation: rise var(--slow) var(--ease) both; }
.hero__copy > :nth-child(1) { animation-delay: 500ms; }
.hero__copy > :nth-child(2) { animation-delay: 580ms; }
.hero__copy > :nth-child(3) { animation-delay: 660ms; }
.hero__copy > :nth-child(4) { animation-delay: 740ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.lead {
  margin-top: .75rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.005em;
  max-width: 26ch; text-wrap: pretty;
}
.support { margin-top: 1rem; font-size: 1.1rem; color: var(--ink-soft); max-width: 42ch; text-wrap: pretty; }
.hero__cta { display: grid; gap: .9rem; justify-items: start; margin-top: 1.75rem; }
.hero__alt { font-size: .95rem; color: var(--ink-soft); }
.hero__alt a { font-weight: 800; color: var(--ink); text-underline-offset: .2em; }
@media (max-width: 640px) {
  .hero__cta { justify-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__alt { text-align: center; }
}

/* ---------- Capsule machine ---------- */
.gacha {
  border-block: var(--line) solid var(--ink);
  background-color: var(--card);
  background-image:
    radial-gradient(var(--pink) 15px, transparent 16px),
    radial-gradient(var(--blue) 12px, transparent 13px),
    radial-gradient(var(--yellow) 18px, transparent 19px);
  background-size: 300px 300px, 360px 360px, 420px 420px;
  background-position: 40px 60px, 180px 210px, 300px 20px;
}
.gacha__inner {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
@media (min-width: 900px) { .gacha__inner { grid-template-columns: 1fr 1.15fr; } }
.gacha__copy {
  display: grid; gap: 1.25rem; justify-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--card); border: var(--line) solid var(--ink); border-radius: 2rem;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  transform: rotate(-.8deg);
}
.gacha__copy h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.gacha__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 36ch; text-wrap: pretty; }
.steps { display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1.05rem; }
.steps li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .95rem .3rem .3rem;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow-soft);
}
.steps__n {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ink); color: var(--yellow); font-size: .95rem;
}
.gacha__fine { font-size: .9rem; color: var(--ink-soft); max-width: 40ch; }
.prizes { display: flex; flex-wrap: wrap; gap: .6rem; }
.prizes__item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem .45rem .7rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink);
  background: var(--card);
}
.prizes__item--yellow { background: var(--yellow); }
.prizes__item--pink { background: var(--pink); }
.prizes__item--blue { background: var(--blue); }

.stage { display: grid; justify-items: center; gap: 1.1rem; }
.stage__frame { position: relative; display: grid; width: min(100%, 26rem); }
.stage__frame > * { grid-area: 1 / 1; }
.stage__crank { width: min(100%, 26rem); }
.lucky {
  position: absolute; z-index: 4; top: 2%; left: -2%;
  padding: .45rem 1rem;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 3.4vw, 1.35rem); line-height: 1;
  color: var(--ink); background: var(--yellow);
  border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-9deg);
  animation: lucky-bob 3.2s ease-in-out infinite;
  transition: opacity var(--base) var(--ease);
}
.stage.is-revealing .lucky { opacity: 0; }
@keyframes lucky-bob { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-6px); } }
@media (max-width: 480px) { .lucky { left: 0; top: 0; } }
.stage__hint { font-size: .92rem; color: var(--ink-soft); text-align: center; padding: .35rem .9rem; background: var(--card); border-radius: 999px; }
.stage.is-revealing .stage__crank, .stage.is-revealing .stage__hint { display: none; }

.machine {
  position: relative; margin: 0; width: 100%;
  transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.stage.is-revealing .machine { opacity: .22; filter: blur(3px) saturate(.5); transform: scale(.94); }
.machine__svg { width: 100%; height: auto; overflow: visible; }
.machine__art { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.machine__label { font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: .04em; fill: var(--ink); stroke: none; }
.cap-fill { fill: var(--cap, var(--yellow)); }
.crank { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.crank:hover circle:first-child { fill: oklch(88% 0.17 95); }
.cap { transform-box: fill-box; transform-origin: center; }
.out { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-34px) scale(.5); }
.stage.is-cranking .crank { animation: crank 850ms var(--ease); }
.stage.is-cranking .cap { animation: jiggle 850ms ease-in-out; animation-delay: var(--d, 0ms); }
.stage.has-prize .out { animation: drop 480ms var(--ease) forwards; }
.stage.is-revealing .out { animation: none; opacity: 0; }
@keyframes crank { to { transform: rotate(360deg); } }
@keyframes jiggle {
  0%, 100% { transform: none; }
  25% { transform: translate(3px, -5px) rotate(4deg); }
  50% { transform: translate(-3px, 2px) rotate(-3deg); }
  75% { transform: translate(2px, -3px) rotate(2deg); }
}
@keyframes drop { to { opacity: 1; transform: none; } }

.twinkles { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--base) var(--ease); }
.stage.is-revealing .twinkles { opacity: 0; }
.twinkle {
  position: absolute; left: calc(50% + var(--tx, 0%)); top: calc(50% + var(--ty, 0%));
  width: 1.7rem; height: 1.7rem;
  stroke: var(--ink); stroke-width: 3; stroke-linejoin: round;
  transform: translate(-50%, -50%) scale(var(--ts, 1));
  animation: twinkle 2.8s ease-in-out var(--td, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(calc(var(--ts, 1) * .45)) rotate(0deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(var(--ts, 1)) rotate(28deg); }
}

/* --- reveal: capsule flies out, opens, ticket pops --- */
.reveal { position: relative; display: grid; place-items: center; padding: .5rem 0; }
.reveal > * { grid-area: 1 / 1; }
.rays {
  position: absolute; inset: -30%; z-index: 0; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, oklch(92% 0.14 95 / .9) 0 7deg, transparent 7deg 15deg);
  mask-image: radial-gradient(circle at center, #000 20%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at center, #000 20%, transparent 68%);
}
.stage.is-open .rays { animation: rays-in 900ms var(--ease) forwards, spin 36s linear infinite; }
@keyframes rays-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

.capsule {
  --cap-size: clamp(9.5rem, 44vw, 13rem);
  position: relative; z-index: 1; width: var(--cap-size); height: var(--cap-size);
  opacity: 0;
  transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(.15);
}
.stage.is-revealing .capsule { animation: fly 760ms var(--ease) forwards; }
@keyframes fly {
  from { opacity: 1; transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(.15); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
.capsule__half {
  position: absolute; left: 0; width: 100%; height: 50%;
  border: 6px solid var(--ink); background: var(--white);
  transition: transform 720ms var(--ease), opacity 720ms var(--ease);
}
.capsule__half--top { top: 0; border-radius: 999px 999px 0 0; border-bottom-width: 3px; background: var(--cap, var(--yellow)); }
.capsule__half--bottom { bottom: 0; border-radius: 0 0 999px 999px; border-top-width: 3px; }
.capsule__half--top::after {
  content: ""; position: absolute; left: 17%; top: 20%; width: 24%; height: 15%;
  border-radius: 999px; background: var(--white); transform: rotate(-32deg);
}
.stage.is-open .capsule__half--top { transform: translate(-14%, -70%) rotate(-26deg); opacity: .5; }
.stage.is-open .capsule__half--bottom { transform: translate(10%, 66%) rotate(12deg); opacity: .5; }

.ticket {
  position: relative; z-index: 2;
  width: min(100%, 22rem);
  display: grid; gap: .55rem; justify-items: center; text-align: center;
  padding: 1.35rem 1.25rem 1.1rem;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  transform: rotate(-1.5deg);
  opacity: 0; visibility: hidden;
}
.stage.is-open .ticket { visibility: visible; animation: ticket-pop 560ms var(--ease) 160ms forwards; }
@keyframes ticket-pop { from { opacity: 0; transform: rotate(-1.5deg) translateY(28px) scale(.72); } to { opacity: 1; transform: rotate(-1.5deg); } }
.ticket__eyebrow { color: var(--red); text-transform: uppercase; letter-spacing: .09em; font-size: .85rem; }
.ticket__amount {
  display: flex; gap: .18em; font-size: clamp(2.3rem, 8vw, 3.1rem); line-height: 1; text-transform: uppercase;
}
.ticket__amount span { display: inline-block; }
.ticket__sub { font-weight: 700; margin-top: -.2rem; }
.code {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem;
  border: 3px dashed var(--ink); border-radius: .9rem; background: var(--yellow-soft);
  font-size: 1.45rem; letter-spacing: .12em; line-height: 1.2;
}
.code__lock { width: 1.3rem; height: 1.3rem; }
.stage.is-claimed .code { background: var(--yellow); border-style: solid; animation: code-pop 480ms var(--ease); }
.stage.is-claimed .code__lock { display: none; }
@keyframes code-pop { from { transform: scale(.82); } to { transform: none; } }

.claim { display: grid; gap: .5rem; width: 100%; justify-items: center; margin-top: .35rem; }
.claim__label { font-weight: 800; text-wrap: balance; }
.claim .btn { width: 100%; }
.claim__note { font-size: .85rem; color: var(--ink-soft); }
.claimed { display: grid; gap: .8rem; justify-items: center; margin-top: .35rem; }
.claimed__msg { font-weight: 700; max-width: 26ch; text-wrap: pretty; }
.claimed__row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ticket__status { font-weight: 700; min-height: 1.4em; }
.ticket__status:empty { display: none; }
.ticket__status.is-error { color: var(--red); }

.burst { position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.spark {
  position: absolute; left: 0; top: 0;
  width: var(--sz, 1.6rem); height: var(--sz, 1.6rem); margin: calc(var(--sz, 1.6rem) / -2);
  stroke: var(--ink); stroke-width: 3; stroke-linejoin: round;
  opacity: 0; transform: rotate(var(--a, 0deg)) translateX(0) scale(0);
  animation: spark 950ms var(--ease) var(--delay, 0ms) forwards;
}
.spark--dot { border-radius: 50%; background: var(--c, var(--pink)); border: 3px solid var(--ink); }
@keyframes spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(0); }
  55% { opacity: 1; transform: rotate(var(--a)) translateX(var(--d)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 1.25)) scale(.3); }
}

.confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.confetti i {
  position: absolute; left: 50%; top: 32%;
  width: var(--sz, 10px); height: var(--sz, 10px);
  background: var(--c, var(--yellow)); border: 2px solid var(--ink); border-radius: var(--rad, 3px);
  opacity: 0;
  animation: confetti 1500ms cubic-bezier(.3, .2, .5, 1) var(--delay, 0ms) forwards;
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  30% { opacity: 1; transform: translate(calc(var(--x) * .55), calc(var(--y) * -.45)) rotate(calc(var(--r) * .3)); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---------- Stripe band + marquee ---------- */
.stripes {
  padding-block: 14px;
  border-block: var(--line) solid var(--ink);
  background: linear-gradient(var(--pink) 0 33.34%, var(--blue) 33.34% 66.67%, var(--yellow) 66.67% 100%);
}
.marquee {
  overflow: hidden; padding-block: .7rem;
  background: var(--card); border-block: var(--line) solid var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); text-transform: uppercase; letter-spacing: .02em;
}
.marquee__track { display: flex; width: max-content; animation: scroll 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; }
.marquee__list li { display: inline-flex; align-items: center; gap: 1rem; padding-right: 1rem; white-space: nowrap; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Shelves (sticker wall) ---------- */
.shelves { max-width: var(--container); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.wall__item { grid-column: span 12; }
@media (min-width: 700px) { .wall__item { grid-column: span 6; } }
@media (min-width: 1040px) { .wall__item { grid-column: span var(--span, 4); } }

.sticker {
  --bg: var(--card); --fg: var(--ink); --fg-soft: var(--ink-soft);
  container-type: inline-size;
  height: 100%;
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--fg); background: var(--bg);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  transform: rotate(var(--r, 0deg));
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.sticker:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 11px 11px 0 var(--ink); }
.sticker--yellow { --bg: var(--yellow); }
.sticker--pink { --bg: var(--pink); }
.sticker--blue { --bg: var(--blue); }
.sticker--red { --bg: var(--red); --fg: var(--white); --fg-soft: oklch(96% 0.02 20); }
.sticker__text { display: grid; gap: .35rem; }
.sticker__text p { color: var(--fg-soft); text-wrap: pretty; max-width: 36ch; }
@container (min-width: 430px) {
  .sticker { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
}
@media (max-width: 700px) { .sticker { transform: rotate(calc(var(--r, 0deg) * .5)); } }

/* ---------- Treats ---------- */
.treats { border-block: var(--line) solid var(--ink); background: var(--blue-soft); }
.treats__inner { max-width: var(--container); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.treat-list { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.treat {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1.1rem 1.35rem;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.treat:nth-child(1) { transform: rotate(-.8deg); }
.treat:nth-child(2) { transform: rotate(.6deg); }
.treat:nth-child(3) { transform: rotate(-.5deg); }
.treat p { color: var(--ink-soft); text-wrap: pretty; }
@media (min-width: 900px) {
  .treat { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.6rem; }
  .treat:nth-child(2) { transform: rotate(.6deg) translateY(.75rem); }
}

/* ---------- Signup band ---------- */
.band { background: var(--red); color: var(--white); border-bottom: var(--line) solid var(--ink); }
.band__inner {
  display: grid; gap: 2rem; align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
@media (min-width: 900px) { .band__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.band h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.band__copy { display: grid; gap: 1rem; max-width: 30ch; }
.band__copy p { font-size: 1.2rem; line-height: 1.5; letter-spacing: .01em; }
.band .signup { margin-top: 0; }
.band .signup__note { color: oklch(95% 0.02 20); }
.band .signup input:focus-visible { outline-color: var(--yellow); }

/* ---------- Footer ---------- */
.foot {
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2.5rem;
  background: var(--ink); color: var(--paper);
  line-height: 1.7; letter-spacing: .01em;
}
.foot__mark { width: clamp(9rem, 22vw, 14rem); height: auto; }
.foot__tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .06em; }
.socials { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.socials a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1.1rem;
  border: 3px solid var(--paper); border-radius: 999px; text-decoration: none; font-weight: 800;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.socials a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.socials a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.foot__meta { margin-top: 1rem; font-size: .9rem; color: oklch(72% 0.01 285); }
@media (max-width: 640px) { .foot { padding-bottom: 5.5rem; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom)); z-index: 50;
  display: none; min-height: 3.25rem; padding: .7rem 1.3rem; font-size: 1.05rem;
  transform: translateX(-50%);
  animation: sticky-in var(--base) var(--ease);
}
.sticky-cta:hover { transform: translateX(-50%) translateY(-1px); }
.sticky-cta:active { transform: translateX(-50%) translateY(2px); }
@media (max-width: 640px) { .sticky-cta:not([hidden]) { display: inline-flex; } }
@keyframes sticky-in { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js .gacha__copy[data-reveal] { transform: rotate(-.8deg) translateY(18px); }
.js .gacha__copy[data-reveal].in { transform: rotate(-.8deg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cat-float, .sign, .sign__line span, .hero__copy > *, .arm__upper, .arm__paw, .twinkle, .btn.is-nudged, .sticky-cta, .lucky { animation: none !important; }
  .twinkle { opacity: .8; }
  .marquee__track { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .gacha__copy[data-reveal] { transform: rotate(-.8deg); }
  .sticker, .treat, .btn, .machine, .capsule__half { transition: none; }
  .stage.is-cranking .crank, .stage.is-cranking .cap { animation-duration: 1ms; }
  .stage.has-prize .out { animation: none; opacity: 1; transform: none; }
  .stage.is-revealing .capsule { animation: none; opacity: 1; transform: none; }
  .stage.is-open .ticket { animation: none; opacity: 1; }
  .stage.is-open .rays { animation: none; opacity: 1; }
  .spark, .confetti i { display: none; }
}