/* Shared, restrained motion primitives - never more than one effect layered at once. */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(53, 208, 127, 0); }
}

@keyframes ripple {
    from { transform: scale(0); opacity: 0.45; }
    to { transform: scale(2.6); opacity: 0; }
}

.fade-in {
    animation: fadeIn var(--duration-slow) var(--ease-out) both;
}

.slide-up {
    animation: slideUp var(--duration-slow) var(--ease-out) both;
}

.scale-in {
    animation: scaleIn var(--duration-base) var(--ease-out) both;
}

/* Stagger helper for grids of cards - apply alongside .slide-up */
.stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 240ms; }

.pulse-live {
    animation: pulseGlow 2.4s ease-out infinite;
}

/* Ripple: a ::after pseudo-element triggered on click via a tiny bit of CSS-only affordance
   (position set by JS-free :active scaling instead, to avoid touching business JS). */
.btn-premium {
    position: relative;
    overflow: hidden;
}

.btn-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.btn-premium:active::after {
    opacity: 1;
    transform: scale(1.4);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .pulse-live { animation: none; }
}