/* Design tokens shared across the site.
   Palette mirrors the PMD portfolio game (play.yibochen.dev) so the two
   feel like one project: deep navy and pale-blue double borders, with a single
   light-green accent (Yibo's favourite colour) reserved for the cursor and highlights. */
/* The game's own bitmap font, converted by tools/build-pmd-font.py.
   Pixel-sharp at multiples of 12px only: use 12, 24, 36 or 48px. */
@font-face {
    font-family: 'PMD';
    src: url('../fonts/pmd.woff') format('woff');
    font-display: block;
}

:root {
    /* Surfaces */
    --bg: #0d1b2a;
    --bg-glow-a: rgba(15, 52, 96, 0.6);
    --bg-glow-b: rgba(22, 78, 99, 0.5);
    --panel: rgba(8, 8, 32, 0.62);
    --panel-hover: rgba(170, 204, 255, 0.07);

    /* Lines */
    --line: rgba(170, 204, 255, 0.55);
    --line-inner: #333366;
    --line-faint: rgba(170, 204, 255, 0.14);

    /* Text */
    --ink: #eef5fc;
    --ink-soft: #cfe3f5;
    --muted: rgba(207, 227, 245, 0.62);
    --faint: rgba(207, 227, 245, 0.45);

    /* Accent */
    --accent: #a8f5b8;
    --accent-strong: #86e89c;

    /* Type */
    --font-pixel: 'PMD', var(--font-mono);
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page transitions — same-site navigations cross-fade, and the portrait
   (shared name below) glides between its spots on each page. Browsers
   without cross-document view transitions just navigate normally. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: ease;
}

::view-transition-group(portrait) {
    animation-duration: 0.45s;
    animation-timing-function: var(--ease-out);
}

.portrait {
    view-transition-name: portrait;
}

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

/* Fallback fade (js/page-transition.js) for browsers without the above.
   No fill-mode on the fade-in, so .is-leaving can take opacity back down. */
.fade-nav body {
    animation: page-fade-in 0.35s ease;
}

.fade-nav.is-leaving body {
    opacity: 0;
    transition: opacity 0.2s ease;
}

@keyframes page-fade-in {
    from { opacity: 0; }
}

/* Registered as colours so switching the sky (js/sky-picker.js) can fade
   between palettes instead of snapping. The first paint doesn't animate. */
@property --bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #0d1b2a;
}

@property --bg-glow-a {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

@property --bg-glow-b {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

:root {
    transition: --bg 0.8s ease, --bg-glow-a 0.8s ease, --bg-glow-b 0.8s ease;
}

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

/* Time of day (js/time-of-day.js sets data-time on <html>). Only the
   background glows change; text, panels and the accent stay put, so
   contrast is the same at every hour. Without JS the defaults above apply. */
:root[data-time="dawn"] {
    --bg: #1b1d3a;
    --bg-glow-a: rgba(255, 158, 164, 0.30);   /* pink horizon, bottom-left */
    --bg-glow-b: rgba(186, 170, 240, 0.32);   /* pale lavender sky, top-right */
}

:root[data-time="day"] {
    --bg: #0f2338;
    --bg-glow-a: rgba(30, 110, 170, 0.60);
    --bg-glow-b: rgba(64, 160, 170, 0.50);
}

:root[data-time="dusk"] {
    --bg: #1a1426;
    --bg-glow-a: rgba(255, 140, 60, 0.32);    /* orange sunset, bottom-left */
    --bg-glow-b: rgba(150, 60, 120, 0.42);    /* plum sky, top-right */
}

:root[data-time="night"] {
    --bg: #090f1d;
    --bg-glow-a: rgba(15, 45, 90, 0.50);
    --bg-glow-b: rgba(44, 40, 112, 0.42);
}

/* A few still stars at night — behind everything, never animated */
:root[data-time="night"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 27% 64%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(2px 2px at 44% 9%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 63% 81%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 78% 22%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 56%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 86%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 93% 8%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 35% 38%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 71% 44%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 18% 47%, var(--ink-soft) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 28%, var(--ink-soft) 50%, transparent 51%);
}

@media print {
    :root[data-time="night"] body::before {
        display: none;
    }
}

/* The page background used by the game's host page */
.page-bg {
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 80%, var(--bg-glow-a) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 10%, var(--bg-glow-b) 0%, transparent 50%);
    background-attachment: fixed;
}