/* How the wheel works — layered on top of styles.css, which owns the palette, the slab, the
   label strip, the buttons and the cursor. Nothing here redefines a token.

   EVERY ANIMATION BELOW HAS A STATIC END STATE. The reduced-motion block at the bottom is not a
   courtesy: this page is mostly motion, and with it disabled the page must still be a finished
   page rather than a set of things waiting to arrive. Nothing animates height, top or left —
   transform and opacity only, so nothing can shift layout under a thumb. */

/* --------------------------------------------------------------------- hero */
.wheel-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  padding: 64px max(18px, calc((100vw - var(--max)) / 2)) 48px;
}
.statuschip {
  display: inline-block; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  font-family: var(--labelface); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.8px; font-size: 11px; color: var(--dim);
}
.statuschip[data-state='live'] { border-color: var(--live); color: #fff; background: rgba(255,77,94,.16); }

/* THE WHEEL. A conic-gradient in the three lane accents, not a casino wheel — no gold rim, no
   lights, no chips. It idles slowly and takes one fast turn on load, and `--spin` lets the
   scroll handler drive it without touching any other property. */
.wheel-stage { position: relative; display: grid; place-items: center; }
.wheel {
  --spin: 0deg;
  width: min(420px, 82vw); aspect-ratio: 1; border-radius: 50%;
  transform: rotate(var(--spin));
  background:
    radial-gradient(circle at 50% 50%, var(--shell) 0 17%, transparent 17.5%),
    conic-gradient(var(--holo-1) 0 8.33%, var(--holo-2) 0 16.66%, var(--holo-3) 0 25%,
                   var(--holo-1) 0 33.3%, var(--holo-2) 0 41.6%, var(--holo-3) 0 50%,
                   var(--holo-1) 0 58.3%, var(--holo-2) 0 66.6%, var(--holo-3) 0 75%,
                   var(--holo-1) 0 83.3%, var(--holo-2) 0 91.6%, var(--holo-3) 0 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px rgba(255,255,255,.06);
}
.wheel.idle { animation: wheel-idle 44s linear infinite; }
.wheel.entry { animation: wheel-entry 2.4s cubic-bezier(.12,.72,.15,1) 1 both; }
@keyframes wheel-idle { to { transform: rotate(360deg); } }
@keyframes wheel-entry { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
.wheel-pin {
  position: absolute; top: calc(50% - min(210px, 41vw) - 18px); left: 50%;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 26px solid var(--label);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}

/* -------------------------------------------------------------------- steps */
.steps-big { gap: 18px; max-width: none; }
.steps-big .step {
  display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; align-items: start;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,.03);
  opacity: 0; transform: translateY(14px);
}
.steps-big .step.in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i) * 70ms);
}
.steps-big .step-n {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 22px;
  color: var(--label-ink); background: var(--holo);
}
.steps-big h3 { font-family: var(--body); font-weight: 800; text-transform: none; font-size: 17px; margin: 4px 0 2px; }
.steps-big p { margin: 0; color: #cdc6dd; font-size: 15px; }

/* --------------------------------------------------------------- pool cards */
/* The holo tilt from the home page's hero card, reused on the three pool cards — pointer coords
   arrive as custom properties so the browser never recalculates layout. */
.slabcard {
  --px: 0; --py: 0;
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-top: 3px solid var(--holo-1); border-radius: 14px;
  background: rgba(255,255,255,.035); padding: 18px 20px;
  transform: perspective(900px) rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -6deg));
  transition: transform .25s ease;
}
.slabcard:nth-child(2) { border-top-color: var(--holo-2); }
.slabcard:nth-child(3) { border-top-color: var(--holo-3); }
.slabcard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .25s ease; mix-blend-mode: screen;
  background: conic-gradient(from calc(var(--px) * 120deg + 200deg),
    transparent 0deg, rgba(182,120,255,.30) 60deg, rgba(97,226,196,.26) 140deg,
    transparent 220deg, rgba(255,180,84,.22) 300deg, transparent 360deg);
}
.slabcard:hover::after, .slabcard:focus-visible::after, .slabcard.tapped::after { opacity: 1; }
.slabcard h3 { font-family: var(--body); font-weight: 800; text-transform: none; font-size: 17px; margin-bottom: 6px; }
.slabcard p { margin: 0 0 8px; color: var(--dim); font-size: 14px; }
.slabcard .gloss { color: var(--ink); font-size: 13px; border-left: 2px solid var(--line); padding-left: 10px; }

