/* Motion tokens for the pages outside the game board (docs/design/animation-non-game-screens.md, section 5).
   motion.js reads these durations, so change them here only. Under reduced motion every duration is 0 and the
   end state shows at once. */
:root {
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
}

/* Reduced motion: the system setting, unless the page sets data-motion="full" (motion.js reducedMotion). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

:root[data-motion="reduced"] {
  --motion-fast: 0ms;
  --motion-base: 0ms;
  --motion-slow: 0ms;
}

/* Rarity ambience (docs/design/rarity-palette.md, section 5). Only when motion is allowed: under reduced motion the ring stays
   static and the sheen is not drawn. Both animate opacity or transform only. Sparks are not built yet. */
@keyframes aura-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes sheen-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(250%); }
}

/* The ambience plays when the settings menu's motion is on (data-motion="full"), or when that is not set and the browser allows motion.
   The sheen is drawn only in those cases; its box styles are repeated in each rule so they follow the same condition. */
:root[data-motion="full"] .reveal-card.rarity-r::after,
:root[data-motion="full"] .reveal-card.rarity-x::after,
:root[data-motion="full"] .reveal-card.rarity-u::after {
  animation: aura-breathe 3s ease-in-out infinite;
}

:root[data-motion="full"] .sheen {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24%;
  background: var(--rarity-u);
  opacity: 0.16;
  transform: translateX(-100%);
  animation: sheen-sweep 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .reveal-card.rarity-r::after,
  :root:not([data-motion="reduced"]) .reveal-card.rarity-x::after,
  :root:not([data-motion="reduced"]) .reveal-card.rarity-u::after {
    animation: aura-breathe 3s ease-in-out infinite;
  }

  :root:not([data-motion="reduced"]) .sheen {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 24%;
    background: var(--rarity-u);
    opacity: 0.16;
    transform: translateX(-100%);
    animation: sheen-sweep 4s ease-in-out infinite;
  }
}