/* 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; }
/* It is clickable, so it says so on hover and takes a focus ring like any other control. */
.wheel-stage:hover .wheel { filter: brightness(1.06); }
.wheel-stage:focus-visible { outline: 3px solid var(--holo-2); outline-offset: 12px; border-radius: 50%; }
.wheel-hint {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-family: var(--labelface); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; font-size: 10px; color: var(--dim); pointer-events: none;
}
.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; }
}

/* ===========================================================================
   THE WHEEL IS THE LIGHT SOURCE.
   ===========================================================================
   This page was wearing the home page's clothes: same hero proportions, same
   centred slabs, same everything. A page about one object should be lit by that
   object, so the wheel now bleeds off the right edge, throws colour across the
   type, and the steps take their numbers from its segments.

   ONE IDEA, COMMITTED TO. The wheel gets bigger and closer and everything else
   gets quieter to pay for it — no second accent, no extra motion. */

.wheel-hero { grid-template-columns: 1.15fr .85fr; padding-block: 88px 64px; }

/* The pool of light the wheel casts on the page. Behind everything, ignores the
   pointer, and it is the only glow on the page so it cannot compete with itself. */
.wheel-hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -18%; top: 50%; width: 120vmin; height: 120vmin; transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(182,120,255,.22) 0%, rgba(97,226,196,.12) 34%, transparent 68%);
  filter: blur(20px);
}
.wheel-hero-copy, .wheel-stage { position: relative; z-index: 1; }

/* CLOSER AND CROPPED. A wheel that fits neatly inside its column is a diagram; one
   that runs off the edge is an object that happens to be in shot. */
.wheel-stage { justify-items: end; margin-right: -14%; }
.wheel { width: min(560px, 96vw); }
.wheel-pin { top: calc(50% - min(280px, 48vw) - 14px); }
.wheel-hint { bottom: 10px; right: 14%; left: auto; transform: none; }

/* The step numbers are wheel segments. Violet, teal, amber, violet, teal — the same
   three accents in the same order as the wheel, so the list reads as coming off it
   rather than as a numbered list that happens to sit nearby. */
.steps-big .step:nth-child(1) .step-n { background: var(--holo-1); }
.steps-big .step:nth-child(2) .step-n { background: var(--holo-2); }
.steps-big .step:nth-child(3) .step-n { background: var(--holo-3); }
.steps-big .step:nth-child(4) .step-n { background: var(--holo-1); }
.steps-big .step:nth-child(5) .step-n { background: var(--holo-2); }
.steps-big .step { border-left: 3px solid transparent; }
.steps-big .step:nth-child(1) { border-left-color: rgba(182,120,255,.55); }
.steps-big .step:nth-child(2) { border-left-color: rgba(97,226,196,.55); }
.steps-big .step:nth-child(3) { border-left-color: rgba(255,180,84,.55); }
.steps-big .step:nth-child(4) { border-left-color: rgba(182,120,255,.55); }
.steps-big .step:nth-child(5) { border-left-color: rgba(97,226,196,.55); }

/* The headline sits tighter and larger, because it now has light behind it. */
.wheel-hero .hero-h1 { font-size: clamp(60px, 11vw, 150px); }
.wheel-hero .lede { max-width: 46ch; }

@media (max-width: 980px) {
  .wheel-stage { justify-items: center; margin-right: 0; }
  .wheel { width: min(400px, 84vw); }
  .wheel-hint { right: auto; left: 50%; transform: translateX(-50%); }
  .wheel-hero::before { right: -40%; opacity: .7; }
}

/* The hint sat ON the wheel's rim, where it was unreadable against the segments. It belongs
   clear of the object it is describing. */
.wheel-hint { bottom: -26px; right: 22%; color: #8f87a8; }
@media (max-width: 980px) { .wheel-hint { bottom: -24px; right: auto; } }