/*
 * FILE: assets/css/animations.css
 * PURPOSE: Scroll-triggered animations, counter animations, transitions.
 *          All animation classes. JS in animations.js triggers these via IntersectionObserver.
 */

/* ============================================================
   SCROLL REVEAL BASE
   ============================================================ */
.reveal { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.reveal-up    { transform: translateY(30px); }
.reveal.reveal-left  { transform: translateX(-30px); }
.reveal.reveal-right { transform: translateX(30px); }
.reveal.reveal-scale { transform: scale(0.95); }
.reveal.visible      { opacity: 1; transform: none; }

/* Delay utilities */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.count-up { display: inline-block; }

/* ============================================================
   PULSE / BADGE ANIMATION
   ============================================================ */
@keyframes pulse-teal {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,167,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(0,201,167,0); }
}
.pulse-badge { animation: pulse-teal 2.5s infinite; }

/* ============================================================
   LOADING SPINNER
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 20px; height: 20px; border: 3px solid rgba(0,201,167,0.3); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle; }

/* ============================================================
   FADE IN (page load)
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn 0.5s ease forwards; }

/* ============================================================
   HERO FLOAT
   ============================================================ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* ============================================================
   GRADIENT SHIFT (hero background)
   ============================================================ */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-animate { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }

/* ============================================================
   STICKY HEADER SCROLL SHADOW
   ============================================================ */
.site-header { transition: box-shadow 0.3s ease; }
.site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* ============================================================
   BUTTON RIPPLE
   ============================================================ */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0;
}
.btn:active::after { width: 200px; height: 200px; opacity: 0; }

/* ============================================================
   CARD HOVER LIFT (applied via JS adding class)
   ============================================================ */
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ============================================================
   SKIP TO CONTENT (accessibility)
   ============================================================ */
.skip-link {
    position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--teal); color: var(--navy); padding: var(--space-3) var(--space-6);
    border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; z-index: 10000;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}