/*
 * Codetrex motion system (CSS + AOS). Enable per page with ViewData["Motion"] = true;
 * _Layout then loads this file, aos.js and motion.js once.
 *
 * Scroll reveals (triggered by AOS when the element enters the viewport):
 *   .animate-fade-up   fade in + rise 30px      headings, paragraphs, blocks
 *   .animate-fade      fade in only             large panels
 *   .animate-scale     fade in + scale .95 → 1  images
 *   .animate-stagger   on a parent: each direct child fades up in sequence
 *                      (data-motion-step="60" overrides the 110ms step)
 *   .motion-delay-1…3  extra 100 / 200 / 300ms delay
 *
 * Load-time entrance (pure CSS, no JS, for above-the-fold content such as the hero):
 *   .motion-enter, .motion-enter-scale (+ .motion-delay-*)
 *
 * Micro-interaction:
 *   .motion-lift       buttons/links rise 2px on hover
 *
 * Content is never hidden unless motion.js has run, and nothing animates when the
 * user prefers reduced motion. Only opacity and transform are animated.
 */

:root {
    --motion-duration: 650ms;
    --motion-enter-duration: 600ms;
    --motion-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --motion-distance: 30px;
    --motion-scale-from: 0.95;
}

.motion-delay-1 { --motion-delay: 100ms; }
.motion-delay-2 { --motion-delay: 200ms; }
.motion-delay-3 { --motion-delay: 300ms; }

@keyframes motion-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, var(--motion-distance), 0);
    }
}

@keyframes motion-fade {
    from { opacity: 0; }
}

@keyframes motion-scale {
    from {
        opacity: 0;
        transform: scale(var(--motion-scale-from));
    }
}

/* Never starts at opacity 0 so the hero image still counts as the LCP paint. */
@keyframes motion-hero-image {
    from {
        opacity: 0.6;
        transform: scale(1.03);
    }
}

/* Scroll reveals. Keyframes (not transitions) so hover transitions on the same element keep their own timing once the reveal ends. */
[data-aos^="motion-"]:not(.aos-animate) {
    opacity: 0;
}

[data-aos^="motion-"].aos-animate {
    animation-duration: var(--motion-duration);
    animation-timing-function: var(--motion-ease);
    animation-delay: var(--motion-delay, 0ms);
    animation-fill-mode: backwards;
}

[data-aos="motion-fade-up"].aos-animate { animation-name: motion-fade-up; }
[data-aos="motion-fade"].aos-animate { animation-name: motion-fade; }
[data-aos="motion-scale"].aos-animate { animation-name: motion-scale; }

/* Load-time entrance */
.motion-enter {
    animation: motion-fade-up var(--motion-enter-duration) var(--motion-ease) var(--motion-delay, 0ms) backwards;
}

.motion-enter-scale {
    animation: motion-hero-image 700ms ease-out backwards;
}

/* Buttons: !important so it wins over Tailwind's important transition-colors utilities. */
.motion-lift {
    transition-property: transform, color, background-color, border-color, box-shadow, filter !important;
    transition-duration: 200ms !important;
    transition-timing-function: ease-out !important;
}

@media (hover: hover) and (pointer: fine) {
    .motion-lift:hover {
        transform: translateY(-2px);
    }
}

.motion-lift:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-aos^="motion-"],
    .motion-enter,
    .motion-enter-scale {
        animation: none !important;
        opacity: 1 !important;
    }

    .motion-lift,
    .motion-lift:hover {
        transform: none !important;
    }
}