@layer reset, base, utilities, layout, components, parts;

:root {
    --z-local: 1;
    --z-hero-content: 2;
    --z-archive-filters: 10;
    --z-back-to-top: 90;
    --z-backdrop: 98;
    --z-dropdown-panel: 99;
    --z-header: 100;
    --z-dropdown: 110;
    --z-footer-reveal: 200;
    --z-mobile-menu-backdrop: 201;
    --z-mobile-menu: 202;
    --z-search-overlay: 300;
    --z-skip-link: 999;
    --z-cookie-consent: 1000;
}

html {
    overflow-y: scroll;
}

html, body {
    overflow-x: clip;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

body.admin-bar {
    min-height: calc(100dvh - 32px);
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: calc(var(--scroll-offset, var(--header-height, 0px)) + var(--spacing-md, 16px));
}

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

    html, body {
        margin: 0;
        padding: 0;
    }

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

    a {
        color: inherit;
        text-decoration: none;
    }

    button, input, textarea, select {
        font: inherit;
    }
}

@layer base {
    body.no-transitions,
    body.no-transitions *:not([data-keep-transitions]):not([data-keep-transitions] *) {
        transition: none !important;
    }

    html {
        font-size: var(--root-font-size);
        line-height: var(--line-height-base);
    }

    body {
        font-family: var(--font-body);
        font-weight: var(--font-weight-body);
        letter-spacing: var(--letter-spacing-body, normal);
        background: var(--color-background);
        color: var(--color-text);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        font-style: var(--font-style-heading, normal);
        text-transform: var(--text-transform-heading, none);
        letter-spacing: var(--letter-spacing-heading, normal);
        line-height: 1.2;
        margin-block: 0.5em;
    }

    a {
        color: color-mix(in oklch, var(--color-text) 80%, var(--color-background));
        transition: color var(--transition-speed);

        &:hover {
            color: var(--color-text);
        }
    }

    code, pre {
        font-family: var(--font-mono);
        font-weight: var(--font-weight-mono);
    }

    :focus-visible {
        outline: 2px solid var(--form-focus-ring-color, var(--color-border));
        outline-offset: 2px;
    }
}

