/* ==========================================================================================
   Ball Knowledge waitlist: STRUCTURE ONLY.
   Layout, sizes, 3D mechanics, motion timing and accessibility. Every colour, material, gloss and
   glow lives in the theme file (css/theme-<name>.css). One font across the brand: Grandstander.
   ========================================================================================== */

@font-face {
  font-family: 'Grandstander';
  src: url(../assets/fonts/grandstander.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; font-family: 'Grandstander', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif; line-height: 1.4; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ol { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 4px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.wrap.narrow { max-width: 780px; }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; }
.skip:focus { top: 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------------ toy plastic parts (shape only; the theme paints them) */
.toy { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.toy::before { content: ""; position: absolute; left: 7%; right: 7%; top: 9%; height: 36%; border-radius: 999px; pointer-events: none; }
.toy > span { position: relative; }
button.toy, a.toy { cursor: pointer; }

/* ------------------------------------------------------------------ nav */
.nav { position: relative; z-index: 5; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.nav-cta { height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 559px) { .nav-cta { display: none; } }
@media (min-width: 900px) { .nav-row { height: 92px; } }

/* ------------------------------------------------------------------ bubble lettering: an outline layer under a fill layer */
.bubble { position: relative; display: block; }
.bubble .b-ol, .bubble .b-gl { position: absolute; inset: 0; }
.bubble .b-fl { position: relative; display: block; }
.bubble .ln { display: inline; }

/* ------------------------------------------------------------------ the form */
.join { width: 100%; max-width: 500px; }
.join-row { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; height: 56px; padding: 0 22px; }
@media (min-width: 700px) { .field { height: 62px; } }
.join-input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; font-size: 18px; position: relative; }
.btn { height: 56px; padding: 0 30px; font-size: 19px; }
@media (min-width: 700px) { .btn { height: 62px; } }
.join-note { margin: 12px 4px 0; font-size: 15px; min-height: 1.4em; }
.join-note:empty { min-height: 0; margin: 0; }
@media (min-width: 560px) { .join-row { flex-direction: row; } .join-row .field { flex: 1; } }
.join.joined .join-row { display: none; }
.join.joined .join-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.join-done { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 12px 22px 12px 14px; border-radius: 999px; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; }
.join-done b { display: block; font-size: 18px; line-height: 1.15; }
.join-done span span { display: block; font-size: 14px; margin-top: 2px; }
.done-check { width: 38px; height: 38px; flex: none; border-radius: 50%; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: 0 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.hero-copy { position: relative; z-index: 4; }
.hero h1 { font-size: clamp(34px, 10vw, 54px); line-height: .98; letter-spacing: -.005em; }
.lede { margin-top: 14px; font-size: 17px; max-width: 30ch; }
.hero .join { margin-top: 18px; }

/* the arena: the giant ticker, the light burst, the ribbon, the card, Invest and the picker */
.arena { position: relative; order: -1; display: flex; flex-direction: column; align-items: center; padding: 10px 0 8px; margin: 0 -20px; overflow: visible; }
.giant { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 0; pointer-events: none; white-space: nowrap; line-height: .9; }
.giant-word { display: inline-block; font-size: clamp(72px, 21vw, 132px); letter-spacing: -.02em; transition: opacity .35s ease, translate .5s cubic-bezier(.2, .9, .2, 1); }
.giant-word.out { opacity: 0; translate: 0 18px; }
.hug { position: absolute; inset: -8%; z-index: 3; pointer-events: none; }
.hug i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
.burst { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; z-index: 0; pointer-events: none; }
.stage3d .ribbon { position: absolute; left: 50%; top: 50%; width: 236%; max-width: none; height: auto; aspect-ratio: 600 / 520; translate: -52% -50%; z-index: 1; overflow: visible; pointer-events: none; }
.stage3d .floor { position: absolute; left: 50%; bottom: -34px; width: 118%; height: 48px; translate: -50% 0; border-radius: 50%; z-index: 1; pointer-events: none; }
.stage3d .hero-card { z-index: 2; }
.stage3d { position: relative; z-index: 3; margin-top: 52px; touch-action: pan-y; transition: opacity .22s ease, scale .4s cubic-bezier(.2, 1.3, .4, 1); }
.stage3d.swap { opacity: 0; scale: .86; }
.hero-card { --w: 168px; --step: 1.8px; cursor: grab; }
.hero-card:active { cursor: grabbing; }
.arena-controls { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.invest { height: 50px; min-width: 180px; padding: 0 36px; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.invest.pressed { translate: 0 6px; }
.picker { display: flex; gap: 10px; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 5px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; }
.pick img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.pick b { display: none; padding-right: 8px; }
.invest-hint { position: absolute; left: 50%; bottom: -12px; translate: -50% 100%; z-index: 5; white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s ease, translate .4s cubic-bezier(.2, 1.3, .4, 1); }
.invest-hint.on { opacity: 1; translate: -50% 80%; }
@media (min-width: 700px) {
  .arena { margin: 0; }
  .stage3d { margin-top: 84px; }
  .arena-controls { gap: 14px; margin-top: 30px; }
  .invest { height: 58px; min-width: 210px; font-size: 22px; }
  .pick { height: 46px; padding: 0 6px; } .pick img { width: 34px; height: 34px; }
  .hero-card { --w: 260px; --step: 2.6px; }
  .giant-word { font-size: clamp(120px, 20vw, 200px); }
  .pick b { display: inline; }
}
@media (min-width: 1000px) {
  .hero { padding: 0 0 70px; }
  .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; min-height: min(calc(100svh - 92px), 760px); }
  .arena { order: 0; padding-top: 0; }
  .hero-card { --w: 292px; --step: 3px; }
  .giant { top: -14px; }
  .stage3d { margin-top: 118px; }
  .giant-word { font-size: clamp(140px, 13.5vw, 196px); }
  .stage3d > .burst { width: 860px; height: 860px; margin: -430px 0 0 -430px; }
  .stage3d .ribbon { width: 212%; translate: -44% -50%; }
  .hero h1 { font-size: clamp(58px, 6vw, 88px); }
  .lede { font-size: 22px; margin-top: 22px; max-width: 32ch; }
  .hero .join { margin-top: 36px; }
}

/* ------------------------------------------------------------------ the card (320 x 448, as the game paints it), with a 3D plastic slab */
.card { position: relative; width: var(--w, 100%); aspect-ratio: 320 / 448; container-type: inline-size; }
.card-body { position: absolute; inset: 0; perspective: 1400px; }
.card-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, -2deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.card-3d.live { transition: none; }
.slab { position: absolute; inset: -4.5cqw; border-radius: 12cqw; transform: translateZ(calc(var(--i) * var(--step, 2px) * -1)); }
.card-rimx { position: absolute; inset: -4.5cqw; border-radius: 12cqw; overflow: hidden; pointer-events: none; }
.card-rimx::before, .card-rimx::after { content: ""; position: absolute; pointer-events: none; }
.card-rimx::before { left: 10%; right: 10%; top: 1.1cqw; height: 2.4cqw; border-radius: 9cqw; z-index: 1; }
.card-rimx::after { inset: 0; }
.card-shadow { position: absolute; inset: -4cqw; border-radius: 12cqw; z-index: -1; pointer-events: none; }
.card-face { position: absolute; inset: 0; transform: translateZ(.5px); }
.card-art { position: absolute; left: 6.25%; top: 4.46%; width: 87.5%; height: 61.6%; overflow: hidden; }
.card-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transform: scale(var(--os, 1)); }
.card-frame, .card-holo, .card-glare, .card-rim { position: absolute; inset: 0; pointer-events: none; }
.card-glare { overflow: hidden; }
.card-glare::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 26%; left: 0; translate: -160% 0; transition: translate .9s cubic-bezier(.3, .7, .2, 1); }
.card:hover .card-glare::before { translate: 420% 0; }
.card-plate { position: absolute; left: 7%; right: 7%; top: 69.5%; height: 26%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.6cqw; }
.card-name { font-size: var(--nfs, 11.4cqw); line-height: .98; text-wrap: balance; }
.card-rar { font-size: 6.6cqw; line-height: 1; }
.card-glow { position: absolute; inset: -18% -22%; z-index: -1; pointer-events: none; border-radius: 50%; }
.chip { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: .35em; font-size: max(10px, 6.8cqw); line-height: 1; white-space: nowrap; z-index: 2; transform: translateZ(14px); }
.card .chip-ticker { left: -8%; top: -4%; height: 2.3em; padding: 0 .9em; }
.card .chip-chart  { right: -10%; top: 54%; height: 2.5em; padding: 0 .6em 0 .7em; }
.card .chip-joined { right: -9%; top: 5%; height: 2.3em; padding: 0 .9em; }
.chip-chart svg { width: 4.4em; height: 1.7em; overflow: visible; }
.arrow-up { display: inline-block; width: .95em; height: .95em; flex: none; }

/* ------------------------------------------------------------------ ticker tape */
.tape { position: relative; z-index: 3; height: 52px; display: flex; align-items: center; overflow: hidden; }
.tape-viewport { flex: 1; min-width: 0; overflow: hidden; }
.tape-track { display: flex; width: max-content; }
.tape-set { display: flex; align-items: center; flex: none; }
.tick { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; font-size: 16px; white-space: nowrap; }
.tick .arrow-up { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ sections */
.how, .board-sec, .faq { position: relative; padding: 84px 0 0; }

.bubble-sm { font-size: clamp(32px, 8.4vw, 54px); line-height: 1; text-align: center; margin-bottom: 40px; }
.bubble-md { font-size: clamp(36px, 9vw, 62px); line-height: 1; }
@media (min-width: 900px) { .how, .board-sec, .faq { padding-top: 132px; } .bubble-sm { margin-bottom: 56px; } }

/* how it works: three toys, one word each */
.steps { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.step { display: flex; flex-direction: column; align-items: center; }
.vis { position: relative; width: 100%; height: 260px; }
.vis::before { content: ""; position: absolute; inset: 14px; border-radius: 26px; pointer-events: none; }
.step h3 { margin-top: 22px; font-size: 30px; line-height: 1; }
@media (min-width: 900px) { .vis { height: 290px; } }
.v-find .card { position: absolute; left: var(--x); top: 50%; width: 112px; translate: -50% -50%; rotate: var(--r); }
.v-find .f-l { --x: 28%; --r: -12deg; }
.v-find .f-r { --x: 72%; --r: 12deg; }
.v-find .f-c { --x: 50%; --r: 0deg; width: 128px; z-index: 2; }
.v-find .tap-ring { position: absolute; left: 50%; top: 50%; width: 152px; height: 204px; margin: -102px 0 0 -76px; border-radius: 18px; opacity: 0; z-index: 3; pointer-events: none; }
.v-find .cursor { position: absolute; left: 56%; top: 62%; width: 28px; height: 32px; opacity: 0; z-index: 4; }
.v-invest { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.v-invest .i-card { width: 118px; }
.invest-mini { height: 48px; padding: 0 30px; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.invest-mini .tap-ring { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; opacity: 0; pointer-events: none; }
.invest-mini .cursor { position: absolute; left: 58%; top: 52%; width: 28px; height: 32px; opacity: 0; pointer-events: none; }
.up-pop { position: absolute; left: calc(50% + 66px); top: 26%; width: 30px; height: 30px; opacity: 0; }
.v-climb .mini-ribbon { position: absolute; left: 8%; top: 12%; width: 86%; height: 76%; overflow: visible; }
.v-climb .c-card { position: absolute; left: 30%; top: 56%; width: 104px; translate: -50% -50%; rotate: -6deg; z-index: 2; }

/* the board: cards ride plastic columns (bars on phones); the lanes rise into place once, when first seen */
.board { display: flex; flex-direction: column; gap: 16px; max-width: 1040px; margin: 0 auto; }
.lane { display: flex; align-items: center; gap: 14px; }
html.js .board .lane { opacity: 0; translate: 0 40px; transition: opacity .6s ease, translate .8s cubic-bezier(.2, 1.1, .3, 1); }
html.js .board.in .lane { opacity: 1; translate: 0 0; }
.board .lane:nth-child(2) { transition-delay: .1s; } .board .lane:nth-child(3) { transition-delay: .2s; } .board .lane:nth-child(4) { transition-delay: .3s; }
.lane .card { width: 92px; flex: none; }
.pillar { position: relative; height: 54px; width: calc(118px + (100% - 224px) * var(--wf)); min-width: 0; border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; overflow: hidden; }
.lane-name { position: relative; font-size: 16px; white-space: nowrap; }
.r-common { --wf: .42; --hf: .25; } .r-rare { --wf: .6; --hf: .5; } .r-epic { --wf: .8; --hf: .75; } .r-legendary { --wf: 1; --hf: 1; }
@media (min-width: 900px) {
  .board { flex-direction: row; align-items: flex-end; justify-content: center; gap: 28px; min-height: 640px; }
  .lane { flex-direction: column; gap: 0; width: 210px; }
  .lane .card { width: 186px; position: relative; z-index: 2; margin-bottom: -18px; }
  .pillar { width: 176px; height: calc(70px + 250px * var(--hf)); border-radius: 30px 30px 18px 18px; justify-content: center; align-items: flex-end; padding: 0 0 22px; }
  .lane-name { font-size: 20px; }
}

/* faq */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.qa { border-radius: 30px; }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 20px 26px; font-size: 18px; line-height: 1.25; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; transition: rotate .3s ease; }
.qa[open] summary::after { rotate: 45deg; }
.qa-a { padding: 0 26px 22px; font-size: 17px; max-width: 58ch; position: relative; }
@media (min-width: 900px) { .qa summary { font-size: 21px; } }

/* closer */
.closer { position: relative; padding: 150px 0 110px; overflow: hidden; }
.giant-closer { top: 44px; }
.giant-closer .giant-word { font-size: clamp(120px, 34vw, 340px); }
.closer-grid { display: grid; grid-template-columns: 1fr; gap: 38px; justify-items: center; text-align: center; }
.closer-copy { width: 100%; max-width: 500px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.closer .join { text-align: left; }
.flip { position: relative; width: 210px; aspect-ratio: 320 / 448; perspective: 1400px; }
.flip .burst { width: 520px; height: 520px; margin: -260px 0 0 -260px; top: 50%; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.2, .9, .25, 1.1); z-index: 1; }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { transform: rotateY(180deg); }
.flip-front .card { position: absolute; inset: 0; width: 100%; }
.flipped .flip-inner { transform: rotateY(180deg); }
.flip-shine { position: absolute; inset: 0; overflow: hidden; display: block; }
@media (min-width: 900px) {
  .closer { padding: 250px 0 140px; }
  .giant-closer .giant-word { font-size: clamp(160px, 19vw, 270px); }
  .closer-grid { grid-template-columns: auto minmax(0, 520px); justify-content: center; gap: 90px; text-align: left; }
  .closer-copy { align-items: flex-start; }
  .flip { width: 270px; }
}

/* footer */
.foot { position: relative; z-index: 2; padding: 30px 0 44px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.foot .brand-mark { width: 24px; height: 24px; }
.motion-toggle { margin-left: 14px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ reveal + play-when-visible */
html.js [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
html.js [data-reveal].in { opacity: 1; translate: 0 0; }
.step:nth-child(2) { transition-delay: .08s; } .step:nth-child(3) { transition-delay: .16s; }
[data-play]:not(.play) *, [data-play]:not(.play) *::before, [data-play]:not(.play) *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ motion */
.pop { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; }
.pop i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; animation: popstar .7s cubic-bezier(.2, .8, .3, 1) var(--sd, 0s) both; }
@keyframes popstar { 0% { opacity: 0; scale: .2; translate: 0 0; } 30% { opacity: 1; scale: 1.1; } 100% { opacity: 0; scale: .5; translate: var(--dx) var(--dy); } }
@keyframes pop { from { scale: .8; opacity: 0; } to { scale: 1; opacity: 1; } }

/* calm: the OS setting or the footer's pause button. Every animation jumps to its end, so nothing waits half-drawn */
html.still *, html.still *::before, html.still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}