/*
 * Stakeout scenes (Data and Probability): monitor, spinner, dice.
 * Markup: js/visuals/scenes-data.js. State classes on #play-visual come from
 * js/ext/scenes.js (is-correct | is-partial | is-wrong | is-timeout).
 * Final states are plain rules; animations only add motion, so reduced motion
 * shows the same final frame with no movement.
 */

.scene-data {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.scene-data .sd-txt {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.scene-data .sd-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Animated parts pivot around their own box. */
.scene-data .sd-wheel,
.scene-data .sd-die,
.scene-data .sd-coin,
.scene-data .sd-tile,
.scene-data .sd-chip,
.scene-data .sd-point,
.scene-data .sd-mover,
.scene-data .sd-unknown,
.scene-data .sd-asked {
  transform-box: fill-box;
  transform-origin: center;
}
.scene-data .sd-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Hidden until a reaction shows them. */
.scene-data .sd-guide,
.scene-data .sd-glitch {
  opacity: 0;
}
.scene-data .sd-glitch {
  pointer-events: none;
}

/* Idle: the REC light breathes. */
.scene-data .sd-rec {
  animation: sd-rec 1.6s ease-in-out infinite;
}

/* ---------- correct ---------- */
.is-correct .scene-data .sd-guide,
.is-partial .scene-data .sd-guide {
  opacity: 1;
  animation: sd-fade 0.35s 0.15s ease-out both;
}
.is-correct .scene-data .sd-fav rect {
  fill: rgba(46, 230, 107, 0.3);
  stroke: #2ee66b;
}
.is-correct .scene-data .sd-fav {
  animation: sd-pop 0.35s calc(var(--i, 0) * 35ms) cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.is-correct .scene-data .sd-unknown.sd-filled {
  fill: #2ee66b;
  animation: sd-pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.is-correct .scene-data .sd-readout rect {
  stroke: #2ee66b;
  fill: rgba(46, 230, 107, 0.1);
}
.is-correct .scene-data .sd-asked {
  animation: sd-pulse 0.5s ease-out both;
}
.is-correct .scene-data .sd-tile {
  animation: sd-pulse 0.4s calc(var(--i, 0) * 40ms) ease-out both;
}
.is-correct [data-scene="spinner"] .sd-wheel {
  animation: sd-spin 0.9s cubic-bezier(0.15, 0.8, 0.25, 1) both;
}
.is-correct [data-scene="dice"] .sd-die,
.is-correct [data-scene="dice"] .sd-coin {
  animation: sd-roll 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.is-correct [data-scene="dice"] .sd-wheel {
  animation: sd-spin 0.8s cubic-bezier(0.15, 0.8, 0.25, 1) both;
}
.is-correct .scene-data .sd-rec {
  fill: #2ee66b;
}

/* ---------- wrong / timeout ---------- */
.is-wrong .scene-data .sd-glitch {
  animation: sd-glitch 0.45s steps(3, end) both;
}
.is-wrong .scene-data .sd-screen {
  animation: sd-shake 0.4s ease-in-out both;
}
.is-wrong [data-scene="spinner"] .sd-wheel,
.is-wrong [data-scene="dice"] .sd-die {
  animation: sd-shake 0.4s ease-in-out both;
}
.is-wrong .scene-data .sd-unknown,
.is-timeout .scene-data .sd-unknown {
  fill: #ff5470;
}
.is-timeout .scene-data .sd-rec {
  fill: #a9b1d6;
  animation: none;
}
.is-timeout .scene-data .sd-screen,
.is-timeout [data-scene="spinner"] .sd-wheel,
.is-timeout [data-scene="dice"] .sd-die {
  opacity: 0.6;
}

@keyframes sd-rec {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes sd-fade {
  from {
    opacity: 0;
  }
}
@keyframes sd-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
@keyframes sd-pulse {
  40% {
    transform: scale(1.06);
  }
}
@keyframes sd-spin {
  from {
    transform: rotate(-300deg);
  }
}
@keyframes sd-roll {
  from {
    transform: rotate(-200deg) scale(0.8);
  }
}
@keyframes sd-glitch {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sd-shake {
  20% {
    transform: translateX(-5px);
  }
  45% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-data *,
  .is-correct .scene-data *,
  .is-wrong .scene-data *,
  .is-timeout .scene-data * {
    animation: none !important;
    transition: none !important;
  }
}