/* Reveal machines (reveal.js): ball drum and suspense slot. Shared by the front page,
   the live page and the spin-style demo page. */

/* call-out pill ("ລຸ້ນ 2 ໂຕທ້າຍ!") */
.call {
  position: absolute; left: 50%; top: 10px; z-index: 3; margin: 0;
  padding: 3px 16px; border-radius: 999px; border: 2px solid var(--gold-2);
  background: var(--red); color: var(--white); font-weight: 700; font-size: 16px; white-space: nowrap;
  opacity: 0; transform: translateX(-50%) scale(0.95);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
  pointer-events: none;
}
.call.is-on { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---------- ball drum ---------- */
.stage { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #f7f9fc 0%, #e8edf4 100%); }
.stage canvas { display: block; width: 100%; height: auto; }

/* ---------- suspense slot ---------- */
.cab {
  --cell: clamp(60px, 16vw, 112px);
  position: relative; display: grid; gap: 10px; justify-items: center;
  padding: 14px 10px 16px; border: 3px solid var(--gold-2); border-radius: 14px;
  background: linear-gradient(180deg, #13306a 0%, #0b2149 100%);
}
.cab .call { top: -16px; }
.cab__bulbs { display: flex; justify-content: space-between; width: 100%; padding: 0 8px; }
.cab__bulbs i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #5c4a1c; }
.cab__bulbs i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: #ffd76a; box-shadow: inset 0 0 0 2px #fff3b0; opacity: 0; }
.cab.is-running .cab__bulbs i::after { animation: bulb 640ms steps(1, end) infinite; }
.cab.is-running .cab__bulbs i:nth-child(odd)::after { animation-delay: -320ms; }
@keyframes bulb { 50% { opacity: 1; } }
.cab__window { position: relative; display: flex; gap: clamp(4px, 1.4vw, 8px); padding: 8px; border-radius: 8px; background: #071431; }
.sreel {
  position: relative; width: calc(var(--cell) * 0.72); height: calc(var(--cell) * 1.6); overflow: hidden; border-radius: 6px;
  background: var(--white); transition: opacity 300ms var(--ease-out);
}
.sreel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 20, 49, 0.62) 0%, rgba(7, 20, 49, 0) 30%, rgba(7, 20, 49, 0) 70%, rgba(7, 20, 49, 0.62) 100%); }
.sreel::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; box-shadow: inset 0 0 0 3px #ffd76a; opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.sreel__strip { display: flex; flex-direction: column; will-change: transform; }
.sreel__strip span { height: var(--cell); display: grid; place-items: center; font: 800 calc(var(--cell) * 0.74) / 1 "Montserrat", var(--f-lao); color: var(--text); font-variant-numeric: tabular-nums; }
.sreel__strip .sreel__q { color: #9aa5b6; }
.sreel.is-fast .sreel__strip { filter: blur(1.2px); }
.cab__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(200, 16, 46, 0.7); pointer-events: none; z-index: 2; }
.cab__line::before, .cab__line::after { content: ""; position: absolute; top: -6px; border: 7px solid transparent; }
.cab__line::before { left: -2px; border-left-color: var(--red); }
.cab__line::after { right: -2px; border-right-color: var(--red); }

/* the room dims and the last two reels get the light */
.reveal-spot { position: relative; }
.reveal-spot.is-suspense { z-index: 60; }
.reveal-spot.is-suspense .sreel:nth-child(-n+3) { opacity: 0.32; }
.reveal-spot.is-suspense .sreel:nth-child(n+4)::before { opacity: 1; }
.sreel.is-win::before { opacity: 1; animation: win 420ms ease-in-out 4 alternate; }
@keyframes win { to { opacity: 0.25; } }
.dim { position: fixed; inset: 0; z-index: 55; background: rgba(4, 10, 26, 0.64); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.dim.is-on { opacity: 1; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .cab.is-running .cab__bulbs i::after { animation: none; opacity: 1; }
  .sreel.is-win::before { animation: none; }
  .sreel.is-fast .sreel__strip { filter: none; }
}