/* ========================================
   COMMVIO — Animations
   Keyframes and reveal system
   ======================================== */

/* ── Keyframes ── */

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes drawLine {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ── Reveal System ── */
/* Add [data-reveal] to any element to animate on scroll */

[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}

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

[data-reveal="scale"] {
    transform: scale(0.94);
}

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

[data-reveal="slide-left"] {
    transform: translateX(-30px);
}

/* Revealed state */
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays via data attribute */
[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;
}

[data-reveal-delay="7"] {
    transition-delay: 700ms;
}

[data-reveal-delay="8"] {
    transition-delay: 800ms;
}

/* ── Hero Entry Animation ── */

.hero-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: revealUp 0.9s var(--ease-out) forwards;
}

.hero-animate--delay-1 {
    animation-delay: 0.1s;
}

.hero-animate--delay-2 {
    animation-delay: 0.25s;
}

.hero-animate--delay-3 {
    animation-delay: 0.4s;
}

.hero-animate--delay-4 {
    animation-delay: 0.55s;
}

/* ── Header Transition ── */

.site-header {
    transition: background-color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        padding var(--duration-normal) var(--ease-out),
        backdrop-filter var(--duration-normal) var(--ease-out);
}

/* ── Hover Interactions ── */

.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Line Animation (for ecosystem connectors) ── */

.animate-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.animate-line.revealed {
    animation: drawLine 1s var(--ease-out) forwards;
}