/* ═══════════════════════════════════════════════════════════════════════════
   desktop.css — desktop surface base layer (docs/plans/desktop/core-shell.md)

   Builds on Bootstrap only. The mobile stack (v1-app.css / style.css) is NOT
   loaded on this surface. Soehne has no weight axis: emphasis swaps family
   (buch → halbfett → fett), never font-weight.

   Layout: gradient rail on the left 20% (top to bottom) carrying the vertical
   main menu; content in the remaining 80%.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'soehne-buch';
    src: url('../../../assets/fonts/soehne-buch.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'soehne-halbfett';
    src: url('../../../assets/fonts/soehne-halbfett.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'soehne-fett';
    src: url('../../../assets/fonts/soehne-fett.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'soehne-mono';
    src: url('../../../assets/fonts/soehne-mono-buch.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

body.desktop-surface {
    font-family: 'soehne-buch', -apple-system, sans-serif;
    background: #fff;
    color: #111;
    margin: 0;
    min-height: 100vh;
}

.desktop-surface h1,
.desktop-surface h2,
.desktop-surface h3,
.desktop-surface h4,
.desktop-surface strong,
.desktop-surface b {
    font-family: 'soehne-halbfett', -apple-system, sans-serif;
    font-weight: normal;
}

/* ─── Brand palette (from the pitch deck / app tokens) ────────────────────── */

.desktop-surface {
    --rt-pink:   #EB5D8F;
    --rt-purple: #916DF6;
    --rt-blue:   #2C75DE;
    --rt-teal:   #69E2E1;
    --rt-amber:  #EC9006;
    --rt-green:  #3B7D2A;

    /* THE left-shell gutter — the horizontal space the rail + menu own.
       Single source of truth: page content (.desktop-main) and full-viewport
       stages (the Home deck) both offset by this. Tune it here only. */
    --shell-gutter: 110px;
}

/* ─── Aurora — soft brand wash behind/beyond the rail ─────────────────────── */
/* Adapted from the pitch deck's .aurora: same blurred radial blobs + drift,
   rotated into a full-height left band that fades out rightward, extending
   the rail's color past the wave-clipped canvas edge. */

.desktop-aurora {
    position: fixed;
    top: 0;
    left: 80px;
    bottom: 0;
    width: 32vw;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent);
    mask-image: linear-gradient(to right, #000 35%, transparent);
}

.desktop-aurora::before,
.desktop-aurora::after {
    content: "";
    position: absolute;
    inset: -20% -40%;
    filter: blur(46px);
    border-radius: 50%;
}

/* Blob colors: --aurora-1..5 are set live by the aurora color sync in
   desktop.js (sampled from the gradient canvas at each blob's height, blob
   centers ↔ SAMPLES yFrac values there). Without JS/GL the fallbacks keep
   the static brand palette. */
.desktop-aurora::before {
    background:
        radial-gradient(55% 42% at 22% 18%, color-mix(in srgb, var(--aurora-1, var(--rt-purple)) 52%, transparent), transparent 70%),
        radial-gradient(60% 45% at 28% 82%, color-mix(in srgb, var(--aurora-2, var(--rt-blue)) 46%, transparent), transparent 72%),
        radial-gradient(50% 35% at 8% 50%, color-mix(in srgb, var(--aurora-3, var(--rt-pink)) 55%, transparent), transparent 70%);
    animation: desktop-aurora-drift 26s ease-in-out infinite alternate;
}

.desktop-aurora::after {
    background:
        radial-gradient(42% 30% at 15% 35%, color-mix(in srgb, var(--aurora-4, var(--rt-teal)) 30%, transparent), transparent 70%),
        radial-gradient(40% 28% at 12% 65%, color-mix(in srgb, var(--aurora-5, var(--rt-amber)) 20%, transparent), transparent 70%);
    animation: desktop-aurora-drift 32s ease-in-out infinite alternate-reverse;
}

