/* ============================================
   MINDLOOPIA — Animations v2
   ============================================ */

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Fade In Up ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s var(--ease-out) forwards;
}

/* ── Hero entrance stagger ── */
.hero__content>* {
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.hero__content>*:nth-child(1) {
    animation-delay: 300ms;
}

.hero__content>*:nth-child(2) {
    animation-delay: 500ms;
}

.hero__content>*:nth-child(3) {
    animation-delay: 700ms;
}

.hero__content>*:nth-child(4) {
    animation-delay: 900ms;
}

.hero__content>*:nth-child(5) {
    animation-delay: 1100ms;
}

/* ── Image fade in ── */
@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }

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

.hero__bg-image {
    animation: imageFadeIn 1.5s var(--ease-out) forwards;
}

/* ── Count up numbers will be animated via JS ── */

/* ── Gradient Shift (CTA buttons) ── */
@keyframes gradient-shift {

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

    50% {
        background-position: 100% 50%;
    }
}

/* ── Pulse Glow (hero CTA) ── */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 140, 0, 0.4),
            0 4px 24px rgba(255, 140, 0, 0.35),
            0 0 50px rgba(255, 140, 0, 0.2);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(255, 140, 0, 0.6),
            0 8px 40px rgba(255, 140, 0, 0.5),
            0 0 70px rgba(255, 140, 0, 0.35);
    }
}

/* ── Float (hero visual) ── */
@keyframes float {

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

    25% {
        transform: translateY(-12px) rotate(0.5deg);
    }

    50% {
        transform: translateY(-6px) rotate(-0.5deg);
    }

    75% {
        transform: translateY(-18px) rotate(0.3deg);
    }
}

.hero__bg-image {
    animation: imageFadeIn 1.5s var(--ease-out) forwards, float 8s ease-in-out 1.5s infinite;
}