/* Every @keyframes in one place: an animation name is global, so two files defining the same one
   would silently pick whichever loads last. */
@layer base {
  @keyframes drain { to { transform: scaleX(0); } }
  @keyframes install-in { from { opacity: 0; transform: translate(-50%, 16px); } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes drop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
  @keyframes rec { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
  @keyframes breathe { 50% { background: color-mix(in srgb, var(--amber) 22%, transparent); } }
  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
  @keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
  @keyframes cliply-glitch {
  0%, 100% { transform: translate(0); clip-path: inset(0); }
  20% { transform: translate(-2px, 1px); clip-path: inset(20% 0 40% 0); }
  40% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
  60% { transform: translate(-1px, 0); clip-path: inset(10% 0 70% 0); }
  80% { transform: translate(1px, 1px); clip-path: inset(40% 0 30% 0); }
}
  @keyframes cliply-signal {
  0% { opacity: 0; transform: translateY(7px) scale(.55); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-7px) scale(1.15); }
}
  @keyframes fade { from { opacity: 0; } }
  @keyframes over-blink {
  0%, 100% { box-shadow: 0 0 0 3px var(--tally), 0 0 20px color-mix(in srgb, var(--tally) 80%, transparent), inset 0 0 0 200px color-mix(in srgb, var(--tally) 55%, transparent); }
  50% { box-shadow: 0 0 0 3px var(--tally), inset 0 0 0 200px color-mix(in srgb, var(--tally) 8%, transparent); }
}
  @keyframes quick-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.25); filter: blur(4px); } }
  @keyframes egg-in { from { opacity: 0; } }
  @keyframes egg-out { to { opacity: 0; } }
  @keyframes egg-rise { from { transform: translateY(75vh) rotate(-8deg); } }
  @keyframes egg-sway { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
  @keyframes egg-drop { to { transform: translateY(80vh) rotate(6deg); } }
  @keyframes egg-wave { 0%, 100% { translate: 0 0; } 35% { translate: 0 -22px; } 60% { translate: 0 5px; } }
  @keyframes hint-in { from { opacity: 0; translate: 0 -6px; } }
  @keyframes lamp-ask { 50% { box-shadow: inset 0 0 0 3px var(--sunk), 0 0 0 0 transparent; opacity: .55; } }
  @keyframes shake-l { from { transform: translateX(-56px); opacity: 0; } 65% { transform: translateX(3px); opacity: 1; } to { transform: none; } }
  @keyframes shake-r { from { transform: translateX(56px); opacity: 0; } 65% { transform: translateX(-3px); opacity: 1; } to { transform: none; } }
  @keyframes pw-in { from { opacity: 0; transform: translateY(6px); } }
}