/* ==========================================================================
   Motion and atmosphere. Everything in here is decoration — the whole file
   is neutralized under prefers-reduced-motion at the bottom.
   ========================================================================== */

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .028) 0px,
    rgba(255, 255, 255, .028) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Vignette so the play field reads as a screen rather than a flat page. */
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 45%,
    rgba(0, 0, 0, .55) 100%);
}

/* -------------------------- score pop -------------------------- */

@keyframes score-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
#hud-score.pop { animation: score-pop .22s ease-out; display: inline-block; }

/* --------------------------- banner --------------------------- */

@keyframes banner-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1); }
}
.banner.show { animation: banner-in 1.2s ease-out forwards; }

/* ------------------------ combo pulsing ------------------------ */

@keyframes combo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
#hud-combo[data-tier="2"] { animation: combo-pulse 1.1s ease-in-out infinite; }
#hud-combo[data-tier="3"] { animation: combo-pulse .78s ease-in-out infinite; }
#hud-combo[data-tier="4"] { animation: combo-pulse .55s ease-in-out infinite; }

/* ------------------------ panel entrance ------------------------ */

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.panel.active { animation: panel-in .28s cubic-bezier(.2, .9, .3, 1); }

/* --------------------------- capslock --------------------------- */

@keyframes caps-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.capslock:not([hidden]) { animation: caps-blink 1.1s ease-in-out infinite; }

/* ------------------------- logo flicker ------------------------- */

@keyframes logo-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: .72; }
  95%           { opacity: 1; }
  96%           { opacity: .82; }
}
.logo { animation: logo-flicker 7s linear infinite; }

/* ----------------------- danger heartbeat ----------------------- */

@keyframes danger-edge {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255, 59, 92, 0); }
  50%      { box-shadow: inset 0 0 90px rgba(255, 59, 92, .3); }
}
body.in-danger .scanlines { animation: danger-edge .7s ease-in-out infinite; }

/* --------------------------- effects --------------------------- */

@keyframes effect-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.effect { animation: effect-in .18s ease-out; }

/* ==========================================================================
   Reduced motion: the canvas already drops shake and particles via
   camera.reduced; this strips the CSS layer to match.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .banner.show { opacity: 1; animation: none; }
  .scanlines { display: none; }
}