/* ─── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes ridge-swipe {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes ridge-fade {
    to {
        opacity: 0;
    }
}

@keyframes fill-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes elements-fade {
    to {
        opacity: 1;
    }
}

@keyframes elements-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes elements-appear-transparent {
    to {
        opacity: 0.2;
        transform: translateY(0);
    }
}

@keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.75) translateY(120px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

@keyframes lock-bounce {
    0% {
        transform: translateY(0) rotate(0) scale(1);
    }

    12.5% {
        transform: translateY(-4px) rotate(22deg) scale(1.03);
    }

    25% {
        transform: translateY(0) rotate(0) scale(1);
    }

    37.5% {
        transform: translateY(-3px) rotate(-22deg) scale(1.02);
    }

    50% {
        transform: translateY(0) rotate(0) scale(1);
    }

    62.5% {
        transform: translateY(-2px) rotate(16deg) scale(1.015);
    }

    75% {
        transform: translateY(0) rotate(0) scale(1);
    }

    87.5% {
        transform: translateY(-1px) rotate(-12deg) scale(1.01);
    }

    100% {
        transform: translateY(0) rotate(0) scale(1);
    }
}

@keyframes secret-card-shine {
    0% {
        left: -80%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* ─── Scroll lock ────────────────────────────────────────────────────────── */

.lock-scroll {
    overflow: hidden;
}

/* ─── Targeted transitions ──────────────────────── */

/* Кнопки — цвет фона, цвет текста, граница */
.btn {
    transition:
            background-color 0.2s ease-in-out,
            border-color     0.2s ease-in-out,
            color            0.2s ease-in-out;
}

/* Кнопка закрытия модального окна */
.close-btn {
    transition: color 0.2s ease-in-out;
}

/* Поисковая строка — фон и тень при ховере */
.search {
    transition:
            background-color 0.2s ease-in-out,
            box-shadow       0.2s ease-in-out;
}

/* Ссылки и иконки в футере — прозрачность при ховере */
.footer-label,
.social {
    transition: opacity 0.2s ease-in-out;
}

/* Карточки гонок — подъём при ховере */
.race {
    transition:
            transform 0.2s ease-in-out,
            opacity   0.6s ease-out;        /* opacity нужен для scroll-reveal */
}

/* ─── Header motion ──────────────────────────────────────────────────────── */

.header {
    opacity: 0;
    will-change: opacity, transform;
    animation: elements-appear 500ms ease-out 600ms forwards;
}

.header-wrapper {
    opacity: 0;
    will-change: opacity, transform;
    animation: elements-appear 500ms ease-out 1600ms forwards;
}


/* ─── Hero intro motion ──────────────────────────────────────────────────── */

.hero::before {
    opacity: 0;
    animation: elements-fade 600ms ease-out 1300ms forwards;
}

.hero .mountains-ornament {
    opacity: 0;
    animation: fill-in 180ms ease-out 1120ms forwards;
}

.hero .mountains-ridge {
    clip-path: inset(0 100% 0 0);
    animation:
            ridge-swipe 940ms cubic-bezier(.65, 0, .35, 1) 140ms forwards,
            ridge-fade  240ms ease-out 1220ms forwards;
}

.hero-wrapper {
    opacity: 0;
    will-change: opacity;
    animation: elements-fade 600ms ease-out 1900ms forwards;
}

.hero-logo {
    opacity: 0;
    transform: translateY(15px);
    will-change: opacity, transform;
    animation: elements-appear 500ms ease-out 1600ms forwards;
}

.hero h1 {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
    animation: elements-appear 600ms ease-out 1900ms forwards;
}

.hero .actions .btn {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
    animation: elements-appear 500ms ease-out 2200ms forwards;
}

.hero-m-shape {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    animation: elements-appear-transparent 600ms ease-out 2200ms forwards;
}

/* ─── Scroll reveal motion ───────────────────────────────────────────────── */

