/**
 * 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: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 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: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* ===========================================
   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: opacity 0.3s ease, transform 0.3s ease;
}

[data-animate="magnetic-btn"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            var(--overlay-white-subtle),
            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 EFFECT (glow text-shadow removed per editorial style)
   =========================================== */
[data-animate="pulse-glow"] {
    /* No glow animation — editorial aesthetic */
}

/* ===========================================
   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; }

/* ===========================================
   MASK REVEAL SYSTEM (scrollytelling.js)
   =========================================== */
[data-reveal] {
    opacity: 1;
}

.reveal-wrap {
    overflow: hidden;
    position: relative;
}

.reveal-inner {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-inner.revealed {
    transform: translateY(0);
}

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

    .reveal-inner {
        transform: none !important;
        transition: none !important;
    }

    [data-skew] {
        transform: none !important;
    }

    [data-parallax-zoom] > img {
        transform: none !important;
    }
}