/* =============================================================
   HARMONIC SET — the futuristic view
   Everything here is scoped to html[data-theme="harmonic"], so the
   classic ATELIER look in site.css is untouched when switched back.
   ============================================================= */

html[data-theme="harmonic"]{
  --bg:          #04050b;
  --bg-deep:     #020308;
  --panel:       #0a0d1c;
  --panel-2:     #0f1428;
  --line:        rgba(57,230,255,.16);
  --line-strong: rgba(247,147,26,.60);
  --gold:        #f7931a;             /* bitcoin orange takes the accent role */
  --gold-bright: #ffb752;
  --gold-dim:    rgba(247,147,26,.62);
  --ink:         #eaf3ff;
  --ink-soft:    #aab9d8;
  --ink-mute:    #6d7c9c;
  --cyan:        #39e6ff;
  --violet:      #8454ff;
  --magenta:     #ff3fa4;
  --radius:      2px;
  --serif:       "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --sans:        "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono:        "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---------- ground ---------- */
html[data-theme="harmonic"] body{ background:var(--bg); }
html[data-theme="harmonic"] body::before{
  background:
    radial-gradient(900px 600px at 8% -6%, rgba(247,147,26,.16), transparent 60%),
    radial-gradient(900px 700px at 100% 10%, rgba(57,230,255,.12), transparent 62%),
    radial-gradient(700px 500px at 50% 110%, rgba(132,84,255,.14), transparent 60%);
}
/* scanlines instead of paper grain */
html[data-theme="harmonic"] body::after{
  opacity:.5;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
html[data-theme="harmonic"] #mandel-bg{
  opacity:1;
  mix-blend-mode:normal;
  mask-image:none; -webkit-mask-image:none;
}
html[data-theme="harmonic"] ::selection{ background:rgba(247,147,26,.35); }

/* ---------- top bar ---------- */
html[data-theme="harmonic"] .topbar{
  background:linear-gradient(to bottom, rgba(4,5,11,.92), rgba(4,5,11,.66));
}
html[data-theme="harmonic"] .topbar.stuck{ border-bottom-color:rgba(57,230,255,.22); box-shadow:0 1px 0 rgba(247,147,26,.18); }
html[data-theme="harmonic"] .wordmark{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--serif); font-weight:500; font-size:16px; letter-spacing:.32em; text-indent:0;
  background:linear-gradient(90deg, #fff 0%, var(--cyan) 55%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-theme="harmonic"] .wordmark::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--gold); box-shadow:0 0 0 3px rgba(247,147,26,.18), 0 0 16px var(--gold);
  animation:hs-pulse 2.4s ease-in-out infinite;
}
@keyframes hs-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.7); opacity:.6 } }
html[data-theme="harmonic"] .nav a{ color:var(--ink-soft); }
html[data-theme="harmonic"] .nav a::after{ background:linear-gradient(90deg, var(--cyan), var(--gold)); height:2px; box-shadow:0 0 8px var(--cyan); }
html[data-theme="harmonic"] .nav a:hover, html[data-theme="harmonic"] .nav a[aria-current]{ color:#fff; }
html[data-theme="harmonic"] .nav .sep{ color:rgba(57,230,255,.3); }

/* theme switch (home page) — shown in both views */
.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:10px; padding:6px 12px;
  border:1px solid var(--line-strong); border-radius:999px; background:transparent;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-bright); cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover{ background:rgba(201,162,92,.10); border-color:var(--gold); }
