/* Base stylesheet — resets, layer ordering, shared primitives.
   Loaded AFTER tokens.css, BEFORE bootstrap so legacy rules still win during migration. */

@layer reset, base, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    img, picture, video, svg { max-width: 100%; height: auto; }

    @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;
        }
    }
}

/* Alpine — hide [x-cloak] elements until Alpine hydrates to prevent FOUC */
[x-cloak] { display: none !important; }

/* ============================================================
   Cross-page view transitions — progressive enhancement.
   Chrome 126+ honors this; other browsers fall back gracefully.
   ============================================================ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 300ms;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

@layer base {
    :focus-visible {
        outline: 2px solid var(--ember);
        outline-offset: 2px;
    }

    /* Skip-to-content link — visually hidden until focused */
    .skip-link {
        position: absolute;
        top: var(--sp-3);
        left: var(--sp-3);
        z-index: var(--z-toast);
        padding: var(--sp-3) var(--sp-4);
        background: var(--ember);
        color: var(--cream);
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: var(--radius-sm);
        transform: translateY(-150%);
        transition: transform var(--dur-base) var(--ease-out);
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }

    /* Back-to-top: replaces the jQuery fadeIn/fadeOut in custom.js.
       Hidden by default; #app.js toggles .is-visible after 100px scroll. */
    #back-to-top {
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur-base) var(--ease-out),
                    visibility var(--dur-base) var(--ease-out);
    }

    #back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Preloader: matches the existing #loading overlay; app.js removes it on window load. */
    #loading {
        transition: opacity var(--dur-slow) var(--ease-out);
    }
}

/* ============================================================
   Scroll-driven reveal utility — CSS-only fade-up as elements
   enter the viewport. Browsers without scroll-timeline support
   simply skip the animation (elements visible normally).
   ============================================================ */

@supports (animation-timeline: view()) {
    .fade-up {
        animation: fade-up-anim linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }

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

    @media (prefers-reduced-motion: reduce) {
        .fade-up {
            animation: none;
        }
    }
}