/*
 * Motion layer for the public site: page-load entrance, scroll reveal and subtle hover polish.
 * app.css is a precompiled Tailwind build, so these effects live here and hook into the existing
 * markup. Everything is disabled for visitors who prefer reduced motion.
 */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration: 0.8s;
}

html {
    scroll-behavior: smooth;
}

/* Page load: fade the whole page in, then bring in the header and the hero content. */
body {
    animation: motion-fade-in 0.6s ease-out both;
}

body > header {
    animation: motion-slide-down 0.7s var(--motion-ease) both;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

body > header.is-scrolled {
    box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.25);
}

main > section:first-child > .z-10 > *,
main > section:first-child > .z-20 > div > * {
    animation: motion-rise var(--motion-duration) var(--motion-ease) both;
}

main > section:first-child > .z-10 > :nth-child(1),
main > section:first-child > .z-20 > div > :nth-child(1) { animation-delay: 0.15s; }
main > section:first-child > .z-10 > :nth-child(2),
main > section:first-child > .z-20 > div > :nth-child(2) { animation-delay: 0.3s; }
main > section:first-child > .z-10 > :nth-child(3),
main > section:first-child > .z-20 > div > :nth-child(3) { animation-delay: 0.45s; }

/* Slow "Ken Burns" drift on hero images. */
main > section:first-child > img,
main > section:first-child [data-slide] > img {
    animation: motion-hero-zoom 18s ease-in-out infinite alternate;
    transform-origin: center;
}

/*
 * Scroll reveal: site.js adds data-reveal, flips it to "visible" once in view and removes it when
 * the transition is done. The !important keeps the hover transitions below from swallowing the
 * reveal while it runs.
 */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0s),
        transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0s) !important;
}

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

/* Hover polish for buttons and cards. */
main a.rounded-md,
main button.rounded-md {
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: 0.25s;
}

main a.rounded-md:hover,
main button.rounded-md:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.35);
}

main a.group.rounded-lg {
    transition: box-shadow 0.35s ease, transform 0.35s var(--motion-ease);
}

main a.group.rounded-lg:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.35);
}

#scroll-to-top {
    transition: opacity 0.3s ease, transform 0.3s var(--motion-ease), background-color 0.2s ease;
}

#scroll-to-top.opacity-0 {
    transform: translateY(12px);
}

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

@keyframes motion-slide-down {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: none; }
}

@keyframes motion-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes motion-hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
    }

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

    main a.rounded-md:hover,
    main button.rounded-md:not(:disabled):hover,
    main a.group.rounded-lg:hover {
        transform: none;
    }
}