/* ============================================================
   THEME SYSTEM — ASHWITH D PORTFOLIO
   ------------------------------------------------------------
   A theme = one block that overrides design tokens on
   html[data-theme="…"] + (optionally) a few scoped visual
   overrides for signature elements.

   HOW TO ADD A NEW THEME (3 steps):
   1. Copy a block below, rename the data-theme value.
   2. Override the tokens you care about:
        --ink --paper --white            text / page bg / card surface
        --yellow --pink --teal --orange  accent slots (cards, chips,
        --lav --lime --red               highlights, buttons, marquees)
        --bw                             border thickness
        --shadow-xs/s/m/l                shadow language (hard vs glow)
        --radius / --radius-s            corner roundness
        --dots                           page texture (or `none`)
        --font-display / --font-body / --font-mono
   3. Register it in js/main.js → THEMES array (one line) so it
      appears in the dropdown. Done. No HTML changes needed.

   If the theme needs a different UI *language* (not just colors),
   add a "morph" section like "ORIGINAL DARK — UI MORPH": scoped
   rules that restyle components (overlays, hero, nav) and hide
   furniture the theme doesn't have. See that block as reference.
   ============================================================ */

/* ------------------------------------------------------------
   THEME: ORIGINAL DARK  ("tech noir" — the old Django site)
   Near-black surfaces, single red accent, Bebas Neue display,
   thin borders, rounded corners, soft glow shadows.
------------------------------------------------------------ */
html[data-theme="original"] {
  --ink: #e8e6f0;
  --paper: #07080c;
  --white: #161a26;
  --yellow: #e8232a;
  --pink: #ff4a4a;
  --teal: #c21d24;
  --orange: #ff4a4a;
  --lav: #7a1116;
  --lime: #a1161d;
  --red: #ff4a4a;
  --bw: 1px;
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-s: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-m: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-l: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 30px rgba(232, 35, 42, 0.12);
  --radius: 12px;
  --radius-s: 6px;
  --dots: none;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}