@keyframes desktop-aurora-drift {
    from { transform: translate3d(1%, -3%, 0) scale(1); }
    to   { transform: translate3d(-4%, 3%, 0) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .desktop-aurora::before,
    .desktop-aurora::after { animation: none; }
}

/* ─── Gradient rail — wave-clipped canvas ─────────────────────────────────── */
/* Same palette as the mobile shell's canvas; Gradient.js reads the
   --gradient-color-* custom properties. The canvas is a fixed 240px × 3000px
   strip, vertically centered — the same centering as the menu shelf, so the
   wave edge never scales or drifts relative to the menu. Viewports taller
   than the curve see its straight vertical extensions.

   The clip-path here is the wave's INITIAL state (Joel's wave.svg cutout at
   4.36×, +17px menu gutter baked into every x) and the no-JS/reduced-motion
   fallback. The ripple animation in desktop.js recomposes this same path with
   tweened coordinates — keep the two in sync via the numbers in desktop.js,
   which are the source of truth. */

#gradient-canvas {
    --gradient-color-1: #2c75de;
    --gradient-color-2: #eb5d8f;
    --gradient-color-3: #69e2e1;
    --gradient-color-4: #153869;

    position: fixed;
    top: 50%;
    left: 0;
    width: 240px;
    height: 3000px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    clip-path: path('M -100 0 L 217 0 L 217 850 C 217 910, 211 921, 189.6 964.7 C 34.4 1282.0, 217.2 1538.1, 150.5 2035.3 C 144.1 2083, 137 2120, 137 2160 L 137 3000 L -100 3000 Z');

    /* Static fallback — a canvas is transparent until WebGL paints, so this
       shows whenever the animation isn't running (init failure, no WebGL,
       first frames before boot). Top layer: optional captured frame of the
       real gradient — drop one at desktop/assets/images/gradient-fallback.jpg
       and it's picked up; missing file just leaves the frozen-mesh gradient
       layers below. Keeps the white menu legible if the rail ever dies. */
    background:
        url('../images/gradient-fallback.jpg') center / cover no-repeat,
        radial-gradient(120% 45% at 30% 32%, #2c75de 0%, transparent 70%),
        radial-gradient(110% 40% at 15% 50%, #eb5d8f 0%, transparent 72%),
        radial-gradient(120% 45% at 35% 68%, #69e2e1 0%, transparent 70%),
        #153869;
}

/* ─── Brand logo — top of the rail ────────────────────────────────────────── */

.desktop-brand {
    position: fixed;
    top: 2rem;
    left: 24px;
    z-index: 2;
}

.desktop-brand img {
    height: 76px;
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(21, 56, 105, 0.25);
}

/* ─── Vertical main menu — frosted shelf, vertically centered ─────────────── */
/* The shelf itself carries the frosted treatment the old per-item hover had. */

.desktop-menu {
    position: fixed;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.6rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(21, 56, 105, 0.12);
}

.desktop-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.desktop-menu-item:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
}

.desktop-menu-item.active {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Pre-territory (territory picker): the menu's destinations need a territory,
   so the rail keeps the shell silhouette with the menu dimmed and inert. */
.desktop-menu.locked .desktop-menu-item {
    opacity: 0.35;
    pointer-events: none;
}

/* ─── TYPOGRAPHY UTILITIES ────────────────────────────────────────────────── */
/* The desktop type system. Soehne has no weight axis, so family IS weight:
   each utility swaps the family and never touches font-weight. -.04em
   tracking is the sitewide display-headline standard (v1 convention).
   Selectors are `.desktop-surface .t-*` on purpose — (0,2,0) outranks BOTH
   page-local element rules (the Home deck's h1) AND our own base heading
   rule `.desktop-surface h1…` at (0,1,1), without !important. Keep that
   base-rule relationship in mind when adding utilities here.
   Growing set: siblings (.t-halbfett, .t-buch, .t-mono) join as pages need
   them. */

.desktop-surface .t-fett {
    font-family: 'soehne-fett', -apple-system, sans-serif;
    font-weight: normal;
    letter-spacing: -.04em;
}

/* ─── Main content — right of the rail ────────────────────────────────────── */

.desktop-main {
    margin-left: var(--shell-gutter);
    min-height: 100vh;
    padding: 2.5rem 3rem;
    position: relative;
    z-index: 3;
}