/* =========================================================================
   COSMOS visual system — CSS (extracted from Waggle login.html)
   ---------------------------------------------------------------------------
   This file is the cosmos-only CSS, copied VERBATIM from the source
   login.html <style> block (rules originally at ~lines 80-442). Unrelated
   page CSS (nav, hero, work cards, testimonials, footer, theme tokens not
   referenced by the cosmos) is intentionally omitted.

   The :root block below lists ONLY the CSS custom properties the cosmos
   rules reference, with their current Waggle values, so this file is
   self-contained.

   WAGGLE BRAND COLOUR FLAGGING
   ----------------------------
   Lines/values carrying the Waggle gold/amber accent are tagged with the
   comment  /* WAGGLE-ACCENT *​/  so they can be found and recoloured later.
   Nothing is recoloured here — these are flags only.
   ========================================================================= */

:root {
    /* --- Brand accent tokens — HEXAGON lumo green (was Waggle gold) --- */
    --color-primary: #aef806;                       /* LUMO */
    --color-primary-dark: #7ac20a;                  /* LUMO */
    --color-primary-light: #c6f94a;                 /* LUMO */
    --color-primary-button-text: #0a0a0a;
    --color-primary-badge-text: #0a0a0a;            /* dark ink on bright green */

    /* --- Surface / ink tokens referenced by cosmos rules --- */
    --color-content-bg: #06080F;
    --color-card-bg: rgba(13, 17, 30, 0.82);
    --color-text-primary: #EDF1F8;
    --color-text-secondary: #A6AFC2;
    --color-text-muted: #6E7890;

    /* --- Fonts referenced by cosmos rules --- */
    --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* --- Derived tokens referenced by cosmos rules --- */
    --ink: var(--color-text-primary);
    --rule: color-mix(in srgb, var(--color-text-primary) 14%, transparent);
    --rule-strong: color-mix(in srgb, var(--color-text-primary) 32%, transparent);
    --paper-raised: var(--color-card-bg);
    --shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.18);
}

/* =========================================================================
   3D particle backdrop — fixed canvas behind all content
   ========================================================================= */
#bg3d {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Everything else paints above the canvas. The sticky nav keeps its own
   position; it already carries z-index 100. */
body > *:not(#bg3d):not(.nav):not(.hex-bg-fixed):not(.sky-tint):not(.cosmos-toggle):not(.space-scrim):not(.model-card):not(.lens-chip):not(.cosmos-lens):not(.body-card):not(.signin-overlay):not(.aurora):not(.grain):not(.scanline) {
    position: relative;
    z-index: 1;
}

/* Frosted veil — the canvas itself is blurred (cheap, one layer) and the
   scrim is just a tint. The cosmos renders at reduced resolution while
   veiled, which the blur hides — that's where the frames come from. */
#bg3d { transition: filter 1.1s ease; }
body:not(.cosmos-explore) #bg3d { filter: blur(18px) brightness(.68) saturate(1.05); }
.space-scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(5, 8, 16, 0.58);
    transition: opacity 1.1s ease;
}
body.cosmos-explore .space-scrim { opacity: 0; }

/* passthrough lens — a small live copy of the unblurred cosmos that opens
   around the cursor when it rests */
.cosmos-lens {
    position: fixed;
    z-index: 65;
    width: 264px;
    height: 264px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.3);
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 0 44px rgba(0, 0, 0, .6), inset 0 0 28px rgba(0, 0, 0, .5);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.cosmos-lens.on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cosmos-lens canvas { width: 100%; height: 100%; display: block; }
body.cosmos-explore .cosmos-lens { opacity: 0 !important; }
/* kill switch: cosmos disabled on machines that can't hold 20fps —
   static dark backdrop, no canvas, no toggle, no explore */
body.cosmos-dead .space-scrim { background: rgba(5, 8, 16, .7); }
body.cosmos-dead .cosmos-explore-btn { display: none; }
body.cosmos-dragging { cursor: grabbing; }
body.cosmos-dragging * { user-select: none !important; }

