/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); }
}

/* Typing Effect Simulation */
.typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--accent);
    animation: typing 3s steps(30, end) infinite alternate, blink .75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--accent); } }

/* Ripple Effect */
.btn-ripple { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 600ms linear; background-color: rgba(255, 255, 255, 0.7); }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* Animated Background Shapes */
.animated-bg { position: relative; }
.animated-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, rgba(255,255,255,0) 70%); z-index: 0; animation: rotateBg 20s linear infinite; pointer-events: none; }
@keyframes rotateBg { 100% { transform: rotate(360deg); } }

/* Particle placeholders */
.particle-bg { background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 30px 30px; }