.pool-example { margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: rgba(255,255,255,.025); }
.pool-example-h { margin: 0 0 12px; font-family: var(--labelface); font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; color: var(--dim); }
.pool-split { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 30px; }
.pool-split b { display: block; font-family: var(--display); font-size: 34px; line-height: 1; }
.pool-split span { font-family: var(--labelface); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px; color: var(--dim); }

/* ---------------------------------------------------------------- the break */
.breakfx { position: relative; height: 150px; margin-top: 26px; }
.breakfx .bx {
  position: absolute; left: 50%; top: 34px; width: 116px; height: 82px; margin-left: -58px;
  border-radius: 8px; background: linear-gradient(180deg, #7a5838, #5b4029);
  border: 2px solid #46301e; transition: transform .5s ease, opacity .4s ease;
}
.breakfx .pk {
  position: absolute; left: 50%; top: 46px; width: 40px; height: 58px; margin-left: -20px;
  border-radius: 5px; background: linear-gradient(180deg, var(--holo-1), #6a3fb0);
  border: 2px solid rgba(255,255,255,.5); opacity: 0;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .35s ease;
}
.breakfx.go .bx { transform: translateY(-16px) scale(.86); opacity: .25; }
.breakfx.go .pk {
  opacity: 1;
  transform: translateX(calc((var(--i) - 2.5) * 74px)) translateY(calc(sin(var(--i) * 1rad) * 10px)) rotate(calc((var(--i) - 2.5) * 9deg));
  transition-delay: calc(var(--i) * 55ms);
}

/* ------------------------------------------------------------- the giveaways */
.gives { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.give { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,.035); }
.give h3 { font-family: var(--body); font-weight: 800; text-transform: none; font-size: 16px; margin-bottom: 6px; }
.give p { margin: 0; color: var(--dim); font-size: 14px; }
.give-1 { border-left: 3px solid var(--holo-1); }
.give-2 { border-left: 3px solid var(--holo-2); }
.give-3 { border-left: 3px solid var(--holo-3); }

.meter { margin-top: 24px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0; background: var(--holo); transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
.meter-note { margin: 10px 0 0; color: var(--dim); font-size: 13px; }

/* --------------------------------------------------------------------- FAQ */
.qa { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); margin-bottom: 10px; overflow: hidden; }
.qa summary { padding: 15px 18px; font-weight: 700; font-size: 16px; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; float: right; font-family: var(--display); color: var(--holo-2); }
.qa[open] summary::after { content: '–'; }
.qa-a { padding: 0 18px 16px; color: #cdc6dd; font-size: 15px; }
.qa-a p { margin: 0; }

/* Split-word heading entrance. The spans are added by wheel.js, so with JS off the heading is
   simply a heading. */
.split w { display: inline-block; opacity: 0; transform: translateY(.35em); }
.split.in w { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--w) * 32ms); }

@media (max-width: 980px) {
  .wheel-hero { grid-template-columns: 1fr; }
  .wheel-stage { order: -1; }
}
@media (max-width: 640px) {
  .steps-big .step { grid-template-columns: 42px 1fr; padding: 15px 16px; }
  .steps-big .step-n { width: 36px; height: 36px; font-size: 18px; }
  .pool-split { gap: 20px; }
}

/* Everything above resolves to its finished state, immediately. */
@media (prefers-reduced-motion: reduce) {
  .wheel.idle, .wheel.entry { animation: none; }
  .steps-big .step { opacity: 1; transform: none; }
  .slabcard { transform: none; transition: none; }
  .breakfx .bx, .breakfx .pk { transition: none; }
  .breakfx .pk { opacity: 1; transform: translateX(calc((var(--i) - 2.5) * 74px)); }
  .meter-fill { transition: none; }
  .split w { opacity: 1; transform: none; }
}