/* ===== Scroll Animation Base ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid items */
.features__grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}

.features__grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.secondary-features__grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.05s;
}

.secondary-features__grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.1s;
}

.secondary-features__grid .animate-on-scroll:nth-child(4) {
    transition-delay: 0.15s;
}

.secondary-features__grid .animate-on-scroll:nth-child(5) {
    transition-delay: 0.2s;
}

.secondary-features__grid .animate-on-scroll:nth-child(6) {
    transition-delay: 0.25s;
}

/* Timeline step stagger */
.timeline__step.animate-on-scroll:nth-child(3) {
    transition-delay: 0.15s;
}

.timeline__step.animate-on-scroll:nth-child(4) {
    transition-delay: 0.3s;
}

/* ===== Hero Phone Float ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

.hero__mockup.visible .phone-mockup {
    animation: float 4s ease-in-out infinite;
}

/* ===== Brand Statement Gradient Animation ===== */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.brand-statement__text.visible {
    animation: gradientShift 4s ease infinite;
}

/* ===== Brand Statement Scale-Up ===== */
.brand-statement__text {
    transform: scale(0.9) translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.brand-statement__text.visible {
    transform: scale(1) translateY(0);
}

/* ===== Timeline Line Draw ===== */
.timeline__line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease 0.3s;
}

.timeline__line.visible {
    transform: scaleX(1);
}

/* ===== Connection Line Pulse ===== */
@keyframes connectionPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.deep-dive__connection-line {
    animation: connectionPulse 2s ease-in-out infinite;
}

/* ===== Hero Scroll Button Bounce ===== */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

.hero__scroll-btn svg {
    animation: scrollBounce 1.5s ease-in-out infinite;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__mockup.visible .phone-mockup {
        animation: none;
    }

    .brand-statement__text {
        transform: none;
        transition: none;
        animation: none;
    }

    .brand-statement__text.visible {
        animation: none;
    }

    .hero__scroll-btn svg {
        animation: none;
    }

    .timeline__line {
        transform: scaleX(1);
        transition: none;
    }

    .deep-dive__connection-line {
        animation: none;
    }

    .radar-pulse {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }

    .glass-card:hover {
        transform: none;
    }

    .app-store-badge:hover {
        transform: none;
    }
}