/* base.css — Themes, reset, cursor, preloader, theme panel */

/* ══════════════════════════════════════
   THEMES — 12 total
══════════════════════════════════════ */

/* 1 — Abyss (Dark Lime) — DEFAULT */
:root,[data-theme="abyss"]{
  --bg:#07070A;--bg2:#0D0D12;--bg3:#131318;--glass:rgba(13,13,18,.88);
  --tx:#F0EDE6;--mu:#4A4A58;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#C8FF32;--ar:200,255,50;
  --glow:rgba(200,255,50,.15);--glow2:rgba(200,255,50,.06);
  --card-h:rgba(200,255,50,.06);--card-border:rgba(200,255,50,.35);
}
/* 2 — Nebula (Dark Purple) */
[data-theme="nebula"]{
  --bg:#06020E;--bg2:#0B0618;--bg3:#110A26;--glass:rgba(11,6,24,.9);
  --tx:#EDE8FF;--mu:#564878;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#B77EFC;--ar:183,126,252;
  --glow:rgba(183,126,252,.18);--glow2:rgba(183,126,252,.06);
  --card-h:rgba(183,126,252,.07);--card-border:rgba(183,126,252,.38);
}
/* 3 — Aurora (Light Red) */
[data-theme="aurora"]{
  --bg:#F4F2ED;--bg2:#ECEAE3;--bg3:#E3E0D7;--glass:rgba(236,234,227,.92);
  --tx:#111;--mu:#9A9890;--bd:rgba(0,0,0,.08);--bd2:rgba(0,0,0,.15);
  --a:#E8004D;--ar:232,0,77;
  --glow:rgba(232,0,77,.15);--glow2:rgba(232,0,77,.05);
  --card-h:rgba(232,0,77,.05);--card-border:rgba(232,0,77,.35);
}
/* 4 — Inferno (Dark Orange) */
[data-theme="inferno"]{
  --bg:#080501;--bg2:#100900;--bg3:#181100;--glass:rgba(16,9,0,.9);
  --tx:#FFF2E0;--mu:#584428;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#FF6500;--ar:255,101,0;
  --glow:rgba(255,101,0,.18);--glow2:rgba(255,101,0,.06);
  --card-h:rgba(255,101,0,.07);--card-border:rgba(255,101,0,.38);
}
/* 5 — Ocean (Dark Cyan) */
[data-theme="ocean"]{
  --bg:#010A0F;--bg2:#031218;--bg3:#061A24;--glass:rgba(3,18,24,.9);
  --tx:#D6F4FF;--mu:#2E5F72;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#00D4FF;--ar:0,212,255;
  --glow:rgba(0,212,255,.18);--glow2:rgba(0,212,255,.06);
  --card-h:rgba(0,212,255,.06);--card-border:rgba(0,212,255,.35);
}
/* 6 — Mint (Light Green) */
[data-theme="mint"]{
  --bg:#F0FAF4;--bg2:#E4F5EB;--bg3:#D6EEE0;--glass:rgba(228,245,235,.92);
  --tx:#0F2218;--mu:#5A8A6A;--bd:rgba(0,0,0,.08);--bd2:rgba(0,0,0,.15);
  --a:#00A854;--ar:0,168,84;
  --glow:rgba(0,168,84,.15);--glow2:rgba(0,168,84,.05);
  --card-h:rgba(0,168,84,.05);--card-border:rgba(0,168,84,.35);
}
/* 7 — Sunset (Dark Pink) */
[data-theme="sunset"]{
  --bg:#0D0208;--bg2:#160310;--bg3:#1E0418;--glass:rgba(22,3,16,.9);
  --tx:#FFE8F5;--mu:#7A3060;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#FF2D9B;--ar:255,45,155;
  --glow:rgba(255,45,155,.18);--glow2:rgba(255,45,155,.06);
  --card-h:rgba(255,45,155,.07);--card-border:rgba(255,45,155,.38);
}
/* 8 — Glacier (Light Blue) */
[data-theme="glacier"]{
  --bg:#EEF4FB;--bg2:#E2EDF8;--bg3:#D4E4F4;--glass:rgba(226,237,248,.92);
  --tx:#0A1929;--mu:#7090B0;--bd:rgba(0,0,0,.08);--bd2:rgba(0,0,0,.15);
  --a:#0070F3;--ar:0,112,243;
  --glow:rgba(0,112,243,.15);--glow2:rgba(0,112,243,.05);
  --card-h:rgba(0,112,243,.05);--card-border:rgba(0,112,243,.35);
}
/* 9 — Ember (Dark Gold) */
[data-theme="ember"]{
  --bg:#090600;--bg2:#110B00;--bg3:#191200;--glass:rgba(17,11,0,.9);
  --tx:#FFF8E0;--mu:#6B5020;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#FFB800;--ar:255,184,0;
  --glow:rgba(255,184,0,.18);--glow2:rgba(255,184,0,.06);
  --card-h:rgba(255,184,0,.07);--card-border:rgba(255,184,0,.38);
}
/* 10 — Arctic (Pure White) */
[data-theme="arctic"]{
  --bg:#FFFFFF;--bg2:#F5F5F5;--bg3:#EBEBEB;--glass:rgba(245,245,245,.94);
  --tx:#0A0A0A;--mu:#909090;--bd:rgba(0,0,0,.08);--bd2:rgba(0,0,0,.15);
  --a:#7C3AED;--ar:124,58,237;
  --glow:rgba(124,58,237,.15);--glow2:rgba(124,58,237,.05);
  --card-h:rgba(124,58,237,.05);--card-border:rgba(124,58,237,.35);
}
/* 11 — Forest (Dark Green) */
[data-theme="forest"]{
  --bg:#010A04;--bg2:#031208;--bg3:#051A0C;--glass:rgba(3,18,8,.9);
  --tx:#D4FFE0;--mu:#2A5C38;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#39FF6A;--ar:57,255,106;
  --glow:rgba(57,255,106,.15);--glow2:rgba(57,255,106,.05);
  --card-h:rgba(57,255,106,.06);--card-border:rgba(57,255,106,.35);
}
/* 12 — Crimson (Dark Red) */
[data-theme="crimson"]{
  --bg:#0A0101;--bg2:#120202;--bg3:#1A0303;--glass:rgba(18,2,2,.9);
  --tx:#FFE8E8;--mu:#6B2020;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);
  --a:#FF3333;--ar:255,51,51;
  --glow:rgba(255,51,51,.18);--glow2:rgba(255,51,51,.06);
  --card-h:rgba(255,51,51,.07);--card-border:rgba(255,51,51,.38);
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:'Outfit',sans-serif;overflow-x:hidden;cursor:none;transition:background .5s,color .5s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--a);color:#000}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--a);border-radius:2px}

