/* animations.css — @keyframes uit style.css gehaald */

@keyframes equalize {
  0%, 100% { transform: scaleY(0.2); opacity: 0.35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes title-pulse {
    0%, 100% {
        transform: scaleY(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scaleY(1.05);
        opacity: 1;
    }
}

@keyframes bni-pulse{
    0%{ opacity: 0.45; }
    100%{ opacity: 0.95; }
}

@keyframes bni-spin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

@keyframes mediaPromptPulse{
  0%,100% { transform: translateY(-2px) scale(1); }
  50%     { transform: translateY(-2px) scale(1.03); }
}

@keyframes nextPulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
  50%  { transform: scale(1.05); box-shadow: 0 0 18px 6px rgba(255,255,255,.18); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
}

@keyframes suspenseBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.09); }
}

@keyframes suspenseDots {
    to { width: 1.3em; }
}

@keyframes suspensePulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.04); opacity: 1; }
}

@keyframes startFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes activeCardPulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); 
    }
    50% { 
        transform: scale(1.05); /* Wordt iets groter */
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.7); /* Gloed wordt sterker */
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); 
    }
}

@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    25% { transform: translateX(-10px); } 
    75% { transform: translateX(10px); } 
}

@keyframes popupIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes beatline-note-float{
  0%   { bottom: -14px; opacity: 0; transform: translateX(0) scale(0.95); }
  12%  { opacity: 0.95; }
  85%  { opacity: 0.95; }
  100% { bottom: 110%; opacity: 0; transform: translateX(var(--drift, 0px)) scale(1.15); }
}

@keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }