/* =============================================================================
   eddu Theme — animations.css
   Scroll-triggered animations via Intersection Observer
   ============================================================================= */

/* ─── Animation Base States ──────────────────────────────────────────────────── */

/* Elements marked for animation start hidden */
[data-animate] {
    opacity: 0;
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

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

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

[data-animate="fade-left"] {
    transform: translateX(32px);
}

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

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

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

/* When visible, animation plays */
[data-animate].is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}

/* ─── Stagger Delays ─────────────────────────────────────────────────────────── */

[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ─── Count-Up Numbers ───────────────────────────────────────────────────────── */

.countup-number {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Hero Entrance Animations ───────────────────────────────────────────────── */

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero__pre-headline {
    animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero__headline {
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.hero__sub {
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

.hero__actions {
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hero__scroll-indicator {
    animation: hero-fade-in 1s ease 0.9s both;
}

/* ─── Geometric shape pulse ─────────────────────────────────────────────────── */

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-12px) rotate(2deg); }
    66%       { transform: translateY(-6px) rotate(-1deg); }
}

.shape--float {
    animation: float 7s ease-in-out infinite;
}

.shape--float-slow {
    animation: float 11s ease-in-out infinite;
}

.shape--float-fast {
    animation: float 5s ease-in-out infinite;
}

/* ─── Carousel fade edges ────────────────────────────────────────────────────── */

.carousel::before,
.carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.carousel--dark::before {
    left: 0;
    background: linear-gradient(to right, var(--color-dark), transparent);
}

.carousel--dark::after {
    right: 0;
    background: linear-gradient(to left, var(--color-dark), transparent);
}

.carousel--light::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg), transparent);
}

.carousel--light::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg), transparent);
}

/* ─── Respect reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    [data-animate].is-visible {
        opacity: 1;
        transform: none;
    }

    .hero__pre-headline,
    .hero__headline,
    .hero__sub,
    .hero__actions,
    .hero__scroll-indicator {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .shape--float,
    .shape--float-slow,
    .shape--float-fast {
        animation: none;
    }

    .carousel__track {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}