/**
 * ANIMATIONS.CSS - Unified Animation System
 * Single source of truth for ALL page animations
 * Used globally across all pages
 */

/* ===========================================
   BASE STATE - All animated elements
   =========================================== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===========================================
   ANIMATED STATE - Applied via JS observer
   =========================================== */
[data-animate].animated {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0) rotateY(0);
}

/* ===========================================
   FADE ANIMATIONS
   =========================================== */
[data-animate="fade-up"] {
    transform: translateY(60px);
}

[data-animate="fade-down"] {
    transform: translateY(-60px);
}

[data-animate="fade-up"].animated,
[data-animate="fade-down"].animated {
    transform: translateY(0);
}

/* ===========================================
   SLIDE ANIMATIONS
   =========================================== */
[data-animate="slide-left"] {
    transform: translateX(-100px);
}

[data-animate="slide-right"] {
    transform: translateX(100px);
}

[data-animate="slide-up"] {
    transform: translateY(60px);
}

[data-animate="slide-down"] {
    transform: translateY(-60px);
}

[data-animate="slide-left"].animated,
[data-animate="slide-right"].animated,
[data-animate="slide-up"].animated,
[data-animate="slide-down"].animated {
    transform: translateX(0) translateY(0);
}

/* ===========================================
   SCALE ANIMATIONS
   =========================================== */
[data-animate="scale-up"] {
    transform: scale(0.8);
}

[data-animate="zoom-in"] {
    transform: scale(0.9);
}

[data-animate="scale-up"].animated,
[data-animate="zoom-in"].animated {
    transform: scale(1);
}

/* ===========================================
   CARD & SECTION REVEALS
   =========================================== */
[data-animate="card-reveal"] {
    transform: translateY(80px) scale(0.9);
}

[data-animate="card-reveal"].animated {
    transform: translateY(0) scale(1);
}

[data-animate="team-reveal"] {
    transform: translateY(100px) rotateX(45deg);
    perspective: 1000px;
}

[data-animate="team-reveal"].animated {
    transform: translateY(0) rotateX(0);
}

[data-animate="image-reveal"] {
    transform: scale(1.1);
    overflow: hidden;
}

[data-animate="image-reveal"].animated {
    transform: scale(1);
}

/* ===========================================
   FORM ANIMATIONS
   =========================================== */
[data-animate="form-reveal"] {
    transform: perspective(1000px) rotateX(45deg);
}

[data-animate="form-reveal"].animated {
    transform: perspective(1000px) rotateX(0);
}

[data-animate="input-reveal"] {
    transform: translateX(-100px);
}

[data-animate="input-reveal"].animated {
    transform: translateX(0);
}

/* ===========================================
   FLIP ANIMATION
   =========================================== */
[data-animate="flip-in"] {
    transform: perspective(400px) rotateY(90deg);
}

[data-animate="flip-in"].animated {
    transform: perspective(400px) rotateY(0);
}

/* ===========================================
   BADGE REVEAL
   =========================================== */
[data-animate="badge-reveal"] {
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-animate="badge-reveal"].animated {
    transform: scale(1);
}

/* ===========================================
   SPECIAL: Hero Section (handled by JS for timing)
   =========================================== */
[data-animate="hero-title"] {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate="hero-title"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Hero subtitle and buttons inherit from hero-title timing via JS */
.hero-subtitle,
.action-buttons {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===========================================
   SPECIAL: Statistics Section
   =========================================== */
[data-animate="stats-section"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-animate="stats-section"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================
   MAGNETIC BUTTON EFFECT
   =========================================== */
[data-animate="magnetic-btn"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-animate="magnetic-btn"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.5s ease;
}

[data-animate="magnetic-btn"]:hover::before {
    left: 100%;
}

/* ===========================================
   GRADIENT TEXT EFFECT
   =========================================== */
[data-animate="gradient-text"] {
    background: linear-gradient(45deg,
            var(--primary-black),
            var(--magenta),
            var(--primary-black));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

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

/* ===========================================
   PULSE & GLOW EFFECTS
   =========================================== */
[data-animate="pulse-glow"] {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.6);
        transform: scale(1.02);
    }
}

/* ===========================================
   EXPAND WIDTH
   =========================================== */
[data-animate="expand-width"] {
    width: 0;
    transition: width 1s ease-out;
}

[data-animate="expand-width"].animated {
    width: 200px;
}

/* ===========================================
   DELAY UTILITIES
   data-delay attribute handled via CSS custom properties
   =========================================== */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="800"] { transition-delay: 0.8s; }
[data-delay="1000"] { transition-delay: 1s; }
[data-delay="1200"] { transition-delay: 1.2s; }

/* ===========================================
   REDUCED MOTION PREFERENCE
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate].animated {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}