/* Motion system (subtle, purposeful, GPU-friendly) */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 180ms;
    --t-med: 280ms;
    --t-slow: 420ms;
    --reveal-distance: 14px;
    --reveal-blur: 3px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    .hero::before {
        animation: hero-float 9s var(--ease-out) infinite alternate;
        will-change: transform;
    }

    @keyframes hero-float {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(0, -8px, 0);
        }
    }
}

/* Scroll reveal base (only when JS is enabled) */
.js .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));
    transition:
        opacity var(--t-slow) var(--ease-out),
        transform var(--t-slow) var(--ease-out),
        filter var(--t-slow) var(--ease-out);
    will-change: opacity, transform, filter;
}

.js .reveal-left {
    opacity: 0;
    transform: translateX(calc(var(--reveal-distance) * -1));
    filter: blur(var(--reveal-blur));
}

.js .reveal-right {
    opacity: 0;
    transform: translateX(var(--reveal-distance));
    filter: blur(var(--reveal-blur));
}

.js .reveal-zoom {
    opacity: 0;
    transform: scale(0.985);
    filter: blur(var(--reveal-blur));
}

.js .is-revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

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

    .nav-drawer,
    .back-to-top,
    .btn,
    .card,
    .slider-track,
    .slider-btn,
    .dot,
    .page-transition,
    .faq-answer {
        transition: none !important;
        animation: none !important;
    }

    .btn,
    .card {
        transform: none !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}