/* ============================================
   BUTTERFLAI V3 - ANIMATIONS
   Scroll reveals and transitions
   ============================================ */

/* ─────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
   Elements start hidden and reveal on scroll
   ───────────────────────────────────────── */

/* Base state - hidden */
[data-reveal] {
    opacity: 0;
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}

/* Revealed state */
[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* Fade up */
[data-reveal="fade-up"] {
    transform: translateY(40px);
}

/* Fade down */
[data-reveal="fade-down"] {
    transform: translateY(-40px);
}

/* Fade left */
[data-reveal="fade-left"] {
    transform: translateX(40px);
}

/* Fade right */
[data-reveal="fade-right"] {
    transform: translateX(-40px);
}

/* Scale up */
[data-reveal="scale"] {
    transform: scale(0.95);
}

/* Just fade */
[data-reveal="fade"] {
    transform: none;
}

/* ─────────────────────────────────────────
   STAGGERED DELAYS
   For lists and grids
   ───────────────────────────────────────── */

[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }

/* ─────────────────────────────────────────
   HERO ANIMATIONS
   ───────────────────────────────────────── */

.v3-hero h1 {
    animation: heroFadeIn 1s var(--ease-out) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.v3-hero-subtitle {
    animation: heroFadeIn 1s var(--ease-out) forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.v3-hero-description {
    animation: heroFadeIn 1s var(--ease-out) forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.v3-hero-cta {
    animation: heroFadeIn 1s var(--ease-out) forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

.v3-hero-visual {
    animation: heroFadeIn 1.2s var(--ease-out) forwards;
    animation-delay: 1s;
    opacity: 0;
}

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

/* ─────────────────────────────────────────
   MORPHING GRADIENT ANIMATIONS
   For hero background effect
   ───────────────────────────────────────── */

/* Additional floating orb effect */
@keyframes floatOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(5%, -5%) scale(1.05);
    }
    50% {
        transform: translate(-3%, 3%) scale(0.98);
    }
    75% {
        transform: translate(2%, -2%) scale(1.02);
    }
}

/* Glow pulse for accent elements */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.6;
        filter: blur(40px);
    }
    50% {
        opacity: 0.8;
        filter: blur(60px);
    }
}

/* Color shift animation */
@keyframes colorShift {
    0%, 100% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(15deg);
    }
}

/* Apply subtle color shift to hero gradients */
.v3-hero::before,
.v3-hero::after {
    animation-timing-function: ease-in-out;
}

/* ─────────────────────────────────────────
   HOVER EFFECTS
   ───────────────────────────────────────── */

/* Lift on hover */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* Scale on hover */
.hover-scale {
    transition: transform var(--duration-normal) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ─────────────────────────────────────────
   LOADING STATES
   ───────────────────────────────────────── */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-bg-elevated) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ─────────────────────────────────────────
   REDUCED MOTION
   Respect user preferences
   ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }

    /* Disable morphing gradients and orbs */
    .v3-hero::before,
    .v3-hero::after,
    .v3-orb {
        animation: none !important;
    }

    .v3-hero-orbs {
        display: none;
    }
}