/* Gilded HUD — homepage styles (front page only). */

:root{
  --ink:#080B08; --obsidian:#0A0F0B; --surface:#121A13; --elevated:#1A241B;
  --pine:#0C3A0D; --forest:#104911; --emerald:#1E7A2C;
  --gold-deep:#B9842A; --gold:#E2A837; --gold-light:#EFC35C;
  --heading:#F4EFE3; --body:#CFC9BB; --muted:#8E8B7E;
  --border:rgba(244,239,227,0.10); --border-gold:rgba(226,168,55,0.30);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
  /* Emission tokens (dark edition = the values already shipped). Extracted
     into variables, not changed, so the Light override below can spend each
     one down toward zero/weight without touching a single dark-mode value. */
  --grid:rgba(226,168,55,0.035);
  --scan:rgba(226,168,55,0.14);
  --dot-glow:0 0 10px var(--gold);
  --crt-opacity:.5;
  --panel-shadow:none;
}

/* ============================================================
   Light edition (paper) — ADR-003 / BRAND.md §3.2.
   Dark-first: every value above stays the default. Two override
   blocks at the same :root scope this file already declares its
   tokens at — an explicit choice always wins, Auto follows the OS.
   Emission -> weight: grid/scan/dot-glow/CRT spend down to near-zero
   or off; panels gain a paper drop-shadow instead of a border glow.
   No owl on the homepage in light mode (direction §3 — unchanged).
   ============================================================ */
:root[data-theme="light"]{
  --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
  --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
  --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
  --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
  --bm-hover-from-gold:var(--bm-gold-ink-hover);
  --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
  --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
  --grid:rgba(42,40,32,0.035);
  --scan:rgba(185,132,42,0.10);
  --dot-glow:none;
  --crt-opacity:0;
  --panel-shadow:0 1px 0 rgba(255,255,255,0.4), 0 10px 30px -18px rgba(42,40,32,0.5);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
    --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
    --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
    --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
    --bm-hover-from-gold:var(--bm-gold-ink-hover);
    --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
    --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
    --grid:rgba(42,40,32,0.035);
    --scan:rgba(185,132,42,0.10);
    --dot-glow:none;
    --crt-opacity:0;
    --panel-shadow:0 1px 0 rgba(255,255,255,0.4), 0 10px 30px -18px rgba(42,40,32,0.5);
  }
}