.scroll-section .section-title,
.scroll-section h2,
.scroll-section .medal,
.scroll-section .medal-info,
.scroll-section .race,
.scroll-section .search,
.scroll-section .quest,
.scroll-section .quest-info,
.scroll-section .quest-form-wrapper,
.scroll-section .question,
.scroll-section .video-medal,
.scroll-section .anons,
.scroll-section .anons-info,
.scroll-section .anons-banner {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-section .video-medal {
    opacity: 0;
    transform: translateY(96px);
    transition: opacity 1.5s ease-out, transform 1s ease-out;
}

.scroll-section.is-revealed .section-title,
.scroll-section.is-revealed h2,
.scroll-section.is-revealed .medal-info,
.scroll-section.is-revealed .quest-info,
.scroll-section.is-revealed .quest-form-wrapper,
.scroll-section.is-revealed .anons-info,
.scroll-section.is-revealed .anons-banner
{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.scroll-section.is-revealed .video-medal {
    transform: translateY(0);
    transition-delay: 250ms;
}

.video-medal.is-video-visible {
    opacity: 1;
}

.scroll-section.is-revealed .race {
    opacity: 1;
    transform: translateY(0);
}

.scroll-section.is-revealed .race:nth-child(1) { transition-delay: 0s; }
.scroll-section.is-revealed .race:nth-child(2) { transition-delay: 0.2s; }
.scroll-section.is-revealed .race:nth-child(3) { transition-delay: 0.4s; }
.scroll-section.is-revealed .race:nth-child(4) { transition-delay: 0.6s; }
.scroll-section.is-revealed .race:nth-child(5) { transition-delay: 0.8s; }
.scroll-section.is-revealed .race:nth-child(6) { transition-delay: 1s; }
.scroll-section.is-revealed .race:nth-child(7) { transition-delay: 1.2s; }
.scroll-section.is-revealed .race:nth-child(8) { transition-delay: 1.4s; }

.scroll-section.is-revealed .search,
.scroll-section.is-revealed .quest,
.scroll-section.is-revealed .anons
{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.scroll-section .questions-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-out;
}

.scroll-section.is-revealed .questions-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.scroll-section.is-revealed .question {
    opacity: 1;
    transform: translateY(0);
}

.scroll-section.is-revealed .question:nth-child(1) { transition-delay: 0.3s; }
.scroll-section.is-revealed .question:nth-child(2) { transition-delay: 0.4s; }
.scroll-section.is-revealed .question:nth-child(3) { transition-delay: 0.5s; }
.scroll-section.is-revealed .question:nth-child(4) { transition-delay: 0.6s; }
.scroll-section.is-revealed .question:nth-child(5) { transition-delay: 0.7s; }
.scroll-section.is-revealed .question:nth-child(6) { transition-delay: 0.8s; }
.scroll-section.is-revealed .question:nth-child(7) { transition-delay: 0.9s; }
.scroll-section.is-revealed .question:nth-child(8) { transition-delay: 1s; }
.scroll-section.is-revealed .question:nth-child(9) { transition-delay: 1.1s; }


/* После завершения анимации — убираем will-change и сбрасываем задержки */

.scroll-section.animations-done .section-title,
.scroll-section.animations-done h2,
.scroll-section.animations-done .medal-info,
.scroll-section.animations-done .race,
.scroll-section.animations-done .quest,
.scroll-section.animations-done .quest-info,
.scroll-section.animations-done .quest-form-wrapper,
.scroll-section.animations-done .anons,
.scroll-section.animations-done .anons-info,
.scroll-section.animations-done .anons-banner,
.scroll-section.animations-done .search,
.scroll-section.animations-done .questions-wrapper,
.scroll-section.animations-done .question {

    transition-delay: 0s !important;
    will-change: auto;
}

.hero-animations-done .header,
.hero-animations-done .header-wrapper,
.hero-animations-done .hero-wrapper,
.hero-animations-done .hero-logo,
.hero-animations-done .hero h1.extra-subtitle,
.hero-animations-done .hero .actions .btn,
.hero-animations-done .hero-m-shape {
    will-change: auto;
}

/* ─── Card hover motion ──────────────────────────────────────────────────── */

.scroll-section.is-revealed .race:hover {
    transform: scale(1.02);
    transition:
            transform 0.2s ease-in-out,
            opacity   0.2s ease-in-out;
}

.scroll-section.is-revealed .race.secret:hover .lock-icon {
    transform: none;
    transform-origin: center bottom;
    animation: lock-bounce 750ms ease-in-out;
}

.race::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -80%;
    z-index: 3;

    width: 40%;
    height: 180%;

    background: linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0) 65%,
            transparent 100%
    );

    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}

.scroll-section.is-revealed .race:hover::before {
    animation: secret-card-shine 900ms ease-out;
}

/* ─── FAQ accordion motion ───────────────────────────────────────────────── */

.question-icon {
    transition: transform 0.4s ease-in-out;
}

.question[data-question-expanded="true"] .question-icon {
    transform: rotate(45deg);
}

.question-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.question[data-question-expanded="true"] .question-answer {
    max-height: 600px;
}

/* ─── Modal motion ──────────────────────────────────────────────── */

.search-modal, .event-modal {
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.search-modal.is-open,
.event-modal.is-open {
    opacity: 1;
}

.search-modal-wrapper,
.event-modal-wrapper {
    opacity: 0;
    transform: scale(0.75) translateY(120px);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.5s;
}

.search-modal.is-open .search-modal-wrapper,
.event-modal.is-open .event-modal-wrapper {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.search-modal .close-btn,
.event-modal .close-btn {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.2s;
}

.search-modal.is-open .close-btn,
.event-modal.is-open .close-btn {
    opacity: 1;
    transform: translateY(0);
}