/* === ANIMATIONS.CSS ===
   ПУТЬ: assets/css/animations.css
   НАЗНАЧЕНИЕ: keyframes, scroll-reveal, логотип-сборка, magnetic-button вспомогательные стили
   СВЯЗИ: index.php, main.css, effects.js
   РАЗМЕР: ~180 строк
*/

/* ==========================================================================
   LOGO (текстовая заглушка MBC — fade+rise на загрузке, лёгкий letter-spacing на hover)
   ========================================================================== */

.logo-text {
    opacity: 0;
    transform: translateY(6px);
    animation: logoFadeIn 0.8s var(--ease-out-expo) forwards;
    animation-delay: 0.2s;
    transition: letter-spacing 0.4s var(--ease-out-quart);
}

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

.brand:hover .logo-text {
    letter-spacing: 0.18em;
}

/* ==========================================================================
   SCROLL REVEAL (fade + rise, JS toggles .is-revealed via IntersectionObserver)
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
}

[data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); }

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.4s; }

/* ==========================================================================
   SPLIT TEXT WORD REVEAL (mission quote)
   ========================================================================== */

.split-word {
    opacity: 0;
    transform: translateY(0.6em);
    filter: blur(4px);
    transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart), filter 0.7s var(--ease-out-quart);
}

.mission-quote.is-revealed .split-word { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ==========================================================================
   MAGNETIC BUTTON (JS sets --mx/--my via transform, this just eases it back)
   ========================================================================== */

[data-magnetic] {
    transition: transform 0.35s var(--ease-out-quart);
    will-change: transform;
}

/* ==========================================================================
   HERO VIDEO SCROLL SCALE (progressive enhancement, animation-timeline)
   ========================================================================== */

@supports (animation-timeline: view()) {
    .hero-media video {
        animation: heroZoom linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 60%;
    }

    @keyframes heroZoom {
        from { transform: scale(1.12); filter: saturate(0.85) brightness(0.7) blur(0px); }
        to   { transform: scale(1); filter: saturate(0.85) brightness(0.7) blur(0px); }
    }
}

/* ==========================================================================
   FADE-IN PAGE LOAD
   ========================================================================== */

body.is-preload * { transition: none !important; animation-play-state: paused !important; }

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s var(--ease-out-quart), visibility 0.6s;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .logo-text { animation: none !important; opacity: 1; transform: none; }

    [data-reveal],
    [data-reveal-stagger] > *,
    .split-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .hero-media video { animation: none !important; }
}