/* ============================================================
   ASR Landing — motion.css
   Keyframes, reveal states and reduced-motion overrides.
   All scroll/mouse transforms are applied by js/parallax.js; the CSS
   here only owns timed animations and transition states.
   ============================================================ */

/* ---------- Preloader ---------- */

#preloader {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--base);
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity 400ms var(--ease);
}

#preloader.is-done {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
}

.preloader__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(244, 246, 248, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 246, 248, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0;
    animation: preloader-grid-in 600ms var(--ease) forwards;
}

.preloader__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.preloader__word {
    /* Each letter is its own inline span, so in an RTL document they would be
       laid out right-to-left and read "RSA". Pin the word to LTR. */
    direction: ltr;
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 64px);
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--text);
    animation: preloader-track-in 900ms var(--ease) forwards;
}

.preloader__word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: preloader-letter-in 500ms var(--ease) forwards;
}

.preloader__word span:nth-child(2) {
    animation-delay: 90ms;
}

.preloader__word span:nth-child(3) {
    animation-delay: 180ms;
}

.preloader__line {
    width: min(46vw, 300px);
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
}

#preloader.phase-2 .preloader__line {
    animation: preloader-line-sweep 600ms var(--ease) forwards;
}

@keyframes preloader-grid-in {
    to {
        opacity: 1;
    }
}

@keyframes preloader-track-in {
    to {
        letter-spacing: 0.08em;
    }
}

@keyframes preloader-letter-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes preloader-line-sweep {
    to {
        transform: scaleX(1);
    }
}

/* ---------- Hero entrance (triggered by body.is-ready) ---------- */

[data-hero-el] {
    opacity: 0;
    transform: translateY(26px);
}

.hero__line {
    clip-path: inset(0 0 100% 0);
}

body.is-ready [data-hero-el] {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease), transform 800ms var(--ease), clip-path 900ms var(--ease);
    transition-delay: var(--d, 0ms);
}

body.is-ready .hero__line {
    clip-path: inset(0 0 -10% 0);
}

/* Sparkline draws itself in after the hero settles. */
.mockup__spark path {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
}

body.is-ready .mockup__spark path {
    transition: stroke-dashoffset 1400ms var(--ease) 900ms;
    stroke-dashoffset: 0;
}

/* ---------- Marquee ---------- */

@keyframes marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

.marquee__track {
    animation: marquee-scroll 36s linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
    animation-play-state: paused;
}

[dir="rtl"] .marquee__track {
    animation-direction: reverse;
}

/* ---------- Ambient motion (orbs + mockup bob) ---------- */

@keyframes orb-breathe {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.07);
    }
}

.hero__orb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: orb-breathe 9s ease-in-out infinite alternate;
}

@keyframes mockup-bob {
    from {
        transform: translateY(-6px);
    }
    to {
        transform: translateY(8px);
    }
}

.mockup__bob {
    animation: mockup-bob 7s ease-in-out infinite alternate;
}

.mockup--toast .mockup__bob {
    animation-duration: 9.5s;
    animation-delay: -3s;
}

@keyframes dot-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

.mockup__toast-dot {
    animation: dot-pulse 2.4s ease-in-out infinite;
}

/* ---------- Scroll reveals ---------- */

@keyframes shimmer {
    to {
        background-position: -220% 0;
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 750ms var(--ease), transform 750ms var(--ease);
}

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

/* Staggered groups: children animate in with per-child transition-delay
   (set inline by js/reveal.js). */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}

[data-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}

/* ---------- Mobile menu links ---------- */

#mobile-menu .mobile-menu__link {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}

#mobile-menu.open .mobile-menu__link {
    opacity: 1;
    transform: none;
}

/* ---------- Contact success check draw ---------- */

.contact__check circle,
.contact__check path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.contact__check.is-drawn circle {
    animation: check-circle-draw 700ms var(--ease) forwards;
}

.contact__check.is-drawn path {
    animation: check-mark-draw 550ms var(--ease) 450ms forwards;
}

@keyframes check-circle-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes check-mark-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ---------- Reduced motion overrides ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #preloader {
        display: none;
    }

    [data-hero-el],
    .hero__line,
    [data-reveal],
    [data-stagger] > *,
    #mobile-menu .mobile-menu__link {
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .mockup__spark path {
        stroke-dashoffset: 0;
    }

    .contact__check circle,
    .contact__check path {
        stroke-dashoffset: 0;
    }

    .marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mockup__bob,
    .hero__orb::before,
    .mockup__toast-dot {
        animation: none;
    }
}