body {
    font-family: 'Inter', sans-serif;
    background-color: #060607;
}

/* Transcript viewer — solid zinc background, no starfield (matches React SPA page) */
body.transcript-page {
    background-color: #09090b;
}

body.transcript-page::before,
body.transcript-page::after {
    display: none;
}

html {
    overflow-x: clip;
}

/* ===== Starfield background (pure CSS, GPU-composited) =====
   Two tiled star layers rendered behind all content. Uses radial-gradient
   tiles (cheap to paint) with a slow drift. No JS, no per-frame work.

   Perf: layers are sized to one extra tile beyond the viewport (not 3x the
   screen) and only `transform` is animated/composited — animating opacity on a
   full-screen fixed layer forced huge repaints every frame and was the main
   cause of scroll jank. The whole layer is promoted to its own compositor
   layer (translateZ) so it doesn't repaint while the page scrolls. */
body::before,
body::after {
    content: "";
    position: fixed;
    /* Extend one drift-cycle (~500px) past every edge so the repeating tile
       never exposes a bare edge as the layer drifts. Kept small (not 3x the
       viewport) to minimise the composited-layer memory/paint cost. */
    top: -500px;
    left: -500px;
    right: -500px;
    bottom: -500px;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
}

/* Far layer: small, dense, faint — very slow drift */
body::before {
    background-image:
        radial-gradient(1px 1px at 25px 35px, #ffffff, transparent),
        radial-gradient(1px 1px at 90px 80px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 150px 160px, #ffffff, transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 60px 200px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 175px 220px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 230px 130px, #ffffff, transparent),
        radial-gradient(1px 1px at 120px 20px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 250px 250px;
    background-repeat: repeat;
    opacity: 0.4;
    animation: star-drift-slow 200s linear infinite;
}

/* Near layer: larger, sparser, brighter — slow drift */
body::after {
    background-image:
        radial-gradient(1.5px 1.5px at 40px 60px, #ffffff, transparent),
        radial-gradient(2px 2px at 180px 120px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 300px 260px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 260px 40px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2px 2px at 100px 320px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 360px 180px, rgba(255, 255, 255, 0.8), transparent);
    background-size: 420px 420px;
    background-repeat: repeat;
    opacity: 0.5;
    animation: star-drift 150s linear infinite;
}

/* Drift distances are whole multiples of each layer's tile size so the loop
   restart is seamless (no visible snap). Only transform is animated so the
   layer never repaints — the browser just moves the cached texture. */
@keyframes star-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-420px, -420px, 0); }
}
@keyframes star-drift-slow {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(250px, 250px, 0); }
}

.font-mono-custom {
    font-family: 'JetBrains Mono', monospace;
}

/* Dynamic Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #1c1c1c;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2a2a2a;
}

/* Glassmorphism styling inspired by bleed.bot & heist.lol */
.glass-panel {
    background: rgba(15, 17, 25, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(126, 184, 240, 0.06);
}

.glass-panel-glow:hover {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.02);
}

/* Custom glow accents */
.glow-text-white {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Hide Scrollbar for tabs container */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Section dividers: a soft gradient hairline that fades at the edges */
.section-divider {
    height: 1px;
    max-width: 80rem;
    margin: 0 auto;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 100%
    );
}

/* ===== website v2 aesthetic ===== */

/* Light-blue "colour wave" gradient text (from website v2 headings) */
.text-wave {
    background-image: linear-gradient(to top, #accbee, #e7f0fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Give descenders (y, g, p) room so clip-text doesn't shave them off */
    line-height: 1.15;
    padding-bottom: 0.12em;
}

/* v2-style translucent feature/command cards */
.v2-card {
    background: rgba(33, 33, 38, 0.35);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-card:hover {
    background: rgba(33, 33, 38, 0.55);
    transform: translateY(-2px);
}

/* Site nav — pinned to the viewport top (never scrolls with content) */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(6, 6, 7, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Floating pill nav container (website v2 aesthetic) */
.nav-pill {
    background: #111212;
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
}

/* Nav links */
.nav-link {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}
.nav-link:hover { background-color: rgba(255, 255, 255, 0.08); }

a[data-scroll],
a[data-link]:not([href]) {
    cursor: pointer;
}

/* Router view transition: fade the outgoing view out; the incoming view is
   brought in by the reveal animations below (avoids a double animation). */
#app {
    transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Outgoing view: fade + lift slightly. */
#app.view-leaving {
    opacity: 0;
    transform: translateY(-6px);
}
/* Incoming view starts faded + nudged down, then eases into place. */
#app.view-entering {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    #app,
    #app.view-leaving,
    #app.view-entering {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Scroll-reveal animations were removed for instant, delay-free content.
   The .reveal-* utility classes are left on the markup but now have no hidden
   state — everything renders immediately. Only the router's page-swap
   transition (#app.view-leaving / .view-entering above) still animates. */

/* Readable prose for legal pages */
.prose-legal {
    color: #a3a3a3;
    line-height: 1.75;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
}
@media (min-width: 640px) {
    .prose-legal {
        padding: 2rem 2.5rem;
        border-radius: 1.25rem;
    }
}
.prose-legal h2:first-of-type { margin-top: 0; }
.prose-legal h2 { color: #fff; font-weight: 700; font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-legal h3 { color: #d4d4d4; font-weight: 600; font-size: 0.95rem; margin-top: 1.25rem; margin-bottom: 0.4rem; }
.prose-legal p { margin-bottom: 1rem; }
.prose-legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-legal li { margin-bottom: 0.4rem; }
.prose-legal a {
    color: #e7f0fd;
    text-decoration: none;
    border-bottom: 1px solid rgba(231, 240, 253, 0.28);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.prose-legal a:hover {
    color: #fff;
    border-bottom-color: rgba(231, 240, 253, 0.65);
}
.prose-legal strong { color: #e5e5e5; font-weight: 600; }
.prose-legal code { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.375rem; padding: 0.1rem 0.4rem; color: #d4d4d4; }

/* Scroll cue: fade it out and stop the bounce when it can't be interacted with */
#scroll-indicator {
    transition: opacity 0.25s ease;
}

/* When the viewport is short (e.g. heavy browser zoom or landscape mobile),
   the centred hero content collides with the absolutely-pinned scroll cue,
   so hide it to avoid the overlap glitch. */
@media (max-height: 720px) {
    #scroll-indicator { display: none; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}