.theme-toggle .tt-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }
html[data-theme="harmonic"] .theme-toggle{ border-color:rgba(57,230,255,.35); color:var(--ink-soft); }
html[data-theme="harmonic"] .theme-toggle:hover{ border-color:var(--gold); color:#fff; background:rgba(247,147,26,.10); }
html[data-theme="harmonic"] .theme-toggle .tt-dot{ background:#c9a25c; box-shadow:0 0 8px #c9a25c; }
.theme-toggle:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }

/* slogan ticker */
.ticker{ display:none; }
html[data-theme="harmonic"] .ticker{
  display:block; overflow:hidden; position:relative; z-index:1;
  border-top:1px solid rgba(57,230,255,.12);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
html[data-theme="harmonic"] .ticker-track{
  display:inline-flex; align-items:center; white-space:nowrap; gap:0;
  padding:7px 0; animation:hs-ticker 90s linear infinite;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute);
}
html[data-theme="harmonic"] .ticker-track span{ padding:0 18px; }
html[data-theme="harmonic"] .ticker-track i{ font-style:normal; color:var(--gold); font-size:12px; letter-spacing:0; }
html[data-theme="harmonic"] .ticker-track i:nth-of-type(even){ color:var(--cyan); }
@keyframes hs-ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- type ---------- */
html[data-theme="harmonic"] .display{ font-weight:300; letter-spacing:-.02em; line-height:1.04; }
html[data-theme="harmonic"] .display em{
  font-style:normal;
  background:linear-gradient(90deg, var(--gold) 0%, #ffd08a 50%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px rgba(247,147,26,.35);
}
html[data-theme="harmonic"] .mono{ color:var(--cyan); }

/* ---------- hero ---------- */
html[data-theme="harmonic"] .hero{ padding:88px 0 40px; }
html[data-theme="harmonic"] .hero h1{
  font-size:clamp(38px, 6.6vw, 84px); max-width:14ch;
  color:#fff; text-shadow:0 2px 30px rgba(4,5,11,.9);
}
html[data-theme="harmonic"] .hero .blurb{ color:var(--ink-soft); text-shadow:0 1px 14px rgba(4,5,11,.95); }
.hero-hud{ display:none; }
html[data-theme="harmonic"] .hero-hud{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:26px;
}
html[data-theme="harmonic"] .hero-hud .formula{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--cyan);
  padding:7px 12px; border:1px solid rgba(57,230,255,.25); background:rgba(4,5,11,.55);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
html[data-theme="harmonic"] .hero-hud .blk{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
html[data-theme="harmonic"] .hero-hud .blk[hidden]{ display:none; }
html[data-theme="harmonic"] .hero-hud .blk b{ color:var(--gold-bright); font-weight:500; letter-spacing:.08em; }
html[data-theme="harmonic"] .blk-dot{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 10px var(--gold); animation:hs-pulse 1.6s ease-in-out infinite; }

/* ---------- filter row ---------- */
html[data-theme="harmonic"] .controls{ border-top-color:rgba(57,230,255,.18); }
html[data-theme="harmonic"] .chip{
  border-radius:0; border-color:rgba(57,230,255,.22); color:var(--ink-soft);
  background:rgba(4,5,11,.55);
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  padding:6px 18px;
}
html[data-theme="harmonic"] .chip:hover{ color:#fff; border-color:var(--cyan); }
html[data-theme="harmonic"] .chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#0a0602; }
html[data-theme="harmonic"] .count{ color:var(--cyan); }

/* ---------- cards ---------- */
html[data-theme="harmonic"] .card{
  border-radius:0;
  background:linear-gradient(160deg, rgba(15,20,40,.92) 0%, rgba(4,5,11,.94) 100%);
  border:1px solid rgba(57,230,255,.16);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* HUD corner brackets */
html[data-theme="harmonic"] .card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:
    linear-gradient(var(--cyan),var(--cyan)) top 0 right 0 / 22px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) top 0 right 0 / 1px 22px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom 0 left 0 / 22px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom 0 left 0 / 1px 22px no-repeat;
  opacity:.7; transition:opacity .4s var(--ease);
}
html[data-theme="harmonic"] .card:hover{
  border-color:rgba(247,147,26,.55);
  box-shadow:inset 0 0 0 1px rgba(247,147,26,.25), inset 0 0 60px rgba(247,147,26,.08);
}
html[data-theme="harmonic"] .card:hover::before{ opacity:1; }
html[data-theme="harmonic"] .card-num{ color:var(--ink-mute); }
html[data-theme="harmonic"] .card-num b{ color:var(--cyan); }
html[data-theme="harmonic"] .card-num b::before{ content:"\0394"; margin-right:2px; color:var(--gold); }
html[data-theme="harmonic"] .card-stage{ border-radius:0; border-color:rgba(57,230,255,.14); background:#03040a; }
html[data-theme="harmonic"] .card-stage::after{
  background:
    linear-gradient(to top, rgba(4,5,11,.94) 0%, rgba(4,5,11,.18) 46%, transparent 74%),
    repeating-linear-gradient(to bottom, rgba(57,230,255,.04) 0 1px, transparent 1px 4px);
}
html[data-theme="harmonic"] .card-title{ font-weight:400; font-size:clamp(18px,1.8vw,24px); letter-spacing:.01em; }
html[data-theme="harmonic"] .card:hover .card-title{ color:#fff; text-shadow:0 0 18px rgba(57,230,255,.35); }
html[data-theme="harmonic"] .tag{ border-radius:0; border-color:rgba(57,230,255,.2); color:var(--ink-soft); }

/* ---------- sections ---------- */
html[data-theme="harmonic"] .section{ border-top-color:rgba(57,230,255,.14); }
html[data-theme="harmonic"] .section h2{ font-weight:300; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.01em; }
html[data-theme="harmonic"] #about .section-label::before{ content:"\222E\00a0\00a0"; color:var(--gold); }
html[data-theme="harmonic"] #index .section-label::before{ content:"\03A3\00a0\00a0"; color:var(--gold); }
html[data-theme="harmonic"] .prose{ color:var(--ink-soft); }
html[data-theme="harmonic"] #about .prose,
html[data-theme="harmonic"] .ledger{ background:rgba(4,5,11,.6); }
html[data-theme="harmonic"] #about .prose{ padding:22px 26px; border-left:2px solid var(--gold); }
html[data-theme="harmonic"] .ledger th{ border-bottom-color:rgba(57,230,255,.25); color:var(--cyan); }
html[data-theme="harmonic"] .ledger td{ border-bottom-color:rgba(57,230,255,.08); }
html[data-theme="harmonic"] .ledger tbody tr:hover{ background:linear-gradient(90deg, rgba(247,147,26,.10), transparent 70%); }
html[data-theme="harmonic"] .ledger .l-num{ color:var(--cyan); }
html[data-theme="harmonic"] .ledger .l-title{ font-weight:300; font-size:18px; }

/* ---------- footer ---------- */
html[data-theme="harmonic"] .foot{ border-top-color:rgba(57,230,255,.14); }
.foot .credit{ text-transform:none; letter-spacing:.12em; }
html[data-theme="harmonic"] .foot .credit{ color:var(--ink-mute); }
.foot-slogan{ display:none; }
html[data-theme="harmonic"] .foot-slogan{ display:inline; color:var(--gold-dim); letter-spacing:.24em; }

/* ---------- music ---------- */
html[data-theme="harmonic"] .mset-title::before{ content:"\266A\00a0"; color:var(--gold); font-size:.8em; }
html[data-theme="harmonic"] .mset-blurb{ color:var(--ink-soft); }
html[data-theme="harmonic"] .mset{ background:rgba(4,5,11,.74); padding:18px 12px 6px; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
html[data-theme="harmonic"] .track{ border-bottom-color:rgba(57,230,255,.09); }
html[data-theme="harmonic"] .track:hover{ background:linear-gradient(90deg, rgba(57,230,255,.07), transparent 80%); }
html[data-theme="harmonic"] .track.active{ background:linear-gradient(90deg, rgba(247,147,26,.14), transparent 85%); }
html[data-theme="harmonic"] .track.active::before{ background:var(--gold); box-shadow:0 0 12px var(--gold); }
/* a live frequency strip across the playing row */
html[data-theme="harmonic"] .track.active::after{
  content:""; position:absolute; right:90px; bottom:10px; width:min(260px,30%); height:22px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(57,230,255,.55) 0 2px, transparent 2px 6px);
  mask-image:linear-gradient(to top, #000, transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
  animation:hs-spectrum 1.1s ease-in-out infinite alternate;
  transform-origin:bottom;
}
@keyframes hs-spectrum{ 0%{ transform:scaleY(.35) } 40%{ transform:scaleY(1) } 70%{ transform:scaleY(.6) } 100%{ transform:scaleY(.9) } }
html[data-theme="harmonic"] .track .t-num{ color:var(--cyan); }
html[data-theme="harmonic"] .track .t-name{ font-weight:300; font-size:clamp(17px,1.9vw,22px); }
html[data-theme="harmonic"] .eq i{ background:var(--gold-bright); box-shadow:0 0 6px var(--gold); }

/* ---------- viewer ---------- */
html[data-theme="harmonic"] .vbar{ background:rgba(4,5,11,.92); border-bottom-color:rgba(57,230,255,.2); box-shadow:0 1px 0 rgba(247,147,26,.15); }
html[data-theme="harmonic"] .vtitle{ border-left-color:rgba(57,230,255,.2); }
html[data-theme="harmonic"] .vtitle h1{ font-weight:400; font-size:17px; letter-spacing:.02em; }
html[data-theme="harmonic"] .vtitle .vkick{ color:var(--cyan); }
html[data-theme="harmonic"] .vbtn{ border-radius:0; border-color:rgba(57,230,255,.22); color:var(--ink-soft); }
html[data-theme="harmonic"] .vbtn:hover:not(:disabled){ border-color:var(--gold); color:#fff; background:rgba(247,147,26,.10); }
html[data-theme="harmonic"] .vinfo{ background:linear-gradient(200deg, #0f1428 0%, #03040a 100%); border-left-color:rgba(57,230,255,.2); }
html[data-theme="harmonic"] .vinfo h2{ font-weight:300; font-size:24px; }
html[data-theme="harmonic"] .vinfo .meta-row{ border-top-color:rgba(57,230,255,.12); }
html[data-theme="harmonic"] .vinfo .meta-row span:last-child{ color:var(--gold-bright); }

/* ---------- music dock (shell) ---------- */
html[data-theme="harmonic"] .dock-card,
html[data-theme="harmonic"] .dock-pill{
  background:rgba(4,5,11,.9);
  border-color:rgba(57,230,255,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 24px rgba(57,230,255,.08);
}
html[data-theme="harmonic"] .dock-card{ border-radius:0; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
html[data-theme="harmonic"] .dock-title{ font-weight:400; font-size:15px; }
html[data-theme="harmonic"] .dl-head{ color:var(--cyan); }
html[data-theme="harmonic"] .dock-pill{ color:#fff; }
html[data-theme="harmonic"] .dock-pill svg{ color:var(--gold); }

/* ---------- small screens ---------- */
@media (max-width:620px){
  html[data-theme="harmonic"] .hero{ padding:56px 0 28px; }
  html[data-theme="harmonic"] .wordmark{ font-size:12px; letter-spacing:.2em; white-space:nowrap; }
  html[data-theme="harmonic"] .topbar-inner{ flex-wrap:wrap; row-gap:10px; padding:14px 0; }
  html[data-theme="harmonic"] .hero h1, html[data-theme="harmonic"] .hero .blurb{ text-shadow:0 2px 18px #04050b, 0 0 2px #04050b; }
  .theme-toggle{ margin-left:4px; padding:5px 9px; font-size:9px; letter-spacing:.12em; }
  html[data-theme="harmonic"] .track.active::after{ display:none; }
}
@media (max-width:760px){
  .nav{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
}
@media (prefers-reduced-motion:reduce){
  html[data-theme="harmonic"] .ticker-track{ animation:none; }
}