@keyframes spin-cw{to{transform:rotate(360deg)}}
@keyframes spin-ccw{to{transform:rotate(-360deg)}}
@keyframes grid-drift{to{background-position:80px 80px,80px 80px}}
.bg-grid{animation:grid-drift 26s linear infinite}
.ring-ticks{animation:spin-ccw 120s linear infinite}
.ring-outer{animation:spin-cw 60s linear infinite}
.ring-mid{animation:spin-ccw 42s linear infinite}
.ring-inner{animation:spin-cw 30s linear infinite}

.stage-3d.is-spinning .ring-ticks{animation-duration:3.2s}
.stage-3d.is-spinning .ring-outer{animation-duration:1s}
.stage-3d.is-spinning .ring-mid{animation-duration:.7s}
.stage-3d.is-spinning .ring-inner{animation-duration:.45s}
.stage-3d.is-locking .ring-ticks{animation-duration:26s}
.stage-3d.is-locking .ring-outer{animation-duration:14s}
.stage-3d.is-locking .ring-mid{animation-duration:11s}
.stage-3d.is-locking .ring-inner{animation-duration:8s}

@keyframes landmark-breathe{
  0%,100%{opacity:.3}
  50%{opacity:.4}
}
@keyframes landmark-breathe-light{
  0%,100%{opacity:.88}
  50%{opacity:.96}
}
@keyframes landmark-scan{
  0%{transform:translateY(60%)}
  100%{transform:translateY(-60%)}
}
@keyframes crest-glint{
  0%,100%{fill-opacity:.1}
  50%{fill-opacity:.34}
}
.landmark-art{animation:landmark-breathe 9s ease-in-out infinite}
body.theme-white-gold .landmark-art{animation-name:landmark-breathe-light}
.landmark-scan{animation:landmark-scan 11s linear infinite}
.crest-gem-in{animation:crest-glint 4.5s ease-in-out infinite}
/* The facade lifts with the wheel while a draw is spinning. */
.app:has(.stage-3d.is-spinning) .landmark-art{opacity:.5;animation-duration:1.4s}
.app:has(.stage-3d.is-spinning) .landmark-scan{animation-duration:1.6s}
body.theme-white-gold:has(.stage-3d.is-spinning) .landmark-art{opacity:1}

@keyframes tunnel-push{
  0%{transform:translateZ(0) scale(1)}
  18%{transform:translateZ(-70px) scale(.97)}
  100%{transform:translateZ(330px) scale(1.02)}
}
@keyframes tunnel-snap{
  0%{transform:translateZ(330px) scale(1.02)}
  55%{transform:translateZ(-46px) scale(.985)}
  100%{transform:translateZ(0) scale(1)}
}
.stage-3d.is-spinning{animation:tunnel-push var(--dur-spin) cubic-bezier(.55,0,.85,.3) forwards}
.stage-3d.is-locking{animation:tunnel-snap var(--dur-lock) var(--ease-spring) forwards}

@keyframes ring-open{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:.14;transform:scale(1.5)}
}
.stage-3d.is-spinning .ring-core{animation:ring-open var(--dur-spin) cubic-bezier(.55,0,.85,.3) forwards}
@keyframes ring-clamp{
  0%{opacity:.2;transform:scale(1.5)}
  70%{opacity:1;transform:scale(.965)}
  100%{opacity:1;transform:scale(1)}
}
.stage-3d.is-locking .ring-core{animation:ring-clamp var(--dur-lock) var(--ease-spring) forwards}

@keyframes roll-jitter{
  0%{transform:translateY(-2%) scaleY(1.02)}
  50%{transform:translateY(2%) scaleY(.98)}
  100%{transform:translateY(-2%) scaleY(1.02)}
}
.medal-names.is-rolling{
  animation:roll-jitter 90ms linear infinite;
  filter:blur(.6px);color:var(--gold-300);opacity:.9;
}
/* Ends on the glow, not on blur(0): the animation fills forwards, so a bare
   blur(0) here would hold and strip the name's gilding for the rest of the
   draw. */
@keyframes name-lock{
  0%{opacity:0;transform:scale(1.08) translateZ(40px);filter:blur(4px)}
  60%{opacity:1;transform:scale(.98) translateZ(0);filter:var(--name-glow)}
  100%{opacity:1;transform:scale(1) translateZ(0);filter:var(--name-glow)}
}
.medal-names.is-locked{animation:name-lock var(--dur-lock) var(--ease-spring) both}

@keyframes roster-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.medallion.is-roster.is-arriving{animation:roster-in .4s var(--ease-out) both}
@keyframes roster-name-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.medal-names.is-board.is-stagger .n{
  animation:roster-name-in .32s var(--ease-out) both;
  animation-delay:var(--d,0ms);
}

@keyframes kicker-in{from{opacity:0;letter-spacing:.9em}to{opacity:1;letter-spacing:.3em}}
.medal-kicker.is-new{animation:kicker-in .45s var(--ease-out) both}

@keyframes prize-flip{
  0%{transform:rotateX(0)}
  50%{transform:rotateX(-84deg)}
  100%{transform:rotateX(0)}
}
.prize.just-won,.special.just-won{animation:prize-flip .6s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .bg-grid,.ring-ticks,.ring-outer,.ring-mid,.ring-inner{animation:none}
  .stage-3d.is-spinning,.stage-3d.is-locking{animation:none}
  .stage-3d.is-spinning .ring-core,.stage-3d.is-locking .ring-core{animation:none}
  .medal-names.is-rolling{animation:none;filter:none}
  .medal-names.is-locked{animation:name-fade .3s ease both}
  .medallion.is-roster.is-arriving{animation:none}
  .medal-names.is-board.is-stagger .n{animation:none}
  .prize.just-won,.special.just-won{animation:none}
  .landmark-art,.landmark-scan,.crest-gem-in{animation:none}
  .landmark-scan{display:none}
  @keyframes name-fade{from{opacity:0}to{opacity:1}}
}