/**
 * File: animations.css
 * Project: ER Marketing Racing Website
 * Purpose: Motion system for page transitions, reveal effects, and identity accents.
 * Author: DrTridz & BlueMAS - https://bluemas.net
 * Version: 1.0.1
 * Type: CSS Animation Stylesheet
 */

@keyframes loaderPulse {
    from { transform: translateX(0) skewX(-24deg); opacity: .35; }
    to { transform: translateX(28px) skewX(-24deg); opacity: 1; }
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroImageEnter {
    from { opacity: 0; transform: scale(1.12); }
    to { opacity: 1; transform: scale(1.04); }
}

@keyframes speedSweep {
    0% { transform: translateX(-20px) skewX(-24deg); opacity: 0; }
    35% { opacity: .12; }
    100% { transform: translateX(18px) skewX(-24deg); opacity: .06; }
}

@keyframes floatMark {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sheen {
    0% { transform: translateX(-140%); }
    55%, 100% { transform: translateX(160%); }
}

main {
    animation: pageEnter 520ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__visual img {
    animation: heroImageEnter 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.speed-lines span {
    animation: speedSweep 1.5s ease-out both;
}

.speed-lines span:nth-child(2) { animation-delay: 90ms; }
.speed-lines span:nth-child(3) { animation-delay: 170ms; }

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 680ms cubic-bezier(.2,.8,.2,1),
        transform 680ms cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal='left'] {
    transform: translateX(-34px);
}

html[dir='rtl'] [data-reveal='left'] {
    transform: translateX(34px);
}

[data-reveal='right'] {
    transform: translateX(34px);
}

html[dir='rtl'] [data-reveal='right'] {
    transform: translateX(-34px);
}

[data-reveal='scale'] {
    transform: scale(.96);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.partner-slot__mark,
.statement-card__icon {
    animation: floatMark 4s ease-in-out infinite;
}

.partner-slot:nth-child(2n) .partner-slot__mark,
.statement-card:nth-child(2n) .statement-card__icon {
    animation-delay: -1.6s;
}

.level-card__label::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.26) 48%, transparent 70%);
    animation: sheen 5.8s ease-in-out infinite;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 180ms ease-out both fadeOut;
}

::view-transition-new(root) {
    animation: 280ms ease-out both fadeIn;
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-5px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}