/* ============================================================
   ANIMATIONS — Keyframes, scroll reveal, hero entrance
   ============================================================ */

/* ── Scroll reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

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

.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.48s; }
.reveal--delay-5 { transition-delay: 0.60s; }

/* Slide from side variants (for channel blocks) */
.reveal--from-start {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

[dir="rtl"] .reveal--from-start {
    transform: translateX(32px);
}

.reveal--from-end {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

[dir="rtl"] .reveal--from-end {
    transform: translateX(-32px);
}

.reveal--from-start.revealed,
.reveal--from-end.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ── Hero entrance — fires on page load ── */
.hero--loaded .hero__eyebrow {
    animation: hero-fade-up 0.6s ease 0.05s both;
}

.hero--loaded .hero__headline {
    animation: hero-fade-up 0.65s ease 0.15s both;
}

.hero--loaded .hero__subheadline {
    animation: hero-fade-up 0.65s ease 0.28s both;
}

.hero--loaded .hero__buttons {
    animation: hero-fade-up 0.65s ease 0.40s both;
}

.hero--loaded .hero__trust {
    animation: hero-fade-up 0.65s ease 0.52s both;
}

.hero--loaded .hero__visual {
    animation: hero-visual-in 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}

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

@keyframes hero-visual-in {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Logo strip scroll ── */
@keyframes scroll-logos-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-logos-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* ── Staggered grid items ── */
.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.15s !important; }
.stagger-3 { transition-delay: 0.25s !important; }
.stagger-4 { transition-delay: 0.35s !important; }
.stagger-5 { transition-delay: 0.45s !important; }
.stagger-6 { transition-delay: 0.55s !important; }

/* ── Floating animation for hero mockup ── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.hero__visual.revealed .hero__mockup {
    animation: float 5s ease-in-out infinite;
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--from-start,
    .reveal--from-end {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero--loaded .hero__eyebrow,
    .hero--loaded .hero__headline,
    .hero--loaded .hero__subheadline,
    .hero--loaded .hero__buttons,
    .hero--loaded .hero__trust,
    .hero--loaded .hero__visual {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .logo-strip__track {
        animation: none;
    }

    .hero__visual.revealed .hero__mockup {
        animation: none;
    }
}