/* ==========================================================================
   animations.css — motion & transitions (load last)

   Everything here is progressive enhancement: if a browser doesn't support
   a feature, content simply appears without the motion. Everything is also
   switched off for visitors with "Reduce Motion" turned on.
   ========================================================================== */

:root {
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 600ms;
}

/* ---------- 1. Page-to-page cross-fade (no JS) ----------
   Multi-page sites get a smooth fade between pages instead of a white flash.
   Chrome/Edge 126+, Safari 18.2+. Others: normal navigation. */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur);
    animation-timing-function: var(--ease-out);
}

/* Keep the header still while the page body fades underneath it */
.site_header {
    view-transition-name: site-header;
}

/* ---------- 2. Interactive feedback ---------- */

a,
.button,
.button-primary,
.button-secondary,
.create-button,
.nav-toggle {
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        filter var(--dur-fast) var(--ease-out);
}

/* Lift on hover — only on devices that truly hover (not phones) */
@media (hover: hover) {
    .button:hover,
    .button-primary:hover,
    .create-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    }

    .card {
        transition: transform var(--dur) var(--ease-out),
                    box-shadow var(--dur) var(--ease-out);
    }

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
    }

    .standard_image_wrapper {
        overflow: hidden;
        border-radius: 0.5rem;
    }

    .standard_image_wrapper img {
        transition: transform var(--dur-slow) var(--ease-out);
    }

    .standard_image_wrapper:hover img {
        transform: scale(1.03);
    }
}

.button:active,
.button-primary:active,
.create-button:active {
    transform: translateY(1px) scale(0.98);
    transition-duration: 60ms;
}

/* Nav links: underline that grows from the left */
.nav-list a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size var(--dur) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a[aria-current="page"] {
    background-size: 100% 2px;
}


/* ---------- 3. Mobile menu slides open ---------- */

@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.nav-list--open {
    animation: nav-drop var(--dur) var(--ease-out);
}


/* ---------- 4. Hero/title entrance on page load ---------- */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.page-title,
.fade-in {
    animation: fade-up var(--dur-slow) var(--ease-out) both;
}

/* Stagger helpers: <p class="fade-in delay-1"> */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }


/* ---------- 5. Reveal sections as you scroll (no JS) ----------
   Add class="reveal" to any block. Uses CSS scroll-driven animations
   (Chrome/Edge 115+, Safari 26+). Unsupported browsers just show it. */

/* Wrapped in no-preference: scroll-linked animations ignore the
   duration override in the reduced-motion block at the bottom. */
/*@media (prefers-reduced-motion: no-preference) {*/
/*@supports (animation-timeline: view()) {*/
/*    !* (.card is left out on purpose: inside the sideways-scrolling*/
/*       .card-container on phones, it would track the wrong scroller) *!*/
/*    .reveal,*/
/*    .info_section {*/
/*        animation: fade-up linear both;*/
/*        animation-timeline: view();*/
/*        animation-range: entry 0% entry 35%;*/
/*    }*/
/*}*/
/*}*/


/* ---------- 6. Loading shimmer for .loading-container ---------- */

@keyframes pulse {
    50% { opacity: .45; }
}

.loading-text {
    animation: pulse 1.4s ease-in-out infinite;
}


/* ---------- Respect "Reduce Motion" ---------- */

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

    @view-transition {
        navigation: none;
    }
}