/*
 * The 3D reel, shared by the app and the demo on the landing page.
 * Expects --row, --accent and --ease-out from the page; state comes from a
 * data-state attribute on an ancestor.
 */

.reel {
  --drum-step: 20deg; /* must match DEGREES_PER_ROW in reel.js */
  --drum-radius: calc(var(--row) / (2 * tan(var(--drum-step) / 2)));

  position: relative;
  width: min(100%, 1280px);
  height: min(100%, calc(var(--row) * 6));
  transition: opacity 0.35s var(--ease-out), scale 0.6s var(--ease-out);
}

/* A pool of accent light behind the pay line that brightens while spinning. */
.reel-glow {
  position: absolute;
  inset: 20% 10%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--accent) 30%, transparent), transparent);
  opacity: 0.35;
  transition: opacity 0.6s var(--ease-out);
}

[data-state="spinning"] .reel-glow { opacity: 1; }

.reel-drum {
  position: absolute;
  inset: 0;
  perspective: calc(var(--drum-radius) * 4);
  mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
}

.reel-strip {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--drum-radius) * -1));
}

.reel-strip li {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) / -2);
  height: var(--row);
  padding-inline: 9%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  line-height: var(--row);
  font-size: calc(var(--row) * 0.62);
  font-weight: 750;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  backface-visibility: hidden;
  will-change: transform;
}

/* The pay line: two accent pointers aimed at the middle row. */
.reel-pointers::before,
.reel-pointers::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--row) * 0.26);
  height: calc(var(--row) * 0.42);
  margin-top: calc(var(--row) * -0.21);
  background: var(--accent);
  filter: drop-shadow(0 0 calc(var(--row) * 0.2) color-mix(in oklch, var(--accent) 70%, transparent));
}

.reel-pointers::before {
  left: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.reel-pointers::after {
  right: 0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

[data-state="spinning"] .reel-pointers::before,
[data-state="spinning"] .reel-pointers::after {
  animation: pointer-pulse 0.42s ease-in-out infinite alternate;
}

@keyframes pointer-pulse {
  to { scale: 0.8; }
}