/* ===============================================
   SLIDE 09 — ANIMATION KEYFRAMES
   Reusable animation library (29 keyframes)
   Loaded by slide_09_index.html
   Note: 'shake' is intentionally omitted to avoid
   collision with the local 3-keyframe shake used
   by .match-target / .feedback-correct.
   =============================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0); }
    55%  { opacity: 1; transform: scale(1.18); }
    78%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes flipIn {
    0%   { opacity: 0; transform: perspective(800px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}
@keyframes drawLine {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes drawLineX {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.06); }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 14px rgba(255,255,255,0.05); }
    50%      { box-shadow: 0 0 22px currentColor, 0 0 40px rgba(255,255,255,0.15); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-3deg); }
    75%      { transform: rotate(3deg); }
}
@keyframes orbit {
    from { transform: rotate(0deg) translateX(var(--orbit-r, 24px)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--orbit-r, 24px)) rotate(-360deg); }
}
@keyframes orbitReverse {
    from { transform: rotate(0deg) translateX(var(--orbit-r, 28px)) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(var(--orbit-r, 28px)) rotate(360deg); }
}
@keyframes rise {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(-80px); opacity: 0; }
}
@keyframes fall {
    0%   { transform: translateY(-50px); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(60px); opacity: 0; }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}
@keyframes countTick {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
@keyframes heatPulse {
    0%, 100% { box-shadow: 0 0 8px var(--proton), 0 0 0 transparent; }
    50%      { box-shadow: 0 0 24px var(--proton), 0 0 48px var(--proton); }
}
@keyframes droplet {
    0%   { transform: translateY(-30px) scale(0.6); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(60px) scale(1); opacity: 0; }
}
@keyframes ringFill {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

@keyframes flash {
    0%, 100% { background-color: transparent; }
    50%      { background-color: rgba(234, 179, 8, 0.4); }
}

@keyframes igZap {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes igShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-6px); }
    80%      { transform: translateX(6px); }
}