.bmhud-home *{box-sizing:border-box;margin:0;padding:0}
.bmhud-home{
  background:var(--obsidian); color:var(--body); font-family:var(--sans);
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px; animation:bm-drift 90s linear infinite;
  transition:background-color .45s ease, color .45s ease;
}
@keyframes bm-drift{from{background-position:0 0}to{background-position:44px 88px}}
#crt{position:fixed;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 3px),radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.45) 100%);mix-blend-mode:multiply;opacity:var(--crt-opacity);transition:opacity .45s ease}
.stage{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 28px}
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:22px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.brand-group{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;letter-spacing:normal}
.topbar .brand{color:var(--heading);font-family:var(--serif);font-weight:600;font-size:20px;line-height:1;letter-spacing:0;text-decoration:none}
.topbar .brand b{color:var(--bm-gold-ink,var(--gold));font-weight:inherit}
.brand-alias{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:0}
.brand-alias-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar .status{color:var(--muted);display:flex;gap:10px;align-items:center}
.topbar .status .sep{color:var(--border-gold)}
#clock{color:var(--body)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:var(--dot-glow);animation:bm-pulse 2.4s infinite}
@keyframes bm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rise{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
.rise.in{opacity:1;transform:none}
.hero{padding:66px 0 54px;position:relative}
.hero h1{font-family:var(--serif);color:var(--heading);font-weight:500;font-size:72px;line-height:1.06;letter-spacing:-.02em;max-width:900px}
.hero h1 .g{color:var(--bm-gold-ink,var(--gold));font-style:italic;position:relative}
.hero h1 .g:after{content:"_";animation:bm-blink 1.1s step-end infinite;color:var(--bm-gold-ink,var(--gold))}
@keyframes bm-blink{50%{opacity:0}}
.hero .sub{font-family:var(--mono);font-size:15px;color:var(--body);margin-top:28px;max-width:560px;line-height:1.9;letter-spacing:.01em}
.panels{display:flex;gap:14px;height:420px;margin-top:64px;margin-bottom:70px}
.panel{position:relative;flex:1;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--panel-shadow);transition:flex .55s cubic-bezier(.6,.05,.2,1), border-color .4s, background .4s, box-shadow .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.panels:hover .panel,.panels:focus-within .panel{flex:.6}
.panel:hover,.panel:focus-within{flex:3.4 !important;border-color:var(--gold);background:var(--elevated)}
.panel .brk{position:absolute;width:16px;height:16px;border:1.5px solid var(--border-gold);opacity:.5;transition:opacity .4s, border-color .4s}
.panel .brk.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.panel .brk.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.panel .brk.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.panel .brk.br{bottom:14px;right:14px;border-left:0;border-top:0}
.panel:hover .brk,.panel:focus-within .brk{opacity:1;border-color:var(--gold)}
.panel .scan{position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,var(--scan),transparent);transform:translateY(-80px)}
.panel:hover .scan,.panel:focus-within .scan{animation:bm-sweep .9s ease-out}
@keyframes bm-sweep{0%{transform:translateY(-80px)}100%{transform:translateY(440px)}}
.panel .idx{font-family:var(--mono);font-size:12px;color:var(--bm-gold-ink,var(--gold));letter-spacing:.1em;position:absolute;top:22px;left:24px}
.panel .name{font-family:var(--serif);font-size:30px;color:var(--heading);font-weight:500}
.panel .tagline{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.05em}
.panel .screen{opacity:0;max-height:0;overflow:hidden;transition:opacity .45s .15s;margin-top:18px}
.panel:hover .screen,.panel:focus-within .screen{opacity:1;max-height:260px}
.panel .screen .line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--border);font-size:14px;text-decoration:none}
.panel .screen a.line:hover .t{color:var(--bm-hover-from-gold,var(--gold))}
.panel .screen .line .t{color:var(--body)}
.panel .screen .line .m{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.panel .screen p{font-size:15px;color:var(--body);line-height:1.7}
.panel .screen p.note{color:var(--muted);font-style:italic}
.panel .screen .enter{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--bm-gold-ink,var(--gold));letter-spacing:.06em;text-decoration:none}
.panel .screen .enter:after{content:" \25B8"}
.bm-footer{font-family:var(--mono);font-size:12px;color:var(--muted);padding:26px 0 46px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.bm-footer b{color:var(--bm-gold-ink,var(--gold))}
.bm-footer-name{font-family:var(--serif);font-weight:500;font-size:14px;letter-spacing:0;color:var(--heading)}
.bm-footer-name b{color:var(--bm-gold-ink,var(--gold));font-weight:inherit}
@media(prefers-reduced-motion:reduce){
  .bmhud-home,.rise{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important}
  /* Stop the looping dot-pulse / scan-sweep / cursor-blink without forcing
     .scan's hidden resting transform into view (it sits off-panel at rest). */
  .dot,.panel .scan,.hero h1 .g:after{animation:none !important}
}
@media(max-width:900px){
  .topbar .brand{font-size:18px}
  .hero h1{font-size:44px}
  .topbar-right{width:100%;justify-content:space-between}
  .panels{flex-direction:column;height:auto}
  .panels:hover .panel,.panels:focus-within .panel{flex:1}
  .panel{min-height:120px}
  .panel:hover,.panel:focus-within{flex:1 !important}
  .panel .screen{max-height:0}
  .panel:hover .screen,.panel:focus-within .screen{max-height:320px}
  #crt{opacity:calc(var(--crt-opacity) * .7)}
}