/* ==========================================================================
   MetProm — ANIMATIONS
   Reveal · Cursor · Keyframes · Reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reveal-on-scroll
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .9s var(--mp-ease-out),
        transform .9s var(--mp-ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible[data-reveal="left"],
[data-reveal].is-visible[data-reveal="right"],
[data-reveal].is-visible[data-reveal="zoom"] {
    transform: none;
}

[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }
[data-reveal-delay="5"] { transition-delay: .5s; }
[data-reveal-delay="6"] { transition-delay: .6s; }
[data-reveal-delay="7"] { transition-delay: .7s; }
[data-reveal-delay="8"] { transition-delay: .8s; }

/* --------------------------------------------------------------------------
   2. Hero word reveal
   -------------------------------------------------------------------------- */
.mp-hero__title .mp-word > span {
    transform: translateY(110%);
    transition: transform 1s var(--mp-ease-out);
}
.mp-hero.is-ready .mp-hero__title .mp-word > span {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. Кастомный курсор
   -------------------------------------------------------------------------- */
.mp-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mp-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--mp-z-cursor);
    transform: translate(-50%, -50%);
    transition:
        width .3s var(--mp-ease),
        height .3s var(--mp-ease),
        background .3s var(--mp-ease),
        border-color .3s var(--mp-ease),
        opacity .3s var(--mp-ease);
    mix-blend-mode: difference;
    will-change: transform;
}
.mp-cursor.is-hover {
    width: 80px;
    height: 80px;
    background: var(--mp-accent-soft-2);
    border-color: var(--mp-accent);
}
.mp-cursor.is-hidden { opacity: 0; }

@media (hover: none), (pointer: coarse) {
    .mp-cursor { display: none; }
}

/* --------------------------------------------------------------------------
   4. Keyframes
   -------------------------------------------------------------------------- */
@keyframes mp-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes mp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.97); }
}
.mp-pulse { animation: mp-pulse 2s var(--mp-ease) infinite; }

@keyframes mp-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mp-fade-in { animation: mp-fade-in .6s var(--mp-ease-out) both; }

@keyframes mp-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.mp-scale-in { animation: mp-scale-in .5s var(--mp-ease-out) both; }

@keyframes mp-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -12px, 0); }
}
.mp-float { animation: mp-float 6s var(--mp-ease) infinite; }

@keyframes mp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mp-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--mp-line);
    border-top-color: var(--mp-accent);
    border-radius: 50%;
    animation: mp-spin .8s linear infinite;
}

/* --------------------------------------------------------------------------
   5. Glow
   -------------------------------------------------------------------------- */
.mp-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--mp-accent-glow), transparent 65%);
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
    opacity: .6;
}
.mp-glow--burgundy {
    background: radial-gradient(circle, rgba(105, 34, 36, .4), transparent 65%);
}

/* --------------------------------------------------------------------------
   6. Underline
   -------------------------------------------------------------------------- */
.mp-underline {
    position: relative;
    display: inline-block;
}
.mp-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--mp-ease-out);
}
.mp-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   7. Icon spin
   -------------------------------------------------------------------------- */
.mp-icon-spin:hover svg {
    animation: mp-spin 1.4s linear infinite;
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .mp-hero__title .mp-word > span {
        transform: none !important;
    }
    .mp-cursor { display: none; }
}

/* --------------------------------------------------------------------------
   9. Утилитарные анимации
   -------------------------------------------------------------------------- */
.mp-transition { transition: all var(--mp-dur) var(--mp-ease); }
.mp-transition--fast { transition: all var(--mp-dur-fast) var(--mp-ease); }
.mp-transition--slow { transition: all var(--mp-dur-slow) var(--mp-ease); }
.mp-no-anim { animation: none !important; transition: none !important; }

/* --------------------------------------------------------------------------
   10. Совместимость с AOS-подобными классами
   -------------------------------------------------------------------------- */
.mp-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--mp-ease-out), transform .9s var(--mp-ease-out);
}
.mp-reveal.mp-reveal--active {
    opacity: 1;
    transform: none;
}