/* A comic-book POW for the park squirrel, kept clear of the HUD and touch controls.
   js/squirrel-encounter.js builds the burst inside #squirrelFlash and sets --sx/--sy
   near Gizmo; main.js restarts it with the 'on' class. Every animation here lasts
   exactly 1100ms so animationend from any part matches the whole cue. */
#squirrelFlash {
  position: fixed; inset: 0; z-index: 24; pointer-events: none; overflow: hidden;
  visibility: hidden; contain: layout style;
}
#squirrelFlash > span { display: none; }   /* the plain fallback text, replaced by the burst */
#squirrelFlash .sq-pos {
  position: absolute; left: var(--sx, 50%); top: var(--sy, 30%);
  width: var(--sw, min(80vw, 380px)); aspect-ratio: 260 / 190;
  transform: translate(-50%, -50%);
}
#squirrelFlash .sq-burst { display: block; width: 100%; height: 100%; overflow: visible; opacity: 0; }
#squirrelFlash .sq-lines, #squirrelFlash .sq-stars { transform-box: view-box; transform-origin: 0 0; }
#squirrelFlash.on { animation: sq-vis 1100ms linear both; }
#squirrelFlash.on .sq-burst { animation: sq-pop 1100ms both; }
#squirrelFlash.on .sq-lines { animation: sq-lines 1100ms ease-out both; }
#squirrelFlash.on .sq-stars { animation: sq-stars 1100ms ease-out both; }
@keyframes sq-vis { 0%, 99.9% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes sq-pop {
  0% { opacity: 0; transform: scale(.15) rotate(-28deg); animation-timing-function: cubic-bezier(.2, .9, .3, 1.3); }
  9% { opacity: 1; transform: scale(1.28) rotate(7deg); }
  15% { transform: scale(.9) rotate(-10deg); }
  21% { transform: scale(1.06) rotate(-5deg); }
  27% { transform: translate(0, 0) scale(1) rotate(-7deg); }
  31% { transform: translate(-5px, 2px) scale(1.01) rotate(-8.5deg); }
  35% { transform: translate(5px, -2px) scale(1) rotate(-5.5deg); }
  39% { transform: translate(-4px, -1px) scale(1.01) rotate(-8deg); }
  43% { transform: translate(3px, 2px) scale(1) rotate(-6deg); }
  47% { transform: translate(-2px, 0) scale(1) rotate(-7.5deg); }
  51%, 66% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-7deg); }
  76% { opacity: 1; transform: translate(-10px, 6px) scale(1.08) rotate(-11deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { opacity: 0; transform: translate(70vw, -45vh) scale(.25) rotate(32deg); }
}
@keyframes sq-lines {
  0%, 4% { opacity: 0; transform: scale(.55); }
  12% { opacity: 1; transform: scale(1); }
  45% { opacity: .9; transform: scale(1.18); }
  60%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes sq-stars {
  0%, 6% { opacity: 0; transform: scale(.4) rotate(0deg); }
  16% { opacity: 1; transform: scale(1.1) rotate(10deg); }
  55% { opacity: 1; transform: scale(1.2) rotate(24deg); }
  70%, 100% { opacity: 0; transform: scale(1.35) rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  #squirrelFlash.on .sq-burst { animation-name: sq-still; animation-timing-function: linear; }
  #squirrelFlash.on .sq-lines, #squirrelFlash.on .sq-stars { animation-name: sq-still; animation-timing-function: linear; }
  @keyframes sq-still {
    0%, 75% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
  }
}