/* ══════════════════════════════════════
   CURSOR
══════════════════════════════════════ */
#cur-dot,#cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%)}
#cur-dot{width:9px;height:9px;background:var(--a);mix-blend-mode:difference;transition:width .2s,height .2s}
#cur-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);transition:width .3s cubic-bezier(.19,1,.22,1),height .3s cubic-bezier(.19,1,.22,1),opacity .3s}
.ch #cur-dot{width:52px;height:52px;background:transparent;border:1.5px solid var(--a);mix-blend-mode:normal}
.ch #cur-ring{opacity:0}
.ct #cur-dot{width:3px;height:26px;border-radius:2px}

/* ══════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════ */
#prog{position:fixed;top:0;left:0;height:2px;z-index:8000;background:linear-gradient(90deg,var(--a),rgba(var(--ar),.35));box-shadow:0 0 10px var(--glow);pointer-events:none;width:0%;transition:background .5s}

/* ══════════════════════════════════════
   GRAIN OVERLAY
══════════════════════════════════════ */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.022;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:gA 6s steps(1) infinite}
@keyframes gA{0%{background-position:0 0}20%{background-position:60px -40px}40%{background-position:-40px 70px}60%{background-position:40px -60px}80%{background-position:-60px 30px}}

/* ══════════════════════════════════════
   CANVAS + MESH ORBS
══════════════════════════════════════ */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.mesh{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(110px);animation:orbD ease-in-out infinite}
.orb1{width:min(700px,80vw);aspect-ratio:1;background:var(--glow);top:-20%;right:-10%;animation-duration:16s}
.orb2{width:min(500px,65vw);aspect-ratio:1;background:var(--glow2);bottom:-15%;left:-8%;animation-duration:20s;animation-direction:reverse;animation-delay:3s}
.orb3{width:min(350px,45vw);aspect-ratio:1;background:var(--glow2);top:40%;left:42%;animation-duration:13s;animation-delay:6s;opacity:.45}
@keyframes orbD{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-38px) scale(1.06)}66%{transform:translate(-22px,22px) scale(.95)}}

/* ══════════════════════════════════════
   PRELOADER
══════════════════════════════════════ */
#loader{position:fixed;inset:0;z-index:9800;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s,visibility .7s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-name{overflow:hidden}
.ld-name span{display:block;font-size:clamp(22px,5vw,52px);font-weight:900;letter-spacing:-.04em;color:var(--tx);transform:translateY(110%);animation:sUp .85s cubic-bezier(.76,0,.24,1) .15s forwards}
.ld-bar{width:min(240px,55vw);height:1px;background:var(--bd);position:relative;overflow:hidden}
.ld-fill{position:absolute;left:0;top:0;height:100%;background:var(--a);width:0%;transition:width .08s linear}
.ld-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mu);letter-spacing:.14em}
.ld-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);opacity:.5}
@keyframes sUp{to{transform:translateY(0)}}
@keyframes fIn{to{opacity:1}}

