/* transitions.css — page-transition icon + content fade + snappier interactions.
   No zoom/scale entrances (they read as "weird"); opacity / translate / brightness only.
   All motion respects prefers-reduced-motion. Loaded after shared.css. */

/* ============================================================
   1. Page-transition helmet overlay (gold shimmer sweep)
   Created + toggled by nav-progress.js; only shows when a load
   runs long enough to notice (fast navs stay flash-free).
   ============================================================ */
.nav-icon-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-0, #0c0c11) 60%, transparent);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;
}
.nav-icon-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.nav-icon-overlay .nav-mark {
    position: relative;
    width: 76px;
    height: 76px;
    /* a soft brand glow behind the mark — no scale, just presence */
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}
.nav-icon-overlay .nav-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Gold sheen swept across the helmet, masked by the mark's own alpha so it never
   bleeds past the silhouette. Loops while the overlay is visible. */
.nav-icon-overlay .nav-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 42%,
        rgba(255, 255, 255, .72) 50%,
        transparent 58%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 135% 0;
    -webkit-mask: url(/images/icon.png) center / contain no-repeat;
            mask: url(/images/icon.png) center / contain no-repeat;
    animation: helmet-sheen 1.25s ease-in-out infinite;
    pointer-events: none;
}
@keyframes helmet-sheen {
    0%   { background-position: 135% 0; }
    100% { background-position: -135% 0; }
}

/* ============================================================
   2. Content enter — a quick opacity fade on each navigation.
   Opacity only: a transform on the main wrapper would create a
   containing block and break sticky headers / fixed children.
   nav-progress.js re-adds .nav-content-enter on every enhancedload.
   ============================================================ */
@keyframes nav-content-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
article.content.nav-content-enter {
    animation: nav-content-enter .16s ease both;
}

/* ============================================================
   3. Snappier interactions — one consistent fast transition.
   Opacity / color / translate / brightness, never scale.
   (Button press feedback lives in shared.css → translateY.)
   ============================================================ */
a,
.btn,
button,
.card,
.nav-link,
.badge,
.rz-button {
    transition: color .12s ease,
                background-color .12s ease,
                border-color .12s ease,
                opacity .12s ease,
                transform .12s ease,
                filter .12s ease,
                box-shadow .12s ease;
}

/* ============================================================
   4. Reduced motion — kill non-essential animation entirely.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nav-icon-overlay { transition: opacity .001ms; }
    .nav-icon-overlay .nav-mark::after { animation: none; }
    article.content.nav-content-enter { animation: none; }
    a, .btn, button, .card, .nav-link, .badge, .rz-button { transition: none; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}