/* planet name chip — shown on lens hover and planet pick */
.lens-chip {
    position: fixed;
    z-index: 70;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    color: #fff;
    background: rgba(8, 12, 22, .8);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 6px 13px;
    pointer-events: none;
    opacity: 0;
    transform: translate(16px, 18px);
    transition: opacity .25s ease;
    white-space: nowrap;
}
.lens-chip.on { opacity: 1; }
body.cosmos-explore .lens-chip { opacity: 0 !important; }

/* Field report — a waybill slip torn off the dispatch printer, matching
   the features-section slips: perforated edge, tag chip, route art, REF line */
.body-card {
    position: fixed;
    top: 50%;
    right: clamp(20px, 4vw, 64px);
    transform: translateY(-46%) translateX(36px) rotate(4deg) scale(.95);
    width: min(400px, calc(100vw - 40px));
    z-index: 80;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px 4px 14px 14px;
    padding: 30px 28px 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 34px 70px -18px rgba(0, 0, 0, .9);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, transform .6s cubic-bezier(.22,1.4,.36,1), visibility 0s linear .4s;
}
.body-card.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) rotate(-1.4deg) scale(1);
    transition: opacity .25s ease, transform .6s cubic-bezier(.22,1.4,.36,1);
    animation: cardFloat 7s ease-in-out infinite;
}
.body-card.open:hover { transform: translateY(-50%) translateX(0) rotate(0deg) scale(1); }
/* perforation along the torn top edge */
.body-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 8px;
    right: 8px;
    height: 7px;
    background-image: radial-gradient(circle at 4px 0px, var(--color-content-bg) 3.5px, transparent 4px);
    background-size: 14px 7px;
    background-repeat: repeat-x;
}
.bc-x {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: color .15s;
}
.bc-x:hover { color: var(--color-text-primary); }
.bc-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .24em;
    color: var(--color-primary-badge-text);          /* WAGGLE-ACCENT (amber-brown badge ink) */
    background: var(--color-primary-light);           /* WAGGLE-ACCENT */
    border-radius: 4px;
    padding: 4px 9px;
    margin-bottom: 16px;
}
.bc-head {
    font-family: var(--font-display);
    font-weight: 750;
    font-size: 25px;
    letter-spacing: -.01em;
    line-height: 1.12;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
.bc-copy {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.bc-ref {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--color-text-muted);
    border-top: 1px dashed var(--rule-strong);
    padding-top: 12px;
    margin-top: 4px;
}

/* Floating model card — top right, tilted, drag to spin */
.model-card {
    position: fixed;
    top: 88px;
    /* hug the content column (max 1180px): on wide screens pull the card in
       from the viewport edge toward the content instead of floating in the
       right margin; on narrow screens fall back to a small fixed inset */
    right: max(26px, calc((100vw - 1180px) / 2 - 80px));
    z-index: 60;
    width: 230px;
    background: rgba(11, 15, 27, .78);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .8);
    backdrop-filter: blur(6px);
    transform: rotate(3deg);
    animation: cardFloat 7s ease-in-out infinite;
    transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease,
                top .6s cubic-bezier(.22,1,.36,1), right .6s cubic-bezier(.22,1,.36,1),
                width .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
    cursor: grab;
    overflow: hidden;
}
.model-card:hover { transform: rotate(0.5deg) translateY(-4px); }
.model-card:active { cursor: grabbing; }
@keyframes cardFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -10px; }
}
.model-card canvas { display: block; width: 100%; height: 190px; transition: height .6s cubic-bezier(.22,1,.36,1); }

/* expanded: the viewer glides to centre stage; the giant spread shadow
   doubles as a dimming backdrop that animates with it */
.model-card.expanded {
    top: 50%;
    right: 50%;
    width: min(680px, 92vw);
    transform: translate(50%, -50%) rotate(0deg);
    animation: none;
    z-index: 90;
    box-shadow: 0 0 0 200vmax rgba(4, 6, 13, .62), 0 44px 90px -20px rgba(0, 0, 0, .9);
}
.model-card.expanded:hover { transform: translate(50%, -50%) rotate(0deg); }
.model-card.expanded canvas { height: min(520px, 58vh); }
/* the slip stamps over the viewer's top-right corner, tilted like a sticker */
@media (min-width: 900px) {
    body.model-expanded .body-card.open {
        top: clamp(70px, calc(50% - 33vh), 40%);
        right: calc(50% - min(340px, 46vw) - 110px);
        transform: rotate(5deg);
        animation: none;
        z-index: 95;
    }
    body.model-expanded .body-card.open:hover { transform: rotate(3deg); }
}
.model-card-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .26em;
    color: var(--color-primary);                      /* WAGGLE-ACCENT */
    border-top: 1px dashed rgba(255, 255, 255, .2);
    padding: 9px 14px;
    display: flex;
    justify-content: space-between;
}
.model-card-tag small { color: rgba(255,255,255,.4); letter-spacing: .14em; }
@media (max-width: 1100px) { .model-card { display: none; } }