/* ══════════════════════════════════════
   THEME PANEL — 3 pinned + more dropdown
══════════════════════════════════════ */
#tp{
  position:fixed;bottom:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);z-index:800;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:50px;
  padding:12px 8px;backdrop-filter:blur(18px);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.tp-l{
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mu);writing-mode:vertical-rl;margin-bottom:2px;
}
.tp-b{
  width:22px;height:22px;border-radius:50%;border:none;cursor:none;
  transition:transform .25s,outline-offset .2s,box-shadow .25s;
  outline:2px solid transparent;outline-offset:2px;flex-shrink:0;
  position:relative;
}
.tp-b:hover{ transform:scale(1.3); box-shadow:0 0 10px rgba(255,255,255,.2); }
.tp-b.on{ outline-color:var(--tx); outline-offset:3px; }

/* "More" toggle button */
#tp-more-btn{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--bd);
  background:var(--bg3);cursor:none;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--mu);line-height:1;
  transition:border-color .25s,color .25s,transform .25s,background .25s;
  flex-shrink:0;
}
#tp-more-btn:hover{ border-color:var(--a);color:var(--a);background:var(--card-h); }
#tp-more-btn.open{ border-color:var(--a);color:var(--a);background:var(--card-h); }

/* Dropdown popup — slides left */
#tp-dropdown{
  position:absolute;bottom:0;right:38px;
  width:204px;
  background:var(--bg2);border:1px solid var(--bd2);border-radius:16px;
  padding:14px;backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(10px) scale(.96);
  transform-origin:right center;
  transition:opacity .3s cubic-bezier(.19,1,.22,1),
             transform .3s cubic-bezier(.19,1,.22,1),
             visibility .3s;
}
#tp-dropdown.open{
  opacity:1;visibility:visible;pointer-events:all;
  transform:translateX(0) scale(1);
}
.tp-dd-title{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mu);margin-bottom:10px;padding:0 2px;
  display:flex;align-items:center;justify-content:space-between;
}
.tp-dd-title span{ color:var(--a);font-family:'JetBrains Mono',monospace;font-size:9px; }
.tp-dd-section{
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);opacity:.5;margin:8px 0 6px;padding:0 2px;
}
.tp-dd-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin-bottom:2px;
}
.tp-dd-grid .tp-b{
  width:100%;aspect-ratio:1;border-radius:8px;
  outline:2px solid transparent;outline-offset:2px;
}
.tp-dd-grid .tp-b.on{ outline-color:var(--tx);outline-offset:2px; }
.tp-dd-grid .tp-b:hover{ transform:scale(1.1); }
/* Tooltip */
.tp-dd-grid .tp-b::after{
  content:attr(title);
  position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);
  background:var(--bg3);border:1px solid var(--bd2);
  color:var(--tx);font-size:9px;font-family:'JetBrains Mono',monospace;
  padding:2px 7px;border-radius:5px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:10;
}
.tp-dd-grid .tp-b:hover::after{ opacity:1; }
.tp-dd-hint{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--bd);
  font-size:9px;color:var(--mu);text-align:center;
}
.tp-dd-hint kbd{
  background:var(--bg3);border:1px solid var(--bd2);
  border-radius:4px;padding:1px 5px;
  font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--mu);
}

/* Conic swatch colours */
.ta  { background:conic-gradient(#C8FF32 0deg,#07070A 180deg) }
.tn  { background:conic-gradient(#B77EFC 0deg,#06020E 180deg) }
.ti  { background:conic-gradient(#FF6500 0deg,#080501 180deg) }
.toc { background:conic-gradient(#00D4FF 0deg,#010A0F 180deg) }
.tss { background:conic-gradient(#FF2D9B 0deg,#0D0208 180deg) }
.tem { background:conic-gradient(#FFB800 0deg,#090600 180deg) }
.tfo { background:conic-gradient(#39FF6A 0deg,#010A04 180deg) }
.tcr { background:conic-gradient(#FF3333 0deg,#0A0101 180deg) }
.tau { background:conic-gradient(#E8004D 0deg,#F4F2ED 180deg) }
.tmt { background:conic-gradient(#00A854 0deg,#F0FAF4 180deg) }
.tgl { background:conic-gradient(#0070F3 0deg,#EEF4FB 180deg) }
.tar { background:conic-gradient(#7C3AED 0deg,#FFFFFF 180deg) }