:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    body:not(.race-page) #header,
    body:not(.race-page) .header-top {
        animation: siteDropIn .7s var(--motion-ease) both;
    }

    .site-hero h1,
    .inner-hero h1,
    .chambal-hero h1 {
        animation: siteHeroTitle .95s var(--motion-ease) both;
    }

    .site-hero p,
    .inner-hero p,
    .site-actions,
    .chambal-actions {
        animation: siteFadeLift .95s var(--motion-ease) .12s both;
    }

    .site-hero-media img,
    .chambal-hero-bg {
        will-change: transform;
    }

    .reveal-on-scroll,
    .site-motion {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        transition:
            opacity .7s var(--motion-ease),
            transform .7s var(--motion-ease);
        transition-delay: var(--motion-delay, 0ms);
        will-change: opacity, transform;
    }

    .reveal-on-scroll.is-visible,
    .site-motion.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }

    .site-motion-left {
        transform: translate3d(-28px, 0, 0);
    }

    .site-motion-right {
        transform: translate3d(28px, 0, 0);
    }

    .site-motion-zoom {
        transform: scale(.94);
    }

    .site-motion-left.is-visible,
    .site-motion-right.is-visible,
    .site-motion-zoom.is-visible {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .metric-card,
    .feature-card,
    .race-preview-card,
    .contact-card,
    .chambal-distance,
    .chambal-schedule-card,
    .route-map-card,
    .result-panel,
    .cta-panel,
    .box-events-slide {
        transition:
            transform .35s var(--motion-ease),
            box-shadow .35s var(--motion-ease),
            border-color .35s var(--motion-ease);
    }

    .metric-card:hover,
    .feature-card:hover,
    .race-preview-card:hover,
    .contact-card:hover,
    .chambal-distance:hover,
    .chambal-schedule-card:hover,
    .route-map-card:hover,
    .result-panel:hover,
    .cta-panel:hover,
    .box-events-slide:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: 0 30px 80px rgba(22, 26, 19, .16);
    }

    .flat-button,
    .outline-button,
    .text-link,
    .race-submenu-register,
    .btn-submit {
        position: relative;
        overflow: hidden;
        transition:
            transform .28s var(--motion-ease),
            box-shadow .28s var(--motion-ease),
            background .28s var(--motion-ease);
    }

    .flat-button::after,
    .outline-button::after,
    .race-submenu-register::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%) skewX(-18deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
        transition: transform .55s ease;
    }

    .flat-button:hover,
    .outline-button:hover,
    .text-link:hover,
    .race-submenu-register:hover,
    .btn-submit:hover {
        transform: translate3d(0, -2px, 0);
    }

    .flat-button:hover::after,
    .outline-button:hover::after,
    .race-submenu-register:hover::after {
        transform: translateX(120%) skewX(-18deg);
    }

    .image-stack img,
    .chambal-about-media img,
    .race-preview-card img,
    .route-map-card img,
    .challenge-gallery img,
    .gallery-grid img {
        transition: transform .7s var(--motion-ease), filter .7s var(--motion-ease);
    }

    .image-stack:hover img,
    .chambal-about-media:hover img,
    .race-preview-card:hover img,
    .route-map-card:hover img,
    .challenge-gallery a:hover img,
    .gallery-grid img:hover {
        transform: scale(1.045);
        filter: saturate(1.08);
    }

    .section-kicker::before,
    .chambal-section-label::before {
        transform-origin: left center;
        animation: siteLinePulse 2.2s ease-in-out infinite;
    }

    .go-top.show {
        animation: siteFloat 2.4s ease-in-out infinite;
    }
}

@keyframes siteDropIn {
    from {
        opacity: 0;
        transform: translate3d(0, -14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes siteHeroTitle {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes siteFadeLift {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes siteLinePulse {
    0%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
    50% {
        transform: scaleX(1.45);
        opacity: .64;
    }
}

@keyframes siteFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -6px, 0);
    }
}