/* ==============================================
   animations.css
   Reusable keyframes and animation utilities.
   Depends on tokens.css.
   ============================================== */

/* -----------------------------------------------
   KEYFRAMES
----------------------------------------------- */

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

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

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(28px, -22px) scale(1.04); }
    66%       { transform: translate(-18px, 16px) scale(0.97); }
}

@keyframes gridDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

@keyframes gentleBob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.7); }
}

@keyframes rotateStar {
    to { transform: rotate(360deg); }
}

@keyframes spinnerRing {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------
   UTILITY CLASSES
   Apply directly to elements.
   Use animation-delay inline for staggering.
----------------------------------------------- */

.anim-fade-in       { animation: fadeIn         0.6s ease-out both; }
.anim-slide-up      { animation: fadeSlideUp    0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-slide-down    { animation: fadeSlideDown  0.6s ease-out both; }
.anim-slide-left    { animation: fadeSlideLeft  0.65s ease-out both; }
.anim-slide-right   { animation: fadeSlideRight 0.65s ease-out both; }
.anim-word-rise     { animation: wordRise       0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-scale-in      { animation: scaleIn        0.5s ease-out both; }
.anim-bob           { animation: gentleBob      4s ease-in-out infinite; }

/* Stagger delays — combine with any anim-* class */
.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.2s; }
.delay-3  { animation-delay: 0.35s; }
.delay-4  { animation-delay: 0.5s; }
.delay-5  { animation-delay: 0.65s; }
.delay-6  { animation-delay: 0.8s; }
.delay-7  { animation-delay: 1.0s; }
.delay-8  { animation-delay: 1.2s; }
.delay-9  { animation-delay: 1.4s; }
.delay-10 { animation-delay: 1.6s; }