/* Time-of-day ambient — a faint sky gradient that follows the real clock */
.sky-tint {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 70% at 50% -10%, var(--sky-tint-color, rgba(0,0,0,0)), transparent 62%);
    transition: background 2s ease;
}

/* Explore mode — the page animates aside, the cosmos takes the controls */
body.cosmos-explore { overflow: hidden; }
body > *:not(#bg3d):not(.hex-bg-fixed):not(.sky-tint):not(.cosmos-toggle):not(.space-scrim):not(.model-card):not(.lens-chip):not(.cosmos-lens):not(.body-card):not(.aurora):not(.grain):not(.scanline) {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
body.cosmos-explore > *:not(#bg3d):not(.hex-bg-fixed):not(.sky-tint):not(.cosmos-toggle):not(.space-scrim):not(.model-card):not(.lens-chip):not(.cosmos-lens):not(.body-card):not(.aurora):not(.grain):not(.scanline) {
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
}
body.cosmos-explore .model-card { opacity: 0; pointer-events: none; }

/* The toggle — fixed top left, flips the whole page out and back in */
.cosmos-toggle {
    position: fixed;
    top: 78px;
    left: 22px;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #fff;
    background: rgba(10, 14, 26, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .2s ease, transform .2s ease;
}
.cosmos-toggle:hover { border-color: var(--color-primary); transform: translateY(-1px); }   /* WAGGLE-ACCENT (hover border) */
.cosmos-toggle .ct-ic { color: var(--color-primary); }                                       /* WAGGLE-ACCENT */

/* The cosmos section — mostly open sky so the flyby gets the stage */
.cosmos-caption {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    color: var(--color-text-secondary);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: var(--shadow-card);
}
.cosmos-caption b { color: var(--color-text-primary); font-weight: 600; }
.cosmos-explore-btn {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--color-primary-button-text);
    background: var(--color-primary);                 /* WAGGLE-ACCENT (button fill) */
    border: 1px solid var(--color-primary-dark);      /* WAGGLE-ACCENT (button border) */
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform .15s ease;
}
.cosmos-explore-btn:hover { transform: translateY(-2px); }
.cosmos-spacer { height: 44vh; pointer-events: none; }

/* Full-page honeycomb layer — fixed behind everything, under the particles */
.hex-bg-fixed {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    color: var(--color-text-primary);
    opacity: .05;
}

/* =========================================================================
   Honeycomb backdrop (inline SVG pattern, inherits currentColor)
   ========================================================================= */
.hex-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--color-text-primary);
    opacity: .045;
    pointer-events: none;
    z-index: 0;
}
body.theme-dark .hex-bg { opacity: .07; }

/* =========================================================================
   Slip-art (route doodle inside the .body-card field report). These helper
   rules are shared with the page's features section in the source, but the
   cosmos .body-card depends on them, so they are included here so the card
   renders standalone.  (source login.html ~lines 1092-1102)
   ========================================================================= */
.slip-art {
    margin-top: 22px;
    border-top: 1px dashed var(--rule-strong);
    padding-top: 16px;
    color: var(--color-text-secondary);
}
.slip-art svg { display: block; width: 100%; height: 54px; }
.slip-art .a-stroke { stroke: currentColor; fill: none; stroke-width: 1.6; }
.slip-art .a-accent { stroke: var(--color-primary-dark); fill: none; stroke-width: 2; }   /* WAGGLE-ACCENT (route accent stroke) */
.slip-art .a-fill   { fill: var(--color-primary); }                                       /* WAGGLE-ACCENT (route nodes) */
.slip-art .a-text   { font-family: var(--font-mono); font-size: 8px; fill: var(--color-text-muted); letter-spacing: .12em; }