/* === section: wheel ("PICK YOURS") === */
.wheel { --size: clamp(220px, 62vw, 340px); position: relative; margin: var(--space-5) auto 0; max-width: 820px; outline: none; }
.wheel:focus-visible { outline: 3px solid var(--color-marigold); outline-offset: 8px; border-radius: var(--radius-card); }

.wheel-stage {
  position: relative;
  height: calc(var(--size) + 150px);
  touch-action: pan-y;          /* vertical swipes still scroll the page */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.wheel-stage:active { cursor: grabbing; }

.wheel-item {
  position: absolute; left: 50%; top: 0;
  width: var(--size);
  margin-left: calc(var(--size) / -2);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: none; border: 0; padding: 0; color: var(--color-ink); font: inherit; cursor: pointer;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
}
.wheel-photo {
  display: block; width: var(--size); height: var(--size); flex: none; overflow: hidden; border-radius: 50%;
  padding: 10px; background: var(--ring, var(--color-red));
  box-shadow: var(--shadow-soft);
}
.wheel-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.wheel-name { font-family: var(--font-sign); font-weight: 400; color: var(--color-red); font-size: clamp(30px, 8vw, 44px); line-height: 1; margin-top: var(--space-2); }
.wheel-blurb { font-size: 14px; color: var(--color-muted); max-width: 300px; line-height: 1.4; }

.wheel-item.c0 { --ring: var(--color-red); }
.wheel-item.c1 { --ring: var(--color-sun); }
.wheel-item.c2 { --ring: var(--color-cactus); }
.wheel-item.c3 { --ring: var(--color-sombrero); }

/* slots */
.wheel-item[data-slot="front"] { transform: none; z-index: 3; }
.wheel-item[data-slot="left"]  { transform: translateX(-74%) scale(.52); opacity: .55; z-index: 2; }
.wheel-item[data-slot="right"] { transform: translateX(74%) scale(.52); opacity: .55; z-index: 2; }
.wheel-item[data-slot="back"]  { transform: translateY(-6%) scale(.34); opacity: 0; z-index: 1; pointer-events: none; }
.wheel-item:not([data-slot="front"]) .wheel-blurb { visibility: hidden; }
.wheel-item[data-slot="front"]:hover .wheel-photo { transform: rotate(-4deg); }
.wheel-photo { transition: transform .35s ease; }

@media (min-width: 768px) {
  .wheel-item[data-slot="left"]  { transform: translateX(-92%) scale(.6); }
  .wheel-item[data-slot="right"] { transform: translateX(92%) scale(.6); }
  .wheel-item[data-slot="back"]  { transform: translateY(-10%) scale(.4); opacity: .22; }
}

.wheel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); }
.wheel-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--color-ink); background: transparent; color: var(--color-ink);
  font: 400 28px/1 var(--font-display); cursor: pointer; display: grid; place-items: center; padding-bottom: 3px;
}
.wheel-arrow:hover { background: var(--color-ink); color: var(--color-cream); }
.wheel-dots { display: flex; gap: 0; }
.wheel-dot { width: 28px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.wheel-dot::before { content: ''; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-line); transition: width .3s ease, background-color .3s ease; }
.wheel-dot[aria-current="true"] { width: 40px; }
.wheel-dot[aria-current="true"]::before { background: var(--color-red); width: 26px; }

.wheel-sample {
  position: absolute; top: 8px; right: 0;
  font-size: 11px; letter-spacing: .04em; color: var(--color-muted);
  background: var(--color-cream-deep); padding: 3px 9px; border-radius: var(--radius-pill);
}

@media (max-width: 767px) {
  /* phones: keep the chip off the photo, under the controls */
  .wheel-sample { position: static; display: table; margin: var(--space-3) auto 0; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .wheel-item, .wheel-photo, .wheel-dot { transition: opacity .2s ease; }
}