@layer utilities {
    .container {
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .image-cover {
        width: var(--image-width, 100%);
        height: var(--image-height, 100%);
        aspect-ratio: var(--image-aspect-ratio, auto);
        overflow: hidden;
        border-radius: var(--radius-image-md);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .thumbnail-hover-scale *:hover > .image-cover > img {
        will-change: transform;
        transform: scale(var(--thumbnail-hover-scale, 1));
    }

    .thumbnail-hover-scale .image-cover > img {
        transition: transform var(--thumbnail-hover-speed, 0s);
    }

    *:hover > .image-cover > img {
        opacity: var(--thumbnail-hover-opacity, 1);
        filter: brightness(var(--thumbnail-hover-brightness, 1));
    }

    .dark *:hover > .image-cover > img {
        filter: brightness(var(--thumbnail-hover-brightness-dark, var(--thumbnail-hover-brightness, 1)));
    }

    .image-cover > img {
        will-change: filter;
        transition: filter var(--thumbnail-hover-speed, 0s), opacity var(--thumbnail-hover-speed, 0s);
    }

    .stretched-link {
        color: inherit;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
        }
    }

    .skip-link {
        position: absolute;
        left: -9999px;
        z-index: var(--z-skip-link);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-weight: 700;

        &:focus {
            left: var(--gutter);
            top: var(--spacing-sm);
        }
    }

    .tag {
        position: relative;
        z-index: var(--z-local);
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-family: var(--font-tag);
        font-weight: var(--font-weight-tag);
        font-size: var(--tag-font-size, var(--font-size-xs));
        text-transform: var(--tag-text-transform, uppercase);
        letter-spacing: var(--tag-letter-spacing, 1px);
        color: var(--tag-color, var(--color-primary));
        background: var(--tag-background, transparent);
        border: var(--tag-border, none);
        padding: var(--tag-padding, var(--spacing-xs) var(--spacing-sm));
        border-radius: var(--tag-radius, var(--radius-sm));
    }

    .tag__icon {
        flex-shrink: 0;
    }

    /* ══════════════════════════════════════════
       Show/hide animation utilities

       Var fallback chain per property:
       --anim-{type}-{in|out}-{prop} → --anim-{type}-{prop} → --anim-{prop} → default

       Config drives via argen_anim_attrs() helper.
       ══════════════════════════════════════════ */

    /* ═══════════════════════════════════════════
       Shared backdrop
       Global: --backdrop-blur on :root
       Per-component: --backdrop-blur, --backdrop-z, --backdrop-speed as inline/component overrides
       Background computed by PHP (argen_backdrop_style) as inline style
       ══════════════════════════════════════════ */

    .backdrop {
        inset: 0;
        z-index: var(--backdrop-z, var(--z-backdrop));
        backdrop-filter: blur(var(--backdrop-blur, 0px));
        -webkit-backdrop-filter: blur(var(--backdrop-blur, 0px));
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--backdrop-speed, var(--anim-speed, 300ms)) ease,
                    visibility var(--backdrop-speed, var(--anim-speed, 300ms));
        pointer-events: none;
    }

    .backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ── Hidden state (out transition) ── */

    .anim--fade {
        opacity: 0;
        transition: opacity var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-out-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    visibility var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)));
    }

    .anim--slide-down {
        transform: translateY(calc(-1 * var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 8px)))));
        transition: transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    visibility var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)));
    }

    .anim--slide-up {
        transform: translateY(var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 8px))));
        transition: transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    visibility var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)));
    }

    .anim--slide-left {
        transform: translateX(var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 100%))));
        transition: transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    visibility var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)));
    }

    .anim--slide-right {
        transform: translateX(calc(-1 * var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 100%)))));
        transition: transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    visibility var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)));
    }

    .anim--scale {
        transform: scale(var(--anim-scale-out-from, var(--anim-scale-from, 0.95)));
        transition: transform var(--anim-scale-out-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)))
                              var(--anim-scale-out-easing, var(--anim-scale-easing, var(--anim-easing, ease))),
                    visibility var(--anim-scale-out-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)));
    }

    .anim--blur {
        filter: blur(var(--anim-blur-out-amount, var(--anim-blur-amount, var(--anim-blur, 4px))));
        transition: filter var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-out-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)));
    }

    /* ── Composites — hidden state ── */

    .anim--fade.anim--slide-down { opacity: 0; transform: translateY(calc(-1 * var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 8px))))); }
    .anim--fade.anim--slide-up { opacity: 0; transform: translateY(var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 8px)))); }
    .anim--fade.anim--slide-left { opacity: 0; transform: translateX(var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 100%)))); }
    .anim--fade.anim--slide-right { opacity: 0; transform: translateX(calc(-1 * var(--anim-slide-out-distance, var(--anim-slide-distance, var(--anim-distance, 100%))))); }
    .anim--fade.anim--scale { opacity: 0; transform: scale(var(--anim-scale-out-from, var(--anim-scale-from, 0.95))); }
    .anim--fade.anim--blur { opacity: 0; filter: blur(var(--anim-blur-out-amount, var(--anim-blur-amount, var(--anim-blur, 4px)))); }

    /* Composite out transitions */
    .anim--fade.anim--slide-down,
    .anim--fade.anim--slide-up,
    .anim--fade.anim--slide-left,
    .anim--fade.anim--slide-right {
        transition: opacity var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-out-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    transform var(--anim-slide-out-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-out-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    filter var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-out-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-speed, 200ms);
    }

    .anim--fade.anim--scale {
        transition: opacity var(--anim-fade-out-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-out-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    transform var(--anim-scale-out-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)))
                              var(--anim-scale-out-easing, var(--anim-scale-easing, var(--anim-easing, ease))),
                    filter var(--anim-blur-out-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-out-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-speed, 200ms);
    }

    /* ── Shown state (in transition) ── */

    .is-open.anim--fade,
    .is-visible.anim--fade,
    .revealed.anim--fade {
        opacity: 1;
        transition: opacity var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-in-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    visibility var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)));
    }

    .is-open.anim--slide-down,
    .is-open.anim--slide-up,
    .is-open.anim--slide-left,
    .is-open.anim--slide-right,
    .is-visible.anim--slide-down,
    .is-visible.anim--slide-up,
    .is-visible.anim--slide-left,
    .is-visible.anim--slide-right,
    .revealed.anim--slide-down,
    .revealed.anim--slide-up,
    .revealed.anim--slide-left,
    .revealed.anim--slide-right {
        transform: none;
        transition: transform var(--anim-slide-in-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-in-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    visibility var(--anim-slide-in-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)));
    }

    .is-open.anim--scale,
    .is-visible.anim--scale,
    .revealed.anim--scale {
        transform: none;
        transition: transform var(--anim-scale-in-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)))
                              var(--anim-scale-in-easing, var(--anim-scale-easing, var(--anim-easing, ease))),
                    visibility var(--anim-scale-in-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)));
    }

    .is-open.anim--blur,
    .is-visible.anim--blur,
    .revealed.anim--blur {
        filter: blur(0);
        transition: filter var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-in-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)));
    }

    /* Composite in transitions */
    .is-open.anim--fade.anim--slide-down,
    .is-open.anim--fade.anim--slide-up,
    .is-open.anim--fade.anim--slide-left,
    .is-open.anim--fade.anim--slide-right,
    .is-visible.anim--fade.anim--slide-down,
    .is-visible.anim--fade.anim--slide-up,
    .is-visible.anim--fade.anim--slide-left,
    .is-visible.anim--fade.anim--slide-right,
    .revealed.anim--fade.anim--slide-down,
    .revealed.anim--fade.anim--slide-up,
    .revealed.anim--fade.anim--slide-left,
    .revealed.anim--fade.anim--slide-right {
        opacity: 1;
        transform: none;
        filter: blur(0);
        transition: opacity var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-in-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    transform var(--anim-slide-in-speed, var(--anim-slide-speed, var(--anim-speed, 200ms)))
                              var(--anim-slide-in-easing, var(--anim-slide-easing, var(--anim-easing, ease))),
                    filter var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-in-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-speed, 200ms);
    }

    .is-open.anim--fade.anim--scale,
    .is-visible.anim--fade.anim--scale,
    .revealed.anim--fade.anim--scale {
        opacity: 1;
        transform: none;
        filter: blur(0);
        transition: opacity var(--anim-fade-in-speed, var(--anim-fade-speed, var(--anim-speed, 200ms)))
                            var(--anim-fade-in-easing, var(--anim-fade-easing, var(--anim-easing, ease))),
                    transform var(--anim-scale-in-speed, var(--anim-scale-speed, var(--anim-speed, 200ms)))
                              var(--anim-scale-in-easing, var(--anim-scale-easing, var(--anim-easing, ease))),
                    filter var(--anim-blur-in-speed, var(--anim-blur-speed, var(--anim-speed, 200ms)))
                           var(--anim-blur-in-easing, var(--anim-blur-easing, var(--anim-easing, ease))),
                    visibility var(--anim-speed, 200ms);
    }

    /* ── Focus ring ── */

    .focus-ring {
        --_fr-width: var(--form-focus-ring-width, 2px);
        --_fr-style: var(--form-focus-ring-style, solid);
        --_fr-color: var(--form-focus-ring-color, var(--color-border));
        --_fr-offset: var(--form-focus-ring-offset, 2px);
        --_fr-speed: var(--form-focus-ring-speed, 150ms);
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: var(--_fr-offset);
        transition: outline-color var(--_fr-speed);
    }

    [data-focus-ring="keyboard"] .focus-ring:focus-visible {
        outline-color: var(--_fr-color);
    }

    [data-focus-ring="always"] .focus-ring:focus {
        outline-color: var(--_fr-color);
    }

    .focus-ring-within {
        --_fr-width: var(--form-focus-ring-width, 2px);
        --_fr-style: var(--form-focus-ring-style, solid);
        --_fr-color: var(--form-focus-ring-color, var(--color-border));
        --_fr-offset: var(--form-focus-ring-offset, 2px);
        --_fr-speed: var(--form-focus-ring-speed, 150ms);
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: var(--_fr-offset);
        transition: outline-color var(--_fr-speed);
    }

    [data-focus-ring="keyboard"] .focus-ring-within:has(:focus-visible) {
        outline-color: var(--_fr-color);
    }

    [data-focus-ring="always"] .focus-ring-within:has(:focus) {
        outline-color: var(--_fr-color);
    }

    @media (prefers-reduced-motion: reduce) {
        .anim--fade,
        .anim--slide-down,
        .anim--slide-up,
        .anim--slide-left,
        .anim--slide-right,
        .anim--scale,
        .anim--blur,
        .is-open.anim--fade,
        .is-open.anim--slide-down,
        .is-open.anim--slide-up,
        .is-open.anim--slide-left,
        .is-open.anim--slide-right,
        .is-open.anim--scale,
        .is-visible.anim--fade,
        .is-visible.anim--slide-down,
        .is-visible.anim--slide-up,
        .is-visible.anim--slide-left,
        .is-visible.anim--slide-right,
        .is-visible.anim--scale,
        .is-open.anim--blur,
        .is-visible.anim--blur,
        .revealed.anim--blur { transition: none; }
    }
}