/* signature-element overrides */
html[data-theme="original"] .hl-pink,
html[data-theme="original"] .hl-yellow,
html[data-theme="original"] .hl-teal,
html[data-theme="original"] .hl-lav,
html[data-theme="original"] .hl-lime,
html[data-theme="original"] .hl-orange {
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--pink);
}
html[data-theme="original"] .section-label {
  background: transparent;
  color: var(--pink);
  box-shadow: none;
  border: 1px solid rgba(232, 35, 42, 0.45);
}
html[data-theme="original"] .marquee { background: #0d0f17; }
html[data-theme="original"] .marquee.marquee-pink { background: #07080c; }
html[data-theme="original"] .marquee-track span { color: var(--pink); }
html[data-theme="original"] .photo-frame::before { background: rgba(232, 35, 42, 0.35); }
html[data-theme="original"] .hero-eyebrow { background: rgba(232, 35, 42, 0.14); color: var(--pink); }
html[data-theme="original"] .hero-sub .tick { background: rgba(232, 35, 42, 0.14); }
html[data-theme="original"] .stat b { text-shadow: 0 0 18px rgba(232, 35, 42, 0.45); }

/* ------------------------------------------------------------
   THEME: TERMINAL  (phosphor green on black, all-monospace)
   Proves the recipe: one token block + a few overrides.
------------------------------------------------------------ */
html[data-theme="terminal"] {
  --ink: #9dff9d;
  --paper: #050805;
  --white: #0b120b;
  --yellow: #ffb000;
  --pink: #33ff33;
  --teal: #1db954;
  --orange: #ff9f1c;
  --lav: #0f3d1a;
  --lime: #0f3d1a;
  --red: #ff5555;
  --bw: 1px;
  --shadow-xs: 0 0 6px rgba(51, 255, 51, 0.35);
  --shadow-s: 0 0 8px rgba(51, 255, 51, 0.3);
  --shadow-m: 0 0 16px rgba(51, 255, 51, 0.25);
  --shadow-l: 0 0 26px rgba(51, 255, 51, 0.3);
  --radius: 0px;
  --radius-s: 0px;
  --dots: none;
  --font-display: "JetBrains Mono", Consolas, monospace;
  --font-body: "JetBrains Mono", Consolas, monospace;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}

html[data-theme="terminal"] .hl-pink,
html[data-theme="terminal"] .hl-yellow,
html[data-theme="terminal"] .hl-teal,
html[data-theme="terminal"] .hl-lav,
html[data-theme="terminal"] .hl-lime,
html[data-theme="terminal"] .hl-orange {
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(51, 255, 51, 0.6);
}
html[data-theme="terminal"] .section-label {
  background: var(--white);
  color: var(--pink);
  box-shadow: var(--shadow-s);
}
html[data-theme="terminal"] .marquee,
html[data-theme="terminal"] .marquee.marquee-pink { background: var(--white); }
html[data-theme="terminal"] .marquee-track span { color: var(--yellow); }

/* keep contrast: pale accent slots become dark surfaces */
html[data-theme="terminal"] .chip,
html[data-theme="terminal"] .learning-card .chip,
html[data-theme="terminal"] .tags li {
  background: var(--white);
  color: var(--ink);
}
html[data-theme="terminal"] .skill-group header { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .sticker,
html[data-theme="terminal"] .hero-eyebrow,
html[data-theme="terminal"] .hero-sub .tick { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .facts-card,
html[data-theme="terminal"] .contact-form,
html[data-theme="terminal"] .chat-head,
html[data-theme="terminal"] .service .icon { background: var(--white); color: var(--ink); }
html[data-theme="terminal"] .theme-select { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .btn-yellow,
html[data-theme="terminal"] .btn-pink,
html[data-theme="terminal"] .btn-teal,
html[data-theme="terminal"] .btn-lav { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .stat b { text-shadow: 0 0 12px rgba(51, 255, 51, 0.55); }
html[data-theme="terminal"] ::selection { background: var(--pink); color: #050805; }

/* ------------------------------------------------------------
   ORIGINAL DARK — UI MORPH
   Not just colors: recreate the old site's actual UI language.
   Ghost watermark hero, glassy nav, hover-reveal project
   overlays, rounded glow cards; decorative neobrutalism
   furniture (stickers, marquees, stats) is hidden.
------------------------------------------------------------ */

/* chrome */
html[data-theme="original"] .topbar {
  background: rgba(7, 8, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="original"] .logo-box {
  background: transparent; color: var(--pink);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none; transform: none;
  font-family: var(--font-display);
}
html[data-theme="original"] .nav-links a:not(.btn) { color: #7b7e8e; }
html[data-theme="original"] .nav-links a:not(.btn):hover {
  background: rgba(255, 255, 255, 0.05); color: #fff;
  border-color: transparent; box-shadow: none;
}
html[data-theme="original"] .nav-links a.active { background: transparent; color: var(--pink); }
html[data-theme="original"] .hamburger { background: #161a26; border-color: rgba(255,255,255,.15); box-shadow: none; }
html[data-theme="original"] .hamburger span { background: #e8e6f0; }
html[data-theme="original"] .mobile-drawer { background: #07080c; }
html[data-theme="original"] .mobile-drawer a { color: #e8e6f0; border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="original"] .theme-select {
  background: #161a26; color: #e8e6f0;
  border-color: rgba(255, 255, 255, 0.15); box-shadow: none;
}
html[data-theme="original"] .theme-picker label { color: #7b7e8e; }

/* hide neobrutalism furniture the old site never had */
html[data-theme="original"] .marquee,
html[data-theme="original"] .sticker,
html[data-theme="original"] .stats,
html[data-theme="original"] .photo-caption,
html[data-theme="original"] .featured-flag,
html[data-theme="original"] .project-num { display: none; }

/* hero: ghost watermark + editorial type */
html[data-theme="original"] .hero { position: relative; }
html[data-theme="original"] .hero::before {
  content: "ASHWITH";
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 19vw, 17rem);
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap; pointer-events: none; z-index: 0;
}
html[data-theme="original"] .hero-grid { position: relative; z-index: 1; }
html[data-theme="original"] .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: none; box-shadow: none; transform: none;
  color: var(--pink); letter-spacing: 0.2em;
}
html[data-theme="original"] .hero-eyebrow::before {
  content: ""; width: 40px; height: 1px; background: var(--pink);
}
html[data-theme="original"] .hero h1 { color: #fff; }
html[data-theme="original"] .hero-sub .tick {
  background: transparent; border: none; box-shadow: none; color: #7b7e8e;
  font-family: var(--font-display); letter-spacing: 0.15em;
}
html[data-theme="original"] .hero-copy { color: #7b7e8e; }

/* buttons: solid red primary / quiet outline */
html[data-theme="original"] .btn {
  border-radius: 3px; box-shadow: none;
  background: transparent; color: #7b7e8e;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
html[data-theme="original"] .btn:hover {
  transform: none; box-shadow: 0 0 20px rgba(232, 35, 42, 0.3);
  border-color: var(--pink); color: var(--pink);
}
html[data-theme="original"] .btn-yellow,
html[data-theme="original"] .btn-pink {
  background: var(--yellow); border-color: var(--yellow); color: #fff;
}
html[data-theme="original"] .btn-yellow:hover,
html[data-theme="original"] .btn-pink:hover { background: transparent; color: var(--pink); }

html[data-theme="original"] .socials a {
  background: transparent; border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none; color: #7b7e8e;
}
html[data-theme="original"] .socials a:hover {
  transform: none; box-shadow: none; background: rgba(232, 35, 42, 0.12);
  border-color: var(--pink); color: var(--pink);
}

/* photo: rounded, glowy, no frame/stickers */
html[data-theme="original"] .photo-frame {
  transform: none; padding: 0; background: transparent;
  border: none; box-shadow: none;
}
html[data-theme="original"] .photo-frame::before { display: none; }
html[data-theme="original"] .photo-frame img {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 35, 42, 0.12);
}

/* cards & surfaces */
html[data-theme="original"] .card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #161a26;
}
html[data-theme="original"] .about-card .big-quote { color: #fff; }
html[data-theme="original"] .about-card p { color: #7b7e8e; }
html[data-theme="original"] .facts-card { background: #181b27; }
html[data-theme="original"] .facts-card h3 { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="original"] .facts-card li { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="original"] .learning-card { background: #161a26; }
html[data-theme="original"] .learning-card .chip,
html[data-theme="original"] .chip {
  background: #181b27; color: #7b7e8e;
  border-color: rgba(255, 255, 255, 0.1); box-shadow: none;
}
html[data-theme="original"] .skill-group { background: #161a26; border-color: rgba(255,255,255,.07); }
html[data-theme="original"] .skill-group header {
  background: #181b27; color: #e8e6f0;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="original"] .skill-group header .num { background: transparent; color: var(--pink); border-color: rgba(232,35,42,.4); box-shadow: none; }
html[data-theme="original"] .xp-card .org { background: rgba(232,35,42,.12); color: var(--pink); border-color: transparent; box-shadow: none; }
html[data-theme="original"] .xp-card .edu-meta .score { background: rgba(232,35,42,.15); color: var(--pink); border-color: transparent; box-shadow: none; }
html[data-theme="original"] .cert { background: #161a26; border-color: rgba(255,255,255,.07); box-shadow: none; }
html[data-theme="original"] .cert:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html[data-theme="original"] .cert .year { background: var(--yellow); color: #fff; }
html[data-theme="original"] .section-intro { color: #7b7e8e; }

/* projects: image cards with hover-reveal overlay (old UI signature) */
html[data-theme="original"] .project {
  border: none; overflow: hidden; position: relative;
  box-shadow: var(--shadow-m); background: #0d0f17;
}
html[data-theme="original"] .project:hover {
  transform: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(232, 35, 42, 0.08);
}
html[data-theme="original"] .project.featured { grid-column: auto; flex-direction: column; }
html[data-theme="original"] .project.featured .project-media { width: 100%; border-right: none; }
html[data-theme="original"] .project.featured .project-body { width: 100%; padding: 28px 24px; }
html[data-theme="original"] .project-media img { aspect-ratio: 4 / 3; }
html[data-theme="original"] .project-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 24px 22px;
  background: linear-gradient(to bottom, transparent 0%, rgba(7, 8, 12, 0.5) 40%, rgba(7, 8, 12, 0.95) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
html[data-theme="original"] .project:hover .project-body,
html[data-theme="original"] .project:focus-within .project-body { opacity: 1; }
html[data-theme="original"] .project-body h3 { color: #fff; }
html[data-theme="original"] .project-body p { color: rgba(232, 230, 240, 0.75); }
html[data-theme="original"] .tags li {
  background: rgba(232, 35, 42, 0.14); border-color: transparent; color: #ff9d9d;
}

/* services */
html[data-theme="original"] .service { background: #161a26; border-color: rgba(255,255,255,.07); }
html[data-theme="original"] .service:hover { transform: none; box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 30px rgba(232,35,42,.08); }
html[data-theme="original"] .service .icon {
  background: #181b27; border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none; color: var(--pink);
}
html[data-theme="original"] .service:hover .icon { background: var(--yellow); border-color: var(--yellow); color: #fff; }
html[data-theme="original"] .service p { color: #7b7e8e; }
html[data-theme="original"] .service .stack { color: #4a4d5e; border-top-color: rgba(255,255,255,.08); }

/* contact: glass form like the old site */
html[data-theme="original"] .channel {
  background: #161a26; border-color: rgba(255, 255, 255, 0.07); box-shadow: none;
}
html[data-theme="original"] .channel:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); background: #181b27; }
html[data-theme="original"] .channel .c-icon { background: #0d0f17; border-color: rgba(255,255,255,.1); color: var(--pink); }
html[data-theme="original"] .channel small { color: #4a4d5e; }
html[data-theme="original"] .contact-form {
  background: rgba(24, 27, 39, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
html[data-theme="original"] .field input,
html[data-theme="original"] .field textarea {
  background: #0d0f17; color: #e8e6f0;
  border-color: rgba(255, 255, 255, 0.1); box-shadow: none;
}
html[data-theme="original"] .field input:focus,
html[data-theme="original"] .field textarea:focus { transform: none; box-shadow: 0 0 0 1px var(--pink); }
html[data-theme="original"] .form-note { color: #4a4d5e; }

/* footer / chat / toast */
html[data-theme="original"] footer { background: #07080c; border-top: 1px solid rgba(255,255,255,.07); }
html[data-theme="original"] .footer-meta { border-top-color: rgba(255,255,255,.08); color: #4a4d5e; }
html[data-theme="original"] .chat-panel { background: #161a26; }
html[data-theme="original"] .chat-head { background: #181b27; border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="original"] .chat-body { background: #0d0f17; }
html[data-theme="original"] .msg { box-shadow: none; }
html[data-theme="original"] .msg.bot { background: #181b27; color: #e8e6f0; }
html[data-theme="original"] .msg.user { background: var(--yellow); color: #fff; }
html[data-theme="original"] .chat-suggest { background: #161a26; border-top-color: rgba(255,255,255,.08); }
html[data-theme="original"] .chat-suggest button { background: rgba(232,35,42,.14); color: #ff9d9d; border-color: transparent; box-shadow: none; }
html[data-theme="original"] .chat-input-row { border-top-color: rgba(255,255,255,.08); }
html[data-theme="original"] .chat-input-row input { background: #0d0f17; color: #e8e6f0; }
html[data-theme="original"] .chat-input-row button { background: var(--yellow); border-left-color: rgba(255,255,255,.08); color: #fff; }
html[data-theme="original"] .toast { background: #161a26; color: #e8e6f0; border-color: rgba(232,35,42,.5); }

/* ------------------------------------------------------------
   TERMINAL — tiny signature: CRT scanlines
------------------------------------------------------------ */
html[data-theme="terminal"] body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}

/* ============================================================
   THEME: AURORA GLASS — frosted glassmorphism on a gradient
============================================================ */
html[data-theme="glass"] {
  --ink: #f5f3ff;
  --paper: #312e81;
  --white: rgba(255, 255, 255, 0.10);
  --yellow: #fbbf24;
  --pink: #f472b6;
  --teal: #34d399;
  --orange: #fb923c;
  --lav: #a78bfa;
  --lime: #a3e635;
  --red: #fb7185;
  --bw: 1px;
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-s: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-m: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-l: 0 20px 50px rgba(0, 0, 0, 0.4);
  --radius: 20px;
  --radius-s: 12px;
  --dots: linear-gradient(135deg, #312e81 0%, #6d28d9 45%, #0ea5e9 100%);
  --font-display: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}
html[data-theme="glass"] body { background-size: auto; background-attachment: fixed; }
html[data-theme="glass"] .card,
html[data-theme="glass"] .topbar,
html[data-theme="glass"] .chat-panel { backdrop-filter: blur(14px); }
html[data-theme="glass"] .topbar { background: rgba(30, 27, 75, 0.55); }
html[data-theme="glass"] .facts-card,
html[data-theme="glass"] .contact-form,
html[data-theme="glass"] .marquee,
html[data-theme="glass"] .marquee.marquee-pink,
html[data-theme="glass"] .skill-group header,
html[data-theme="glass"] .chat-head { background: rgba(255, 255, 255, 0.12); }
html[data-theme="glass"] .chip,
html[data-theme="glass"] .tags li,
html[data-theme="glass"] .sticker,
html[data-theme="glass"] .hero-eyebrow,
html[data-theme="glass"] .hero-sub .tick { background: rgba(255, 255, 255, 0.16); }
html[data-theme="glass"] .field input,
html[data-theme="glass"] .field textarea {
  background: rgba(0, 0, 0, 0.25); color: var(--ink);
  border-color: rgba(255, 255, 255, 0.25); box-shadow: none;
}
html[data-theme="glass"] .photo-frame { background: transparent; }
html[data-theme="glass"] .photo-frame::before { background: rgba(255, 255, 255, 0.18); }
html[data-theme="glass"] .photo-frame img { border-color: rgba(255, 255, 255, 0.35); }
html[data-theme="glass"] .chat-body { background: rgba(0, 0, 0, 0.2); }
html[data-theme="glass"] .msg.bot { background: rgba(255, 255, 255, 0.14); }
html[data-theme="glass"] .chat-input-row input { background: transparent; color: var(--ink); }
html[data-theme="glass"] .msg.user { background: #fbbf24; color: #1f2937; }
html[data-theme="glass"] .chat-suggest button { background: rgba(0, 0, 0, 0.25); box-shadow: none; }

/* ============================================================
   THEME: SYNTHWAVE — neon magenta/cyan on a purple grid
============================================================ */
html[data-theme="cyber"] {
  --ink: #eae6ff;
  --paper: #12041f;
  --white: #1b0b2e;
  --yellow: #ff2ea6;
  --pink: #00f0ff;
  --teal: #7cffcb;
  --orange: #ff9e00;
  --lav: #b967ff;
  --lime: #01cdfe;
  --red: #ff3864;
  --bw: 1px;
  --shadow-xs: 0 0 6px rgba(0, 240, 255, 0.4);
  --shadow-s: 0 0 10px rgba(0, 240, 255, 0.35);
  --shadow-m: 0 0 18px rgba(255, 46, 166, 0.35);
  --shadow-l: 0 0 30px rgba(0, 240, 255, 0.4);
  --radius: 8px;
  --radius-s: 4px;
  --dots: linear-gradient(rgba(255, 46, 166, 0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 240, 255, 0.12) 1px, transparent 1px);
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}
html[data-theme="cyber"] body { background-size: 42px 42px; }
html[data-theme="cyber"] .hl-pink, html[data-theme="cyber"] .hl-yellow,
html[data-theme="cyber"] .hl-teal, html[data-theme="cyber"] .hl-lav,
html[data-theme="cyber"] .hl-lime, html[data-theme="cyber"] .hl-orange {
  background: transparent; box-shadow: none; transform: none;
  color: #00f0ff; text-shadow: 0 0 12px rgba(0, 240, 255, 0.7);
}
/* contrast guards: bright neon slots get dark surfaces */
html[data-theme="cyber"] .skill-group header,
html[data-theme="cyber"] .marquee, html[data-theme="cyber"] .marquee.marquee-pink,
html[data-theme="cyber"] .chat-head, html[data-theme="cyber"] .theme-select,
html[data-theme="cyber"] .hero-eyebrow, html[data-theme="cyber"] .hero-sub .tick,
html[data-theme="cyber"] .sticker, html[data-theme="cyber"] .facts-card,
html[data-theme="cyber"] .contact-form { background: #1b0b2e; }
html[data-theme="cyber"] .skill-group header { color: #00f0ff; border-bottom-color: rgba(0,240,255,.3); }
html[data-theme="cyber"] .marquee-track span { color: #ff2ea6; text-shadow: 0 0 10px rgba(255,46,166,.6); }
html[data-theme="cyber"] .chat-head, html[data-theme="cyber"] .theme-select,
html[data-theme="cyber"] .hero-eyebrow, html[data-theme="cyber"] .sticker { color: #00f0ff; }
html[data-theme="cyber"] .btn-pink { background: transparent; color: #00f0ff; border-color: #00f0ff; }
html[data-theme="cyber"] .chip, html[data-theme="cyber"] .tags li,
html[data-theme="cyber"] .learning-card .chip { background: #12041f; color: #7cffcb; }
html[data-theme="cyber"] .field input, html[data-theme="cyber"] .field textarea {
  background: #12041f; color: var(--ink); box-shadow: none;
}
html[data-theme="cyber"] .xp-card .org { background: rgba(255, 46, 166, 0.15); color: #ff2ea6; border-color: transparent; box-shadow: none; }
html[data-theme="cyber"] .chat-body { background: #12041f; }
html[data-theme="cyber"] .msg.bot { background: #1b0b2e; }
html[data-theme="cyber"] .msg.user { background: #ff2ea6; color: #fff; }
html[data-theme="cyber"] .chat-input-row input { background: #12041f; color: var(--ink); }
html[data-theme="cyber"] .photo-frame::before { background: rgba(255, 46, 166, 0.4); }

/* ============================================================
   THEME: PASTEL POP — soft kawaii light, big soft corners
============================================================ */
html[data-theme="pastel"] {
  --ink: #3f3d56;
  --paper: #fdf6f0;
  --white: #ffffff;
  --yellow: #ffe08a;
  --pink: #ffb3c9;
  --teal: #9be3d0;
  --orange: #ffb38a;
  --lav: #cbb7ff;
  --lime: #d3f2a3;
  --red: #ff8fa3;
  --bw: 2px;
  --shadow-xs: 0 3px 8px rgba(63, 61, 86, 0.10);
  --shadow-s: 0 6px 16px rgba(63, 61, 86, 0.12);
  --shadow-m: 0 12px 28px rgba(63, 61, 86, 0.14);
  --shadow-l: 0 18px 44px rgba(63, 61, 86, 0.18);
  --radius: 24px;
  --radius-s: 14px;
  --dots: radial-gradient(rgba(63, 61, 86, 0.10) 1.2px, transparent 1.2px);
  --font-display: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
}
html[data-theme="pastel"] .stat b { color: var(--ink); }
html[data-theme="pastel"] .btn:hover,
html[data-theme="pastel"] .card:hover,
html[data-theme="pastel"] .project:hover { transform: translateY(-4px); }

/* ============================================================
   THEME: SWISS MINIMAL — white, black, one international blue
============================================================ */
html[data-theme="swiss"] {
  --ink: #111111;
  --paper: #ffffff;
  --white: #ffffff;
  --yellow: #111111;
  --pink: #2438ff;
  --teal: #2438ff;
  --orange: #111111;
  --lav: #e8e8e8;
  --lime: #e8e8e8;
  --red: #2438ff;
  --bw: 2px;
  --shadow-xs: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-s: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-m: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-l: 0 0 0 rgba(0, 0, 0, 0);
  --radius: 0px;
  --radius-s: 0px;
  --dots: none;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
}
/* black/blue slots need white text */
html[data-theme="swiss"] .hl-yellow, html[data-theme="swiss"] .hl-pink,
html[data-theme="swiss"] .hl-teal, html[data-theme="swiss"] .hl-orange { color: #ffffff; }
html[data-theme="swiss"] .marquee-track span,
html[data-theme="swiss"] .btn-yellow, html[data-theme="swiss"] .btn-teal,
html[data-theme="swiss"] .btn-pink, html[data-theme="swiss"] .chat-head,
html[data-theme="swiss"] .theme-select, html[data-theme="swiss"] .hero-eyebrow,
html[data-theme="swiss"] .msg.user, html[data-theme="swiss"] .logo-box,
html[data-theme="swiss"] .drawer-close, html[data-theme="swiss"] .chat-input-row button,
html[data-theme="swiss"] .service .icon, html[data-theme="swiss"] .project-num { color: #ffffff; }
html[data-theme="swiss"] .contact-form { background: #ffffff; }
html[data-theme="swiss"] .skill-group.g-yellow header,
html[data-theme="swiss"] .skill-group.g-pink header,
html[data-theme="swiss"] .skill-group.g-teal header { color: #ffffff; }
html[data-theme="swiss"] .project:nth-child(4) .project-num,
html[data-theme="swiss"] .skill-group.g-lav header { color: #111111; }
html[data-theme="swiss"] .footer-big .y,
html[data-theme="swiss"] .footer-big .p,
html[data-theme="swiss"] .footer-big .t { color: #6b7cff; }
html[data-theme="swiss"] .card:hover,
html[data-theme="swiss"] .btn:hover { transform: none; }

/* ============================================================
   PER-THEME SIGNATURE SWEEP
   Gives every theme its own body language: secondary borders,
   rule styles, rotation policy, hover motion, focus rings,
   selection color, and leftover colored-tag fixes.
   ============================================================ */

/* -- rule/border language ---------------------------------- */
html[data-theme="original"] { --bw-s: 1px; --line-dashed: 1px solid rgba(255,255,255,.08);  --line-dashed-paper: 1px solid rgba(255,255,255,.08); }
html[data-theme="terminal"] { --bw-s: 1px; --line-dashed: 1px dashed rgba(51,255,51,.35);    --line-dashed-paper: 1px dashed rgba(51,255,51,.35); }
html[data-theme="glass"]    { --bw-s: 1px; --line-dashed: 1px solid rgba(255,255,255,.18);   --line-dashed-paper: 1px solid rgba(255,255,255,.18); }
html[data-theme="cyber"]    { --bw-s: 1px; --line-dashed: 1px solid rgba(0,240,255,.25);     --line-dashed-paper: 1px solid rgba(0,240,255,.25); }
html[data-theme="pastel"]   { --bw-s: 2px; --line-dashed: 2px dashed rgba(63,61,86,.25);     --line-dashed-paper: 2px dashed rgba(63,61,86,.25); }
html[data-theme="swiss"]    { --bw-s: 1px; --line-dashed: 1px solid #111;                    --line-dashed-paper: 1px solid #fff; }

/* -- rotation policy: rigid themes kill all tilt ------------- */
html[data-theme="original"] :is(.section-label,.xp-col h3,.certs h3,.logo-box,.photo-frame,.featured-flag,.sticker-1,.sticker-2,.hl-pink,.hl-yellow,.hl-teal,.hl-lav,.hl-lime,.hl-orange),
html[data-theme="terminal"] :is(.section-label,.xp-col h3,.certs h3,.logo-box,.photo-frame,.featured-flag,.sticker-1,.sticker-2,.hl-pink,.hl-yellow,.hl-teal,.hl-lav,.hl-lime,.hl-orange),
html[data-theme="glass"]    :is(.section-label,.xp-col h3,.certs h3,.logo-box,.photo-frame,.featured-flag,.sticker-1,.sticker-2,.hl-pink,.hl-yellow,.hl-teal,.hl-lav,.hl-lime,.hl-orange),
html[data-theme="cyber"]    :is(.section-label,.xp-col h3,.certs h3,.logo-box,.photo-frame,.featured-flag,.sticker-1,.sticker-2,.hl-pink,.hl-yellow,.hl-teal,.hl-lav,.hl-lime,.hl-orange),
html[data-theme="swiss"]    :is(.section-label,.xp-col h3,.certs h3,.logo-box,.photo-frame,.featured-flag,.sticker-1,.sticker-2,.hl-pink,.hl-yellow,.hl-teal,.hl-lav,.hl-lime,.hl-orange) { transform: none; }

/* -- hover motion: rigid vs floaty --------------------------- */
html[data-theme="original"] :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover,
html[data-theme="terminal"] :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover,
html[data-theme="cyber"]    :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover,
html[data-theme="swiss"]    :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover { transform: none; }
html[data-theme="glass"]  :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover { transform: translateY(-4px); }
html[data-theme="pastel"] :is(.btn,.card,.stat,.cert,.service,.project,.channel,.socials a,.chat-toggle,.theme-select,.logo-box):hover { transform: translateY(-6px); }

/* -- focus rings --------------------------------------------- */
html[data-theme="terminal"] .field input:focus, html[data-theme="terminal"] .field textarea:focus { transform: none; box-shadow: 0 0 0 1px var(--pink); }
html[data-theme="cyber"]    .field input:focus, html[data-theme="cyber"]    .field textarea:focus { transform: none; box-shadow: 0 0 0 1px #00f0ff, 0 0 14px rgba(0,240,255,.5); }
html[data-theme="glass"]    .field input:focus, html[data-theme="glass"]    .field textarea:focus { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
html[data-theme="swiss"]    .field input:focus, html[data-theme="swiss"]    .field textarea:focus { transform: none; box-shadow: 0 0 0 1px #111; }
html[data-theme="pastel"]   .field input:focus, html[data-theme="pastel"]   .field textarea:focus { transform: none; box-shadow: var(--shadow-s); }

/* -- selection ----------------------------------------------- */
html[data-theme="terminal"] ::selection { background: var(--pink); color: #050805; }
html[data-theme="glass"]    ::selection { background: #f472b6; color: #fff; }
html[data-theme="cyber"]    ::selection { background: #ff2ea6; color: #fff; }
html[data-theme="pastel"]   ::selection { background: #ffb3c9; color: #3f3d56; }
html[data-theme="swiss"]    ::selection { background: #2438ff; color: #fff; }

/* -- leftover colored tags, per theme ------------------------- */
/* terminal */
html[data-theme="terminal"] .logo-box,
html[data-theme="terminal"] .xp-col h3,
html[data-theme="terminal"] .certs h3,
html[data-theme="terminal"] .project-num { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .org,
html[data-theme="terminal"] .edu-meta .score { background: var(--white); color: var(--pink); box-shadow: none; }
html[data-theme="terminal"] .nav-links a:not(.btn):hover { background: var(--white); color: var(--pink); }

/* glass */
html[data-theme="glass"] .learning-card .chip { background: rgba(255,255,255,.16); }
html[data-theme="glass"] .org,
html[data-theme="glass"] .edu-meta .score { background: rgba(0,0,0,.25); box-shadow: none; border-color: transparent; }
html[data-theme="glass"] .xp-col h3,
html[data-theme="glass"] .certs h3,
html[data-theme="glass"] .service .icon { background: rgba(255,255,255,.16); box-shadow: none; }
html[data-theme="glass"] .nav-links a:not(.btn):hover { background: rgba(255,255,255,.15); box-shadow: none; }

/* cyber */
html[data-theme="cyber"] .xp-col h3,
html[data-theme="cyber"] .certs h3 { background: #1b0b2e; color: #ff2ea6; border-color: rgba(255,46,166,.4); }
html[data-theme="cyber"] .org,
html[data-theme="cyber"] .edu-meta .score { background: rgba(255,46,166,.15); color: #ff2ea6; border-color: transparent; box-shadow: none; }
html[data-theme="cyber"] .project-num { background: #1b0b2e; color: #00f0ff; }
html[data-theme="cyber"] .nav-links a:not(.btn):hover { background: rgba(0,240,255,.12); color: #00f0ff; box-shadow: none; }

/* original */
html[data-theme="original"] .xp-col h3,
html[data-theme="original"] .certs h3 { background: rgba(232,35,42,.12); color: var(--pink); border-color: transparent; }

/* swiss */
html[data-theme="swiss"] .hero-sub .tick { color: #fff; }
html[data-theme="swiss"] .xp-col h3 { color: #111; }
html[data-theme="swiss"] .xp-col.edu h3,
html[data-theme="swiss"] .certs h3,
html[data-theme="swiss"] .org,
html[data-theme="swiss"] .edu-meta .score { color: #fff; }
html[data-theme="swiss"] .photo-frame { padding: 0; background: #fff; }
html[data-theme="swiss"] .photo-frame::before { display: none; }
html[data-theme="swiss"] .photo-frame img { border: var(--bw) solid #111; }

/* ============================================================
   THEME IDENTITY LAYER
   Structural signatures so each theme reads as a different
   design, not a recolor: layout shifts, textures, type tricks.
   ============================================================ */

/* -- AURORA GLASS: centered hero, aurora blobs, pill UI, gradient type -- */
html[data-theme="glass"] { --radius-s: 999px; --radius: 24px; }
html[data-theme="glass"] body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(244, 114, 182, 0.5), transparent 60%),
    radial-gradient(35% 30% at 80% 20%, rgba(52, 211, 153, 0.4), transparent 60%),
    radial-gradient(45% 40% at 70% 80%, rgba(14, 165, 233, 0.45), transparent 60%);
  filter: blur(50px);
}
html[data-theme="glass"] .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 44px; }
html[data-theme="glass"] .hero-copy { margin-inline: auto; }
html[data-theme="glass"] .hero-actions,
html[data-theme="glass"] .socials { justify-content: center; }
html[data-theme="glass"] .photo-frame { margin: 0 auto; max-width: 340px; }
html[data-theme="glass"] .section-title,
html[data-theme="glass"] .hero h1 {
  background: linear-gradient(90deg, #f472b6, #a78bfa, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="glass"] .hl-pink, html[data-theme="glass"] .hl-yellow,
html[data-theme="glass"] .hl-teal, html[data-theme="glass"] .hl-lav,
html[data-theme="glass"] .hl-lime, html[data-theme="glass"] .hl-orange { color: #fff; }

/* -- SYNTHWAVE: chromatic aberration type, skewed buttons, corner brackets, horizon -- */
html[data-theme="cyber"] .display,
html[data-theme="cyber"] .marquee-track span {
  text-shadow: 2px 0 rgba(255, 46, 166, 0.75), -2px 0 rgba(0, 240, 255, 0.75);
}
html[data-theme="cyber"] .btn, html[data-theme="cyber"] .chip { transform: skewX(-8deg); }
html[data-theme="cyber"] .btn:hover { transform: skewX(-8deg); }
html[data-theme="cyber"] .card { position: relative; }
html[data-theme="cyber"] .card::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 14px; height: 14px;
  border-top: 2px solid #00f0ff; border-right: 2px solid #00f0ff;
}
html[data-theme="cyber"] .card::before {
  content: ""; position: absolute; bottom: 7px; left: 7px; width: 14px; height: 14px;
  border-bottom: 2px solid #ff2ea6; border-left: 2px solid #ff2ea6;
}
html[data-theme="cyber"] .hero { position: relative; }
html[data-theme="cyber"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #00f0ff, transparent);
  box-shadow: 0 0 18px #00f0ff;
}

/* -- TERMINAL: prompt prefixes, bracket buttons, blinking cursor, dashed everything -- */
@keyframes term-blink { 50% { opacity: 0; } }
html[data-theme="terminal"] .section-label::before { content: "$ "; color: var(--pink); }
html[data-theme="terminal"] .nav-links a:not(.btn)::before { content: "./"; color: var(--pink); }
html[data-theme="terminal"] .btn::before { content: "[ "; color: var(--pink); }
html[data-theme="terminal"] .btn::after { content: " ]"; color: var(--pink); }
html[data-theme="terminal"] .hero h1::after {
  content: " ▮"; color: var(--pink); animation: term-blink 1s steps(1) infinite;
}
html[data-theme="terminal"] .card,
html[data-theme="terminal"] .photo-frame img { border-style: dashed; }
html[data-theme="terminal"] .photo-frame img { filter: grayscale(1) contrast(1.15); }

/* -- PASTEL POP: wobbly organic corners, dashed candy borders, scrapbook tilt -- */
html[data-theme="pastel"] .card { border-style: dashed; border-radius: 32px 44px 36px 48px; }
html[data-theme="pastel"] .btn, html[data-theme="pastel"] .chip,
html[data-theme="pastel"] .hero-eyebrow, html[data-theme="pastel"] .sticker { border-radius: 999px; }
html[data-theme="pastel"] .project:nth-child(odd) { transform: rotate(-1.2deg); }
html[data-theme="pastel"] .project:nth-child(even) { transform: rotate(1.2deg); }
html[data-theme="pastel"] .project:hover { transform: rotate(0deg) translateY(-6px); }
html[data-theme="pastel"] .section-title::after { content: " ✿"; color: var(--pink); }
html[data-theme="pastel"] .photo-frame { transform: rotate(-2deg); }

/* -- SWISS MINIMAL: poster scale, numbered sections, column grid, b/w photo -- */
html[data-theme="swiss"] body { counter-reset: sec; }
html[data-theme="swiss"] section { counter-increment: sec; }
html[data-theme="swiss"] .section-label {
  background: transparent; color: #111; box-shadow: none; border: none;
  padding: 0; transform: none; font-size: 1rem; letter-spacing: 0.2em;
}
html[data-theme="swiss"] .section-label::before { content: counter(sec, decimal-leading-zero) " / "; color: #2438ff; }
html[data-theme="swiss"] .section-title { font-size: clamp(3rem, 9vw, 7rem); letter-spacing: -0.02em; }
html[data-theme="swiss"] .hero h1 { font-size: clamp(4rem, 11vw, 9.5rem); }
html[data-theme="swiss"] .photo-frame img { filter: grayscale(1); }
html[data-theme="swiss"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(100% / 6 - 1px),
    rgba(17, 17, 17, 0.06) calc(100% / 6 - 1px), rgba(17, 17, 17, 0.06) calc(100% / 6));
}

/* -- a11y contrast guards: text on solid accent buttons ------------- */
html[data-theme="glass"] .btn-yellow, html[data-theme="glass"] .btn-pink,
html[data-theme="glass"] .btn-teal, html[data-theme="glass"] .btn-lav { color: #1f2937; }
html[data-theme="cyber"] .btn-yellow { color: #ffffff; }
html[data-theme="cyber"] .btn-teal { background: transparent; color: #7cffcb; border-color: #7cffcb; }
html[data-theme="terminal"] .btn-yellow,
html[data-theme="terminal"] .drawer-close,
html[data-theme="terminal"] .chat-input-row button { background: var(--white); color: var(--pink); }

/* -- a11y audit follow-ups (small text / icons on flagged slots) ---- */
html[data-theme="terminal"] .btn-pink { background: var(--white); color: var(--pink); }
html[data-theme="terminal"] .msg.user { background: var(--pink); color: #050805; }
html[data-theme="terminal"] .service .icon { background: var(--white); color: var(--pink); }
html[data-theme="cyber"] .service .icon { background: #1b0b2e; color: #00f0ff; }

/* -- skill depth badge contrast guards ------------------------------ */
html[data-theme="terminal"] .chip.d-prod::after, html[data-theme="terminal"] .chip.d-comf::after,
html[data-theme="terminal"] .chip.d-learn::after, html[data-theme="terminal"] .lg-key,
html[data-theme="cyber"] .chip.d-prod::after, html[data-theme="cyber"] .chip.d-comf::after,
html[data-theme="cyber"] .chip.d-learn::after, html[data-theme="cyber"] .lg-key,
html[data-theme="swiss"] .chip.d-prod::after, html[data-theme="swiss"] .chip.d-comf::after,
html[data-theme="swiss"] .chip.d-learn::after, html[data-theme="swiss"] .lg-key { color: var(--paper); }
html[data-theme="glass"] .chip.d-prod::after, html[data-theme="glass"] .chip.d-comf::after,
html[data-theme="glass"] .chip.d-learn::after, html[data-theme="glass"] .lg-key { color: #1f2937; }
html[data-theme="original"] .chip.d-prod::after, html[data-theme="original"] .k-prod { background: #c21d24; }

/* -- open-strip badge contrast guards (lime slot is light in glass/cyber) -- */
html[data-theme="glass"] .open-badge { color: #1f2937; }
html[data-theme="cyber"] .open-badge { color: var(--paper); }

/* ==================================================================
   THEME 8 — "HOLO 3D": high-motion dark UI, aurora-lit, 3D tilt cards
   ================================================================== */

/* -- layer 1: tokens ---------------------------------------------- */
html[data-theme="holo"] {
  --ink: #eef0ff;
  --paper: #07070f;
  --white: #15152a;
  --yellow: #fbbf24;
  --pink: #e879f9;
  --teal: #22d3ee;
  --orange: #fb923c;
  --lav: #8b5cf6;
  --lime: #34d399;
  --red: #f87171;
  --bw: 1px;
  --bw-s: 1px;
  --shadow-xs: 0 2px 10px rgba(139, 92, 246, 0.25);
  --shadow-s: 0 6px 24px rgba(34, 211, 238, 0.18);
  --shadow-m: 0 12px 40px rgba(139, 92, 246, 0.28);
  --shadow-l: 0 24px 70px rgba(232, 121, 249, 0.25);
  --radius: 20px;
  --radius-s: 12px;
  --dots: radial-gradient(rgba(139, 92, 246, 0.14) 1px, transparent 1.4px);
  --font-display: "Space Grotesk", "DM Sans", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --holo-grad: linear-gradient(120deg, #8b5cf6, #22d3ee 45%, #e879f9 80%);
}

/* -- layer 2: living aurora background (drifting light blobs) ------ */
html[data-theme="holo"] body {
  background-image:
    radial-gradient(620px 500px at 15% 18%, rgba(139, 92, 246, 0.30), transparent 70%),
    radial-gradient(560px 480px at 85% 26%, rgba(34, 211, 238, 0.20), transparent 70%),
    radial-gradient(720px 540px at 50% 96%, rgba(232, 121, 249, 0.18), transparent 70%),
    var(--dots);
  background-size: auto, auto, auto, 34px 34px;
  animation: holo-aurora 20s ease-in-out infinite alternate;
}
@keyframes holo-aurora {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 14% 10%, 86% 14%, 42% 86%, 0 0; }
}

/* -- layer 3: sweep — glass surfaces, gradient text ---------------- */
html[data-theme="holo"] .hl-pink, html[data-theme="holo"] .hl-yellow,
html[data-theme="holo"] .hl-teal, html[data-theme="holo"] .hl-lav,
html[data-theme="holo"] .hl-lime, html[data-theme="holo"] .hl-orange,
html[data-theme="holo"] .section-title, html[data-theme="holo"] .stat b {
  background: var(--holo-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  box-shadow: none; transform: none;
}
html[data-theme="holo"] .card, html[data-theme="holo"] .project,
html[data-theme="holo"] .facts-card, html[data-theme="holo"] .contact-form,
html[data-theme="holo"] .xp-card, html[data-theme="holo"] .service {
  background: rgba(21, 21, 42, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="holo"] .skill-group header,
html[data-theme="holo"] .marquee, html[data-theme="holo"] .marquee.marquee-pink,
html[data-theme="holo"] .chat-head, html[data-theme="holo"] .theme-select {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
html[data-theme="holo"] .g-yellow header { border-left: 4px solid var(--yellow); }
html[data-theme="holo"] .g-pink header   { border-left: 4px solid var(--pink); }
html[data-theme="holo"] .g-teal header   { border-left: 4px solid var(--teal); }
html[data-theme="holo"] .g-lav header    { border-left: 4px solid var(--lav); }
html[data-theme="holo"] .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
html[data-theme="holo"] .btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
}
html[data-theme="holo"] .project-num,
html[data-theme="holo"] .drawer-close,
html[data-theme="holo"] .case-close,
html[data-theme="holo"] .chat-input-row button {
  background: rgba(255, 255, 255, 0.1); color: var(--teal);
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="holo"] .case-close { color: #14101f; background: var(--yellow); }
html[data-theme="holo"] .service .icon { background: rgba(139, 92, 246, 0.25); color: var(--teal); }
html[data-theme="holo"] .msg.user { background: var(--holo-grad); color: #0b0b14; }
html[data-theme="holo"] .featured-flag { background: var(--holo-grad); color: #0b0b14; }
html[data-theme="holo"] .sticker, html[data-theme="holo"] .hero-eyebrow,
html[data-theme="holo"] .hero-sub .tick {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

/* -- layer 4: identity — 3D tilt, floaters, motion ----------------- */
html[data-theme="holo"] [data-tilt],
html[data-theme="holo"] .card, html[data-theme="holo"] .project {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
html[data-theme="holo"] [data-tilt]:hover {
  transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
  box-shadow: var(--shadow-m);
  z-index: 2;
}
html[data-theme="holo"] .hero-visual img {
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(139, 92, 246, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: holo-float 6s ease-in-out infinite;
}
html[data-theme="holo"] .sticker { animation: holo-float 5s ease-in-out infinite reverse; }
html[data-theme="holo"] .hero-eyebrow { animation: holo-glow 2.6s ease-in-out infinite; }
html[data-theme="holo"] .btn { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s; }
html[data-theme="holo"] .btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); }
html[data-theme="holo"] .marquee-track { animation-duration: 14s; }
html[data-theme="holo"] .chat-panel { transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s; }
html[data-theme="holo"] .reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1); }
@keyframes holo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.2deg); }
}
@keyframes holo-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
  50% { box-shadow: 0 0 24px rgba(139, 92, 246, 0.55); }
}

/* -- a11y: contrast guards (dark ink on the bright slots) ---------- */
html[data-theme="holo"] .btn-yellow, html[data-theme="holo"] .btn-pink,
html[data-theme="holo"] .btn-teal,
html[data-theme="holo"] .msg.user, html[data-theme="holo"] .featured-flag,
html[data-theme="holo"] .open-badge, html[data-theme="holo"] .xp-date,
html[data-theme="holo"] .org, html[data-theme="holo"] .score,
html[data-theme="holo"] .lg-key,
html[data-theme="holo"] .chip.d-prod::after, html[data-theme="holo"] .chip.d-comf::after,
html[data-theme="holo"] .chip.d-learn::after { color: #14101f; }
html[data-theme="holo"] .btn-yellow { background: var(--holo-grad); border-color: transparent; }
html[data-theme="holo"] .case-modal {
  background: #101022;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 90px rgba(139, 92, 246, 0.4);
}
html[data-theme="holo"] .case-overlay { background: rgba(4, 4, 10, 0.7); backdrop-filter: blur(4px); }

/* -- a11y: motion sensitivity -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="holo"] body,
  html[data-theme="holo"] .hero-visual img,
  html[data-theme="holo"] .sticker,
  html[data-theme="holo"] .hero-eyebrow { animation: none; }
  html[data-theme="holo"] [data-tilt]:hover { transform: translateY(-4px); }
}

/* -- HOLO layer 5: full motion-graphics UI -------------------------- */

/* 3D entrance for every revealed block */
html[data-theme="holo"] .reveal {
  opacity: 0;
  transform: perspective(1000px) rotateX(26deg) translateY(64px) scale(0.94);
  transition: transform 0.9s cubic-bezier(0.16, 0.8, 0.26, 1), opacity 0.7s ease;
}
html[data-theme="holo"] .reveal.in {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

/* pointer parallax: hero copy and portrait sit at different depths */
html[data-theme="holo"] .hero-copy {
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 9px), 0);
  transition: transform 0.25s ease-out;
}
html[data-theme="holo"] .hero-visual {
  transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -13px), 0);
  transition: transform 0.3s ease-out;
}

/* shimmer sweep across big display type */
html[data-theme="holo"] .display {
  background-image: linear-gradient(110deg, #eef0ff 38%, #22d3ee 48%, #e879f9 56%, #eef0ff 66%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: holo-shine 5.5s linear infinite;
}
@keyframes holo-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* glass nav bar */
html[data-theme="holo"] .topbar {
  background: rgba(7, 7, 15, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* rotating conic glow ring behind hero CTA + featured card + chat fab */
@property --holo-spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
html[data-theme="holo"] .btn-yellow, html[data-theme="holo"] .project.featured,
html[data-theme="holo"] .chat-toggle { position: relative; }
html[data-theme="holo"] .btn-yellow::after,
html[data-theme="holo"] .project.featured::after,
html[data-theme="holo"] .chat-toggle::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  background: conic-gradient(from var(--holo-spin), #8b5cf6, #22d3ee, #e879f9, #fbbf24, #8b5cf6);
  z-index: -1; filter: blur(8px); opacity: 0.85;
  animation: holo-spin 4s linear infinite;
}
@keyframes holo-spin { to { --holo-spin: 360deg; } }

/* ambient 3D shapes */
.holo-fx { display: none; }
html[data-theme="holo"] .holo-fx {
  display: block; position: fixed; inset: 0;
  pointer-events: none; z-index: 1; overflow: hidden;
}
.fx { position: absolute; opacity: 0.42; will-change: transform; }
.fx-a { top: 12%; left: 6%;  transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 20px), 0); }
.fx-b { top: 64%; left: 88%; transform: translate3d(calc(var(--mx, 0) * -34px), calc(var(--my, 0) * -26px), 0); }
.fx-c { top: 78%; left: 10%; transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 14px), 0); }
.fx-d { top: 22%; left: 82%; transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -16px), 0); }
.fx-e { top: 46%; left: 48%; transform: translate3d(calc(var(--mx, 0) * 40px), calc(var(--my, 0) * 30px), 0); }
.fx-cube { width: 92px; height: 92px; transform-style: preserve-3d; animation: fx-cube 18s linear infinite; }
.fx-cube-s { width: 54px; height: 54px; animation-duration: 12s; animation-direction: reverse; }
.fx-cube i {
  position: absolute; inset: 0;
  border: 1px solid rgba(34, 211, 238, 0.55);
  background: rgba(139, 92, 246, 0.10);
  box-shadow: inset 0 0 22px rgba(139, 92, 246, 0.28);
}
.fx-cube i:nth-child(1) { transform: rotateY(0deg) translateZ(46px); }
.fx-cube i:nth-child(2) { transform: rotateY(90deg) translateZ(46px); }
.fx-cube i:nth-child(3) { transform: rotateY(180deg) translateZ(46px); }
.fx-cube i:nth-child(4) { transform: rotateY(270deg) translateZ(46px); }
.fx-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(46px); }
.fx-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(46px); }
.fx-cube-s i:nth-child(1) { transform: rotateY(0deg) translateZ(27px); }
.fx-cube-s i:nth-child(2) { transform: rotateY(90deg) translateZ(27px); }
.fx-cube-s i:nth-child(3) { transform: rotateY(180deg) translateZ(27px); }
.fx-cube-s i:nth-child(4) { transform: rotateY(270deg) translateZ(27px); }
.fx-cube-s i:nth-child(5) { transform: rotateX(90deg) translateZ(27px); }
.fx-cube-s i:nth-child(6) { transform: rotateX(-90deg) translateZ(27px); }
@keyframes fx-cube {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(720deg); }
}
.fx-ring {
  width: 170px; height: 170px; border-radius: 50%;
  border: 2px solid rgba(232, 121, 249, 0.4);
  box-shadow: 0 0 26px rgba(232, 121, 249, 0.3), inset 0 0 26px rgba(34, 211, 238, 0.2);
  animation: fx-ring 11s linear infinite;
}
.fx-ring-s { width: 110px; height: 110px; animation-duration: 8s; animation-direction: reverse; }
@keyframes fx-ring {
  from { transform: rotateX(66deg) rotateZ(0deg); }
  to   { transform: rotateX(66deg) rotateZ(360deg); }
}
.fx-orb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e0faff, #22d3ee 55%, rgba(34, 211, 238, 0) 75%);
  box-shadow: 0 0 18px #22d3ee;
  animation: fx-orb 6.5s ease-in-out infinite;
}
@keyframes fx-orb {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
  50% { transform: translateY(-26px) scale(1.25); opacity: 0.55; }
}

/* case modal springs in with a 3D flip */
html[data-theme="holo"] .case-modal {
  transform: perspective(1000px) rotateX(16deg) translateY(30px) scale(0.9);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.3s;
}
html[data-theme="holo"] .case-overlay.open .case-modal {
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

/* stat numbers glow while counting */
html[data-theme="holo"] .stat b { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5)); }

/* motion sensitivity: collapse all of it */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="holo"] .reveal { opacity: 1; transform: none; transition: none; }
  html[data-theme="holo"] .display { animation: none; background: none; color: var(--ink); }
  html[data-theme="holo"] .fx-cube, html[data-theme="holo"] .fx-ring,
  html[data-theme="holo"] .fx-orb,
  html[data-theme="holo"] .btn-yellow::after,
  html[data-theme="holo"] .project.featured::after,
  html[data-theme="holo"] .chat-toggle::after { animation: none; }
  html[data-theme="holo"] .hero-copy, html[data-theme="holo"] .hero-visual,
  html[data-theme="holo"] .fx { transform: none !important; }
  html[data-theme="holo"] .case-modal { transform: none; }
}

/* -- HOLO layer 6: extraordinary ----------------------------------- */

/* scroll progress beam */
.holo-beam {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee, #e879f9);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.8);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; transition: opacity 0.3s;
  z-index: 400; pointer-events: none;
}

/* neon ripple on theme switch */
.holo-ripple {
  position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 26px #22d3ee, inset 0 0 14px rgba(232, 121, 249, 0.6);
  pointer-events: none; z-index: 500;
  animation: holo-ripple 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes holo-ripple { to { transform: scale(46); opacity: 0; } }

/* starfield canvas */
.holo-stars { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* cursor spotlight border on every tilt-able card */
html[data-theme="holo"] [data-tilt] { position: relative; }
html[data-theme="holo"] [data-tilt]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(240px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(34, 211, 238, 0.9), rgba(139, 92, 246, 0.4) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
html[data-theme="holo"] [data-tilt]:hover::before { opacity: 1; }

/* true 3D portrait: the whole visual rotates toward the pointer */
html[data-theme="holo"] .hero-grid { perspective: 1200px; }
html[data-theme="holo"] .hero-visual {
  transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -13px), 0)
             rotateX(var(--hvx, 0deg)) rotateY(var(--hvy, 0deg));
  transform-style: preserve-3d;
}

/* glowing nav underline */
html[data-theme="holo"] .nav-links a { position: relative; }
html[data-theme="holo"] .nav-links a::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #22d3ee, #e879f9);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
html[data-theme="holo"] .nav-links a:hover::after,
html[data-theme="holo"] .nav-links a.active::after { transform: scaleX(1); }

/* staggered pop-in of chips / tags / stats inside revealed blocks */
html[data-theme="holo"] .reveal.in .tags li,
html[data-theme="holo"] .reveal.in .chip,
html[data-theme="holo"] .reveal.in .stat {
  animation: holo-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(1) { animation-delay: 0.10s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(2) { animation-delay: 0.18s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(3) { animation-delay: 0.26s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(4) { animation-delay: 0.34s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(5) { animation-delay: 0.42s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(6) { animation-delay: 0.50s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(7) { animation-delay: 0.58s; }
html[data-theme="holo"] .reveal.in :is(.tags li, .chip, .stat):nth-child(8) { animation-delay: 0.66s; }
@keyframes holo-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* holographic sheen sweep across project art on hover */
html[data-theme="holo"] .project-media { position: relative; }
html[data-theme="holo"] .project-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, rgba(34, 211, 238, 0.18) 55%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.8s ease;
}
html[data-theme="holo"] .project:hover .project-media::after { transform: translateX(130%); }

/* collapse the extraordinary layer for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .holo-beam, .holo-ripple, .holo-stars { display: none; }
  html[data-theme="holo"] .reveal.in .tags li,
  html[data-theme="holo"] .reveal.in .chip,
  html[data-theme="holo"] .reveal.in .stat { animation: none; }
  html[data-theme="holo"] .project-media::after { display: none; }
  html[data-theme="holo"] .hero-visual { transform: none !important; }
}