/* ═══════════════════════════════════════════════════════
    simpleSoundbank — shared site header
    Loaded by every page, including simpleSPU, which has its own
    stylesheet and palette, so it carries its own colours and font
    rather than relying on page tokens.
    ═══════════════════════════════════════════════════════ */

/* Self-hosted and preloaded by each page, so text never draws in a fallback font
   first. font-display: block holds text back for the moment the font takes to
   arrive (it's already cached after the first page) instead of swapping it in. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overscroll (the rubber-band past the top or bottom on a Mac) shows the root
   background, so make it the header and footer's black. Each page's own colour
   stays on body, which is at least a screen tall so it never shows through. */
html {
    background-color: #0c0c0e;
    /* In-page links (#download, #faq) stop just below the sticky header. */
    scroll-padding-top: 68px;
}

body {
    min-height: 100vh;
    /* Its own stacking context, so its background paints under everything in it.
       Without this, now that the page colour is on body rather than the canvas,
       anything drawn behind its parent (z-index: -1, like simpleSPU's ribbon
       tails) would disappear under the body background. */
    isolation: isolate;
}

/* Moving between pages crossfades, with the header held still, where the browser
   supports cross-document view transitions (Chrome and Edge 126+, Safari 18.2+).
   Elsewhere links just load as normal. */
@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: site-header;
}

/* The old page fades and lifts away, the new one fades up into place. */
::view-transition-old(root) {
    animation: 260ms cubic-bezier(0.4, 0, 1, 1) both page-out;
}

::view-transition-new(root) {
    animation: 380ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both page-in;
}

@keyframes page-out {
    to { opacity: 0; transform: translateY(-14px); }
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(18px); }
}

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

.site-header {
    --header-bg:          rgba(12, 12, 14, 0.96);
    --header-border:      rgba(255, 255, 255, 0.055);
    --header-text:        #e4e0d9;
    --header-muted:       #7d786f;
    --header-gold:        #c9a04e;
    --header-gold-subtle: rgba(200, 165, 80, 0.07);
    --header-gold-border: rgba(200, 165, 80, 0.18);

    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--header-border);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    transition: box-shadow 300ms ease;
}

.site-header.is-scrolled {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 2rem), 1080px);
    height: 52px;
    margin: 0 auto;
}

.site-header .brand-mark {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
}

.site-header .site-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.site-header .site-nav a {
    padding: 0.35rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--header-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease;
}

.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible {
    color: var(--header-text);
    background: rgba(255, 255, 255, 0.04);
}

.site-header .site-nav a[aria-current="page"] {
    color: var(--header-text);
}
.site-header .nav-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(232, 112, 74, 0.14);
    color: #e8704a;
    border: 1px solid rgba(232, 112, 74, 0.3);
    vertical-align: middle;
    line-height: 1.2;
}


.site-header .site-nav .nav-cta {
    margin-left: 0.35rem;
    background: var(--header-gold-subtle);
    color: var(--header-gold);
    border-color: var(--header-gold-border);
    font-weight: 600;
}

.site-header .site-nav .nav-cta:hover,
.site-header .site-nav .nav-cta:focus-visible {
    color: var(--header-gold);
    background: rgba(200, 165, 80, 0.12);
}

/* ── The Download button takes on the page's own primary button ── */

/* simpleSF2 (and the home page, which is about it): the gold gradient pill. */
.site-header[data-cta="sf2"] .site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(180deg, #ddb966 0%, #c9a04e 100%);
    border-color: rgba(220, 190, 100, 0.25);
    color: #1a130a;
    box-shadow: 0 1px 8px rgba(200, 165, 80, 0.15);
    transition: box-shadow 200ms ease, transform 200ms ease, filter 200ms ease;
}

.site-header[data-cta="sf2"] .site-nav .nav-cta:hover,
.site-header[data-cta="sf2"] .site-nav .nav-cta:focus-visible {
    color: #1a130a;
    background: linear-gradient(180deg, #ddb966 0%, #c9a04e 100%);
    box-shadow: 0 2px 14px rgba(200, 165, 80, 0.25);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.site-header .nav-cta-icon {
    width: 13px;
    height: 13px;
    flex: none;
}

/* simpleSPU: its coral sticker button, with an ink edge that presses down. */
.site-header[data-cta="retro"] .site-nav .nav-cta {
    padding: 0.3rem 0.85rem 0.25rem;
    border: 2px solid #14111a;
    border-radius: 8px;
    background: #e8704a;
    color: #292432;
    font-family: "Rubik", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    box-shadow: 0 3px 0 #14111a;
    transition: background 150ms ease, transform 100ms ease, box-shadow 100ms ease;
}

.site-header[data-cta="retro"] .site-nav .nav-cta:hover,
.site-header[data-cta="retro"] .site-nav .nav-cta:focus-visible {
    color: #292432;
    background: #f7a483;
}

.site-header[data-cta="retro"] .site-nav .nav-cta:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #14111a;
}

/* Any other product: set its colours on the header and the button follows.
   <header class="site-header" data-cta="custom" style="--cta-bg: #...; --cta-text: #...;"> */
.site-header[data-cta="custom"] .site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cta-bg, var(--header-gold));
    border-color: transparent;
    color: var(--cta-text, #1a130a);
    transition: filter 200ms ease, transform 200ms ease;
}

.site-header[data-cta="custom"] .site-nav .nav-cta:hover,
.site-header[data-cta="custom"] .site-nav .nav-cta:focus-visible {
    background: var(--cta-bg, var(--header-gold));
    color: var(--cta-text, #1a130a);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    html {
        scroll-padding-top: 100px;
    }

    .site-header .header-inner {
        flex-direction: column;
        gap: 0.5rem;
        height: auto;
        padding: 0.6rem 0;
    }

    .site-header .site-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}