/* ============================================================
   THEMES V6 - 20 Ultra-Creative Photography Themes
   ------------------------------------------------------------
   Category 1: Avatar Frame Creative Themes  (10 themes)
   Category 2: Full-Screen Immersive Effects  (10 themes)
   Each theme: 1 font block + 3 color variants (15 vars each)
   ============================================================ */

/* ---------- BATCHED GOOGLE FONTS IMPORTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;800&family=Orbitron:wght@400;700;900&family=Anton&family=DM+Serif+Display&family=Cormorant+Garamond:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700;800&family=Caveat:wght@400;600;700&family=Major+Mono+Display&family=Audiowide&family=Raleway:wght@300;400;500;600&family=Quicksand:wght@300;400;500;600&family=Crimson+Text:wght@400;600;700&family=Khand:wght@300;400;500;600&family=Cinzel:wght@400;500;600&family=Lora:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&family=Bebas+Neue&family=Noto+Serif+JP:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');


/* ============================================================
   CATEGORY 1: AVATAR FRAME CREATIVE THEMES (10)
   ============================================================ */


/* ============================================================
   2. HOLOGRAM (全息投影)
   ============================================================ */
[data-theme="hologram"] {
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s ease;
}
[data-theme="hologram"][data-color="cyan"] {
  --bg: #050810;
  --bg-2: #0a1018;
  --bg-3: #0f1828;
  --bg-4: #16243a;
  --text: #cdf5ff;
  --text-dim: #5a7e8e;
  --text-mid: #8fb8c8;
  --accent: #00ffff;
  --accent-glow: rgba(0, 255, 255, 0.35);
  --white: #eafdff;
  --border: rgba(0, 255, 255, 0.2);
  --hero-overlay-start: rgba(3, 5, 10, 0.55);
  --hero-overlay-mid: rgba(3, 5, 10, 0.75);
  --hero-overlay-end: rgba(2, 3, 6, 0.92);
  --nav-scrolled-bg: rgba(5, 8, 16, 0.92);
}
[data-theme="hologram"][data-color="magenta"] {
  --bg: #0a0510;
  --bg-2: #120818;
  --bg-3: #1c0e28;
  --bg-4: #2a1438;
  --text: #ffd6f7;
  --text-dim: #8e5a7e;
  --text-mid: #c08fb8;
  --accent: #ff00ff;
  --accent-glow: rgba(255, 0, 255, 0.35);
  --white: #ffeafd;
  --border: rgba(255, 0, 255, 0.2);
  --hero-overlay-start: rgba(6, 3, 10, 0.55);
  --hero-overlay-mid: rgba(6, 3, 10, 0.75);
  --hero-overlay-end: rgba(3, 2, 6, 0.92);
  --nav-scrolled-bg: rgba(10, 5, 16, 0.92);
}
[data-theme="hologram"][data-color="matrix"] {
  --bg: #04100a;
  --bg-2: #081810;
  --bg-3: #0c2418;
  --bg-4: #143020;
  --text: #c8ffd6;
  --text-dim: #5a8e6e;
  --text-mid: #8fc8a0;
  --accent: #00ff41;
  --accent-glow: rgba(0, 255, 65, 0.35);
  --white: #eaffef;
  --border: rgba(0, 255, 65, 0.2);
  --hero-overlay-start: rgba(3, 8, 5, 0.55);
  --hero-overlay-mid: rgba(3, 8, 5, 0.75);
  --hero-overlay-end: rgba(2, 5, 3, 0.92);
  --nav-scrolled-bg: rgba(4, 16, 10, 0.92);
}
[data-theme="hologram"] .about-img-wrapper {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 18px var(--accent-glow), inset 0 0 30px var(--accent-glow);
  transition: transform var(--transition);
}
[data-theme="hologram"] .about-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.35) 3px, transparent 4px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: holoScan 6s linear infinite;
}
[data-theme="hologram"] .about-img-wrapper:hover {
  transform: translateX(2px);
  text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
}
[data-theme="hologram"] .about-img-wrapper img:hover {
  filter: hue-rotate(40deg) contrast(1.1);
}
@keyframes holoScan {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}
body[data-holo-scan="1"] [data-theme="hologram"] .about-img-wrapper::before { animation: holoScan 1.5s linear infinite; }
body[data-holo-glitch="1"] [data-theme="hologram"] .about-img-wrapper {
  animation: holoGlitch 0.4s steps(2) infinite;
}
@keyframes holoGlitch {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
  100% { transform: translate(0); }
}
body[data-holo-flicker="1"] [data-theme="hologram"] .about-img-wrapper {
  animation: holoFlicker 3s linear infinite;
}
@keyframes holoFlicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.4; }
  6% { opacity: 1; }
  47% { opacity: 1; }
  49% { opacity: 0.6; }
  51% { opacity: 1; }
}


/* ============================================================
   3. SHATTER (碎裂镜像)
   ============================================================ */
[data-theme="shatter"] {
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s ease;
}
[data-theme="shatter"][data-color="ice"] {
  --bg: #0a1018;
  --bg-2: #101a26;
  --bg-3: #16242f;
  --bg-4: #1e3140;
  --text: #e6f4fb;
  --text-dim: #6e8a9a;
  --text-mid: #9ab4c0;
  --accent: #a8d8ea;
  --accent-glow: rgba(168, 216, 234, 0.35);
  --white: #f2faff;
  --border: rgba(168, 216, 234, 0.2);
  --hero-overlay-start: rgba(6, 12, 18, 0.55);
  --hero-overlay-mid: rgba(6, 12, 18, 0.75);
  --hero-overlay-end: rgba(3, 7, 11, 0.92);
  --nav-scrolled-bg: rgba(10, 16, 24, 0.92);
}
[data-theme="shatter"][data-color="crystal"] {
  --bg: #0c0c0e;
  --bg-2: #141416;
  --bg-3: #1c1c20;
  --bg-4: #26262c;
  --text: #f0f0f0;
  --text-dim: #848488;
  --text-mid: #b0b0b4;
  --accent: #e8e8e8;
  --accent-glow: rgba(232, 232, 232, 0.35);
  --white: #fafafa;
  --border: rgba(232, 232, 232, 0.2);
  --hero-overlay-start: rgba(8, 8, 10, 0.55);
  --hero-overlay-mid: rgba(8, 8, 10, 0.75);
  --hero-overlay-end: rgba(5, 5, 6, 0.92);
  --nav-scrolled-bg: rgba(12, 12, 14, 0.92);
}
[data-theme="shatter"][data-color="obsidian"] {
  --bg: #08080f;
  --bg-2: #0e0e18;
  --bg-3: #14142a;
  --bg-4: #1a1a36;
  --text: #d8d8f0;
  --text-dim: #5a5a7e;
  --text-mid: #8a8aae;
  --accent: #1a1a2e;
  --accent-glow: rgba(120, 120, 200, 0.35);
  --white: #e8e8ff;
  --border: rgba(120, 120, 200, 0.2);
  --hero-overlay-start: rgba(4, 4, 10, 0.55);
  --hero-overlay-mid: rgba(4, 4, 10, 0.75);
  --hero-overlay-end: rgba(2, 2, 6, 0.92);
  --nav-scrolled-bg: rgba(8, 8, 15, 0.92);
}
[data-theme="shatter"] .about-img-wrapper {
  clip-path: polygon(0 8%, 22% 0, 48% 6%, 78% 0, 100% 12%, 96% 40%, 100% 70%, 88% 100%, 54% 94%, 20% 100%, 4% 82%, 8% 50%);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  transition: clip-path 0.6s ease, transform var(--transition);
}
[data-theme="shatter"] .about-img-wrapper::before,
[data-theme="shatter"] .about-img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 45%, var(--accent) 46%, transparent 47%),
              linear-gradient(65deg, transparent 60%, var(--accent) 61%, transparent 62%),
              linear-gradient(155deg, transparent 30%, var(--accent) 31%, transparent 32%);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}
[data-theme="shatter"] .about-img-wrapper:hover {
  clip-path: polygon(0 14%, 18% 0, 52% 10%, 82% 0, 100% 18%, 92% 44%, 100% 66%, 80% 100%, 48% 88%, 16% 100%, 0 76%, 10% 46%);
  transform: scale(1.02);
}
body[data-shatter-cracks="1"] [data-theme="shatter"] .about-img-wrapper::before { opacity: 0.9; }
body[data-shatter-explode="1"] [data-theme="shatter"] .about-img-wrapper:hover {
  clip-path: polygon(0 20%, 30% 0, 60% 15%, 90% 0, 100% 30%, 70% 50%, 100% 80%, 60% 100%, 30% 80%, 0 100%, 20% 60%, 0 35%);
  animation: shatterExplode 0.8s ease;
}
@keyframes shatterExplode {
  0% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1); }
}
body[data-shatter-reflect="1"] [data-theme="shatter"] .about-img-wrapper {
  box-shadow: 0 0 24px var(--accent-glow);
}


/* ============================================================
   4. ORIGAMI (折纸工艺)
   ============================================================ */
[data-theme="origami"] {
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="origami"][data-color="paper"] {
  --bg: #f5f0e8;
  --bg-2: #efe9df;
  --bg-3: #e8e1d4;
  --bg-4: #ddd4c3;
  --text: #2c1810;
  --text-dim: #7a6a5a;
  --text-mid: #54483a;
  --accent: #c97b3f;
  --accent-glow: rgba(201, 123, 63, 0.35);
  --white: #fbf8f2;
  --border: rgba(44, 24, 16, 0.16);
  --hero-overlay-start: rgba(245, 240, 232, 0.55);
  --hero-overlay-mid: rgba(245, 240, 232, 0.75);
  --hero-overlay-end: rgba(232, 225, 212, 0.92);
  --nav-scrolled-bg: rgba(245, 240, 232, 0.92);
}
[data-theme="origami"][data-color="washi"] {
  --bg: #f3ecdf;
  --bg-2: #ece3d2;
  --bg-3: #e2d6c0;
  --bg-4: #d6c7aa;
  --text: #3a2818;
  --text-dim: #8a7860;
  --text-mid: #605040;
  --accent: #b8862e;
  --accent-glow: rgba(184, 134, 46, 0.35);
  --white: #faf5ea;
  --border: rgba(58, 40, 24, 0.16);
  --hero-overlay-start: rgba(243, 236, 223, 0.55);
  --hero-overlay-mid: rgba(243, 236, 223, 0.75);
  --hero-overlay-end: rgba(226, 214, 192, 0.92);
  --nav-scrolled-bg: rgba(243, 236, 223, 0.92);
}
[data-theme="origami"][data-color="ink"] {
  --bg: #f7f2ea;
  --bg-2: #f0eae0;
  --bg-3: #e8e0d2;
  --bg-4: #ddd2bf;
  --text: #1a1008;
  --text-dim: #6e5e4e;
  --text-mid: #4a3e30;
  --accent: #2c1810;
  --accent-glow: rgba(44, 24, 16, 0.35);
  --white: #fcf9f3;
  --border: rgba(26, 16, 8, 0.18);
  --hero-overlay-start: rgba(247, 242, 234, 0.55);
  --hero-overlay-mid: rgba(247, 242, 234, 0.75);
  --hero-overlay-end: rgba(232, 224, 210, 0.92);
  --nav-scrolled-bg: rgba(247, 242, 234, 0.92);
}
[data-theme="origami"] .about-img-wrapper {
  transform: perspective(1000px) rotateY(-8deg) rotateX(4deg);
  background-image: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  box-shadow: 6px 8px 0 var(--bg-4), 12px 16px 30px rgba(0,0,0,0.18);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: transform var(--transition);
}
[data-theme="origami"] .about-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, transparent 48%, rgba(0,0,0,0.08) 49%, rgba(255,255,255,0.4) 50%, transparent 51%),
              linear-gradient(75deg, transparent 0%, transparent 60%, rgba(0,0,0,0.06) 61%, transparent 62%);
  pointer-events: none;
}
[data-theme="origami"] .about-img-wrapper:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
body[data-origami-fold="1"] [data-theme="origami"] .about-img-wrapper {
  transform: perspective(1200px) rotateY(-20deg);
  box-shadow: -10px 6px 0 var(--bg-4), -18px 12px 30px rgba(0,0,0,0.2);
}
body[data-origami-unfold="1"] [data-theme="origami"] .about-img-wrapper:hover {
  transform: perspective(1200px) rotateY(15deg) rotateX(-5deg) scale(1.05);
}
body[data-origami-shadow="1"] [data-theme="origami"] .about-img-wrapper {
  box-shadow: 8px 10px 0 var(--accent-glow), 16px 20px 40px rgba(0,0,0,0.25);
}


/* ============================================================
   5. PRISM (棱镜光谱)
   ============================================================ */
[data-theme="prism"] {
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="prism"][data-color="spectrum"] {
  --bg: #0c0610;
  --bg-2: #14091a;
  --bg-3: #1c0e28;
  --bg-4: #261436;
  --text: #fde6f0;
  --text-dim: #8e6a7e;
  --text-mid: #c08fb0;
  --accent: #ff006e;
  --accent-glow: rgba(255, 0, 110, 0.35);
  --white: #fff0f6;
  --border: rgba(255, 0, 110, 0.22);
  --hero-overlay-start: rgba(8, 4, 10, 0.55);
  --hero-overlay-mid: rgba(8, 4, 10, 0.75);
  --hero-overlay-end: rgba(4, 2, 6, 0.92);
  --nav-scrolled-bg: rgba(12, 6, 16, 0.92);
}
[data-theme="prism"][data-color="rainbow"] {
  --bg: #04101a;
  --bg-2: #081826;
  --bg-3: #0c2034;
  --bg-4: #122a44;
  --text: #def6ff;
  --text-dim: #5e8a9e;
  --text-mid: #90c0d4;
  --accent: #00ffff;
  --accent-glow: rgba(0, 255, 255, 0.35);
  --white: #eafcff;
  --border: rgba(0, 255, 255, 0.22);
  --hero-overlay-start: rgba(3, 8, 12, 0.55);
  --hero-overlay-mid: rgba(3, 8, 12, 0.75);
  --hero-overlay-end: rgba(2, 5, 7, 0.92);
  --nav-scrolled-bg: rgba(4, 16, 26, 0.92);
}
[data-theme="prism"][data-color="iridescent"] {
  --bg: #0a0518;
  --bg-2: #10082a;
  --bg-3: #180c38;
  --bg-4: #22124a;
  --text: #e8defc;
  --text-dim: #6e5a9e;
  --text-mid: #a48fd0;
  --accent: #8b00ff;
  --accent-glow: rgba(139, 0, 255, 0.35);
  --white: #f4ecff;
  --border: rgba(139, 0, 255, 0.22);
  --hero-overlay-start: rgba(6, 3, 12, 0.55);
  --hero-overlay-mid: rgba(6, 3, 12, 0.75);
  --hero-overlay-end: rgba(3, 2, 7, 0.92);
  --nav-scrolled-bg: rgba(10, 5, 24, 0.92);
}
[data-theme="prism"] .about-img-wrapper {
  border: 4px solid;
  border-image: conic-gradient(from 0deg, #ff006e, #ff8c00, #ffce00, #39ff14, #00ffff, #4d4dff, #8b00ff, #ff006e) 1;
  border-radius: 4px;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 18px var(--accent-glow),
              -8px 0 18px rgba(255, 0, 110, 0.25),
              8px 0 18px rgba(0, 255, 255, 0.25);
  transition: transform var(--transition);
}
[data-theme="prism"] .about-img-wrapper:hover {
  filter: hue-rotate(60deg);
}
[data-theme="prism"] .about-img-wrapper img {
  transition: filter var(--transition);
}
body[data-prism-refract="1"] [data-theme="prism"] .about-img-wrapper {
  box-shadow: 0 0 24px var(--accent-glow),
              -10px 0 24px rgba(255, 0, 110, 0.3),
              10px 0 24px rgba(0, 255, 255, 0.3),
              0 10px 24px rgba(139, 0, 255, 0.3);
}
body[data-prism-rotate="1"] [data-theme="prism"] .about-img-wrapper {
  animation: prismHue 6s linear infinite;
}
@keyframes prismHue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
body[data-prism-glow="1"] [data-theme="prism"] .about-img-wrapper {
  animation: prismGlow 3s ease-in-out infinite;
}
@keyframes prismGlow {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
  50% { box-shadow: 0 0 36px var(--accent-glow), 0 0 60px var(--accent-glow); }
}


/* ============================================================
   6. MAGNETIC (磁场引力)
   ============================================================ */
[data-theme="magnetic"] {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s ease;
}
[data-theme="magnetic"][data-color="iron"] {
  --bg: #0e0e10;
  --bg-2: #161618;
  --bg-3: #1e1e22;
  --bg-4: #28282e;
  --text: #e0e0e0;
  --text-dim: #78787e;
  --text-mid: #a4a4aa;
  --accent: #4a4a4a;
  --accent-glow: rgba(74, 74, 74, 0.4);
  --white: #f0f0f0;
  --border: rgba(120, 120, 120, 0.2);
  --hero-overlay-start: rgba(8, 8, 10, 0.55);
  --hero-overlay-mid: rgba(8, 8, 10, 0.75);
  --hero-overlay-end: rgba(5, 5, 6, 0.92);
  --nav-scrolled-bg: rgba(14, 14, 16, 0.92);
}
[data-theme="magnetic"][data-color="magnet"] {
  --bg: #100404;
  --bg-2: #180808;
  --bg-3: #220c0c;
  --bg-4: #2e1414;
  --text: #f0d8d8;
  --text-dim: #8e5a5a;
  --text-mid: #c08a8a;
  --accent: #cc0000;
  --accent-glow: rgba(204, 0, 0, 0.35);
  --white: #fce8e8;
  --border: rgba(204, 0, 0, 0.22);
  --hero-overlay-start: rgba(8, 3, 3, 0.55);
  --hero-overlay-mid: rgba(8, 3, 3, 0.75);
  --hero-overlay-end: rgba(4, 2, 2, 0.92);
  --nav-scrolled-bg: rgba(16, 4, 4, 0.92);
}
[data-theme="magnetic"][data-color="lodestone"] {
  --bg: #0a0a0c;
  --bg-2: #121214;
  --bg-3: #1a1a1e;
  --bg-4: #242428;
  --text: #d8d8d8;
  --text-dim: #6e6e74;
  --text-mid: #9a9aa0;
  --accent: #2c2c2c;
  --accent-glow: rgba(120, 120, 140, 0.35);
  --white: #e8e8e8;
  --border: rgba(140, 140, 160, 0.2);
  --hero-overlay-start: rgba(6, 6, 8, 0.55);
  --hero-overlay-mid: rgba(6, 6, 8, 0.75);
  --hero-overlay-end: rgba(3, 3, 5, 0.92);
  --nav-scrolled-bg: rgba(10, 10, 12, 0.92);
}
[data-theme="magnetic"] .about-img-wrapper {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--bg-3), var(--bg-2) 60%, var(--bg));
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition);
}
[data-theme="magnetic"] .about-img-wrapper::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 8px, var(--accent-glow) 9px, transparent 10px),
              repeating-linear-gradient(90deg, transparent 0, transparent 8px, var(--accent-glow) 9px, transparent 10px);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  animation: magField 8s linear infinite;
}
@keyframes magField {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
[data-theme="magnetic"] .about-img-wrapper:hover {
  transform: scale(1.03);
}
body[data-mag-field="1"] [data-theme="magnetic"] .about-img-wrapper::before { opacity: 0.9; animation: magField 4s linear infinite; }
body[data-mag-pulse="1"] [data-theme="magnetic"] .about-img-wrapper {
  animation: magPulse 2.5s ease-in-out infinite;
}
@keyframes magPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 30px 8px var(--accent-glow); }
}
body[data-mag-attract="1"] [data-theme="magnetic"] .about-img-wrapper:hover {
  transform: scale(1.1);
  box-shadow: 0 0 40px var(--accent-glow);
}


/* ============================================================
   7. TYPOGRAPHY (文字像素)
   ============================================================ */
[data-theme="typography"] {
  --font-display: 'JetBrains Mono', monospace;
  --font-body: 'JetBrains Mono', monospace;
  --transition: 0.4s ease;
}
[data-theme="typography"][data-color="ink"] {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --bg-4: #242424;
  --text: #e0e0e0;
  --text-dim: #707070;
  --text-mid: #a0a0a0;
  --accent: #1a1a1a;
  --accent-glow: rgba(180, 180, 180, 0.35);
  --white: #f0f0f0;
  --border: rgba(160, 160, 160, 0.2);
  --hero-overlay-start: rgba(6, 6, 6, 0.55);
  --hero-overlay-mid: rgba(6, 6, 6, 0.75);
  --hero-overlay-end: rgba(3, 3, 3, 0.92);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}
[data-theme="typography"][data-color="terminal"] {
  --bg: #04100a;
  --bg-2: #081810;
  --bg-3: #0c2418;
  --bg-4: #143020;
  --text: #c8ffd6;
  --text-dim: #5a8e6e;
  --text-mid: #8fc8a0;
  --accent: #00ff41;
  --accent-glow: rgba(0, 255, 65, 0.35);
  --white: #eaffef;
  --border: rgba(0, 255, 65, 0.22);
  --hero-overlay-start: rgba(3, 8, 5, 0.55);
  --hero-overlay-mid: rgba(3, 8, 5, 0.75);
  --hero-overlay-end: rgba(2, 5, 3, 0.92);
  --nav-scrolled-bg: rgba(4, 16, 10, 0.92);
}
[data-theme="typography"][data-color="led"] {
  --bg: #0c0604;
  --bg-2: #140a06;
  --bg-3: #1c0e08;
  --bg-4: #28160c;
  --text: #ffd8c8;
  --text-dim: #8e6e5a;
  --text-mid: #c09880;
  --accent: #ff6b00;
  --accent-glow: rgba(255, 107, 0, 0.35);
  --white: #ffece0;
  --border: rgba(255, 107, 0, 0.22);
  --hero-overlay-start: rgba(6, 3, 2, 0.55);
  --hero-overlay-mid: rgba(6, 3, 2, 0.75);
  --hero-overlay-end: rgba(3, 2, 1, 0.92);
  --nav-scrolled-bg: rgba(12, 6, 4, 0.92);
}
[data-theme="typography"] .about-img-wrapper {
  border: 2px solid var(--accent);
  border-radius: 4px;
  background-color: var(--bg-3);
  background-image: repeating-linear-gradient(0deg, var(--accent-glow) 0, var(--accent-glow) 1px, transparent 1px, transparent 14px),
                    repeating-linear-gradient(90deg, var(--accent-glow) 0, var(--accent-glow) 1px, transparent 1px, transparent 9px);
  overflow: hidden;
  position: relative;
  font-family: var(--font-display);
  transition: transform var(--transition);
}
[data-theme="typography"] .about-img-wrapper::before {
  content: '01010111 01001000 01001001 01000011 01001000 01001111 01010100 01001111';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  word-break: break-all;
  padding: 8px;
  background: rgba(0,0,0,0.45);
  opacity: 0.6;
  pointer-events: none;
}
[data-theme="typography"] .about-img-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px var(--accent-glow);
}
body[data-typo-matrix="1"] [data-theme="typography"] .about-img-wrapper::before {
  animation: typoMatrix 4s linear infinite;
}
@keyframes typoMatrix {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}
body[data-typo-scramble="1"] [data-theme="typography"] .about-img-wrapper::before {
  animation: typoScramble 0.5s steps(2) infinite;
}
@keyframes typoScramble {
  0% { content: '01010111 01001000 01001001'; }
  50% { content: '10110010 01101011 10010110'; }
  100% { content: '00111101 11001010 01100110'; }
}
body[data-typo-glow="1"] [data-theme="typography"] .about-img-wrapper {
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 30px var(--accent-glow);
}


/* ============================================================
   8. POLAROID3D (3D拍立得)
   ============================================================ */
[data-theme="polaroid3d"] {
  --font-display: 'Caveat', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="polaroid3d"][data-color="classic"] {
  --bg: #e8e8ec;
  --bg-2: #dedee4;
  --bg-3: #d4d4dc;
  --bg-4: #c6c6d0;
  --text: #2d3436;
  --text-dim: #6a7478;
  --text-mid: #4a5458;
  --accent: #2d3436;
  --accent-glow: rgba(45, 52, 54, 0.3);
  --white: #fcfcfe;
  --border: rgba(45, 52, 54, 0.16);
  --hero-overlay-start: rgba(232, 232, 236, 0.55);
  --hero-overlay-mid: rgba(232, 232, 236, 0.75);
  --hero-overlay-end: rgba(212, 212, 220, 0.92);
  --nav-scrolled-bg: rgba(232, 232, 236, 0.92);
}
[data-theme="polaroid3d"][data-color="vintage"] {
  --bg: #f3e8e4;
  --bg-2: #ecded8;
  --bg-3: #e0cec6;
  --bg-4: #d2bcb0;
  --text: #3a241c;
  --text-dim: #8a6a5e;
  --text-mid: #604840;
  --accent: #e17055;
  --accent-glow: rgba(225, 112, 85, 0.32);
  --white: #fbf2ee;
  --border: rgba(58, 36, 28, 0.16);
  --hero-overlay-start: rgba(243, 232, 228, 0.55);
  --hero-overlay-mid: rgba(243, 232, 228, 0.75);
  --hero-overlay-end: rgba(224, 206, 198, 0.92);
  --nav-scrolled-bg: rgba(243, 232, 228, 0.92);
}
[data-theme="polaroid3d"][data-color="nostalgia"] {
  --bg: #f7eed8;
  --bg-2: #f0e4c8;
  --bg-3: #e6d6ae;
  --bg-4: #d8c48e;
  --text: #3a3010;
  --text-dim: #8a7e4a;
  --text-mid: #605430;
  --accent: #fdcb6e;
  --accent-glow: rgba(253, 203, 110, 0.35);
  --white: #fdf6e2;
  --border: rgba(58, 48, 16, 0.16);
  --hero-overlay-start: rgba(247, 238, 216, 0.55);
  --hero-overlay-mid: rgba(247, 238, 216, 0.75);
  --hero-overlay-end: rgba(230, 214, 174, 0.92);
  --nav-scrolled-bg: rgba(247, 238, 216, 0.92);
}
[data-theme="polaroid3d"] .about-img-wrapper {
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  background: var(--white);
  padding: 12px 12px 48px;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition);
}
[data-theme="polaroid3d"] .about-img-wrapper::after {
  content: 'me & my camera';
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-mid);
}
[data-theme="polaroid3d"] .about-img-wrapper:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.04);
}
body[data-pola3d-float="1"] [data-theme="polaroid3d"] .about-img-wrapper {
  animation: polaFloat 4s ease-in-out infinite;
}
@keyframes polaFloat {
  0%, 100% { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(0); }
  50% { transform: perspective(1000px) rotateY(-3deg) rotateX(3deg) translateY(-12px); }
}
body[data-pola3d-tilt="1"] [data-theme="polaroid3d"] .about-img-wrapper {
  animation: polaTilt 6s ease-in-out infinite;
}
@keyframes polaTilt {
  0%, 100% { transform: perspective(1000px) rotateY(-8deg) rotateX(4deg); }
  50% { transform: perspective(1000px) rotateY(8deg) rotateX(-4deg); }
}
body[data-pola3d-shadow="1"] [data-theme="polaroid3d"] .about-img-wrapper {
  box-shadow: 0 18px 40px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.2);
}


/* ============================================================
   9. KALEIDOSCOPE (万花筒)
   ============================================================ */
[data-theme="kaleidoscope"] {
  --font-display: 'Major Mono Display', monospace;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="kaleidoscope"][data-color="jewel"] {
  --bg: #0c0410;
  --bg-2: #14081a;
  --bg-3: #1c0e28;
  --bg-4: #261436;
  --text: #ffe0ec;
  --text-dim: #8e5a72;
  --text-mid: #c08aa0;
  --accent: #ff006e;
  --accent-glow: rgba(255, 0, 110, 0.35);
  --white: #fff0f6;
  --border: rgba(255, 0, 110, 0.22);
  --hero-overlay-start: rgba(8, 3, 10, 0.55);
  --hero-overlay-mid: rgba(8, 3, 10, 0.75);
  --hero-overlay-end: rgba(4, 2, 6, 0.92);
  --nav-scrolled-bg: rgba(12, 4, 16, 0.92);
}
[data-theme="kaleidoscope"][data-color="gemstone"] {
  --bg: #04101a;
  --bg-2: #081826;
  --bg-3: #0c2034;
  --bg-4: #122a44;
  --text: #d6f7fb;
  --text-dim: #5a7e8e;
  --text-mid: #8ab4be;
  --accent: #00ced1;
  --accent-glow: rgba(0, 206, 209, 0.35);
  --white: #e6fbfd;
  --border: rgba(0, 206, 209, 0.22);
  --hero-overlay-start: rgba(3, 8, 12, 0.55);
  --hero-overlay-mid: rgba(3, 8, 12, 0.75);
  --hero-overlay-end: rgba(2, 5, 7, 0.92);
  --nav-scrolled-bg: rgba(4, 16, 26, 0.92);
}
[data-theme="kaleidoscope"][data-color="opal"] {
  --bg: #0c0a04;
  --bg-2: #141008;
  --bg-3: #1c180e;
  --bg-4: #262016;
  --text: #fff3d6;
  --text-dim: #8e7e5a;
  --text-mid: #bca880;
  --accent: #ffce00;
  --accent-glow: rgba(255, 206, 0, 0.35);
  --white: #fff8e2;
  --border: rgba(255, 206, 0, 0.22);
  --hero-overlay-start: rgba(8, 6, 3, 0.55);
  --hero-overlay-mid: rgba(8, 6, 3, 0.75);
  --hero-overlay-end: rgba(4, 3, 2, 0.92);
  --nav-scrolled-bg: rgba(12, 10, 4, 0.92);
}
[data-theme="kaleidoscope"] .about-img-wrapper {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: conic-gradient(from 0deg, var(--accent), var(--bg-3), var(--accent), var(--bg-2), var(--accent));
  background-size: 200% 200%;
  border: none;
  overflow: hidden;
  position: relative;
  transition: transform var(--transition);
}
[data-theme="kaleidoscope"] .about-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 6%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: conic-gradient(from 60deg, var(--bg-3), var(--accent-glow), var(--bg-2), var(--accent-glow));
  pointer-events: none;
}
[data-theme="kaleidoscope"] .about-img-wrapper:hover {
  transform: rotate(30deg) scale(1.05);
}
body[data-kaleido-rotate="1"] [data-theme="kaleidoscope"] .about-img-wrapper {
  animation: kaleidoRotate 12s linear infinite;
}
@keyframes kaleidoRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body[data-kaleido-symmetry="1"] [data-theme="kaleidoscope"] .about-img-wrapper::before {
  animation: kaleidoSym 6s ease-in-out infinite;
}
@keyframes kaleidoSym {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.9); }
}
body[data-kaleido-sparkle="1"] [data-theme="kaleidoscope"] .about-img-wrapper {
  box-shadow: 0 0 30px var(--accent-glow);
  animation: kaleidoSparkle 2s ease-in-out infinite;
}
@keyframes kaleidoSparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) saturate(1.4); }
}


/* ============================================================
   10. NEONFRAME (霓虹边框)
   ============================================================ */
[data-theme="neonframe"] {
  --font-display: 'Audiowide', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s ease;
}
[data-theme="neonframe"][data-color="electric"] {
  --bg: #050810;
  --bg-2: #0a1018;
  --bg-3: #0f1828;
  --bg-4: #16243a;
  --text: #cdf5ff;
  --text-dim: #5a7e8e;
  --text-mid: #8fb8c8;
  --accent: #00ffff;
  --accent-glow: rgba(0, 255, 255, 0.35);
  --white: #eafdff;
  --border: rgba(0, 255, 255, 0.3);
  --hero-overlay-start: rgba(3, 5, 10, 0.55);
  --hero-overlay-mid: rgba(3, 5, 10, 0.75);
  --hero-overlay-end: rgba(2, 3, 6, 0.92);
  --nav-scrolled-bg: rgba(5, 8, 16, 0.92);
}
[data-theme="neonframe"][data-color="plasma"] {
  --bg: #0a0510;
  --bg-2: #120818;
  --bg-3: #1c0e28;
  --bg-4: #2a1438;
  --text: #ffd6f7;
  --text-dim: #8e5a7e;
  --text-mid: #c08fb8;
  --accent: #ff00ff;
  --accent-glow: rgba(255, 0, 255, 0.35);
  --white: #ffeafd;
  --border: rgba(255, 0, 255, 0.3);
  --hero-overlay-start: rgba(6, 3, 10, 0.55);
  --hero-overlay-mid: rgba(6, 3, 10, 0.75);
  --hero-overlay-end: rgba(3, 2, 6, 0.92);
  --nav-scrolled-bg: rgba(10, 5, 16, 0.92);
}
[data-theme="neonframe"][data-color="volt"] {
  --bg: #04100a;
  --bg-2: #081810;
  --bg-3: #0c2418;
  --bg-4: #143020;
  --text: #d6ffd8;
  --text-dim: #5a8e5e;
  --text-mid: #8ac88e;
  --accent: #39ff14;
  --accent-glow: rgba(57, 255, 20, 0.35);
  --white: #eaffe2;
  --border: rgba(57, 255, 20, 0.3);
  --hero-overlay-start: rgba(3, 8, 5, 0.55);
  --hero-overlay-mid: rgba(3, 8, 5, 0.75);
  --hero-overlay-end: rgba(2, 5, 3, 0.92);
  --nav-scrolled-bg: rgba(4, 16, 10, 0.92);
}
[data-theme="neonframe"] .about-img-wrapper {
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-glow), inset 0 0 18px var(--accent-glow);
  transition: box-shadow var(--transition);
}
[data-theme="neonframe"] .about-img-wrapper:hover {
  box-shadow: 0 0 12px var(--accent), 0 0 30px var(--accent), 0 0 50px var(--accent-glow), inset 0 0 24px var(--accent-glow);
}
body[data-neon-glow="1"] [data-theme="neonframe"] .about-img-wrapper {
  box-shadow: 0 0 14px var(--accent), 0 0 36px var(--accent), 0 0 64px var(--accent-glow);
}
body[data-neon-flicker="1"] [data-theme="neonframe"] .about-img-wrapper {
  animation: neonFlicker 2.5s linear infinite;
}
@keyframes neonFlicker {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--accent); }
  41% { opacity: 1; }
  42% { opacity: 0.3; }
  43% { opacity: 1; }
  45% { opacity: 0.5; }
  46% { opacity: 1; }
}
body[data-neon-pulse="1"] [data-theme="neonframe"] .about-img-wrapper {
  animation: neonPulse 1.8s ease-in-out infinite;
}
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow); }
  50% { box-shadow: 0 0 24px var(--accent), 0 0 60px var(--accent), 0 0 90px var(--accent-glow); }
}


/* ============================================================
   CATEGORY 2: FULL-SCREEN IMMERSIVE EFFECT THEMES (10)
   ============================================================ */


/* ============================================================
   11. RAINSTORM (暴雨屏幕)
   ============================================================ */
[data-theme="rainstorm"] {
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s ease;
}
[data-theme="rainstorm"][data-color="storm"] {
  --bg: #1a1a2e;
  --bg-2: #161629;
  --bg-3: #20203a;
  --bg-4: #2a2a48;
  --text: #d8d8f0;
  --text-dim: #6e6e8e;
  --text-mid: #9a9ab8;
  --accent: #5a8ab8;
  --accent-glow: rgba(90, 138, 184, 0.38);
  --white: #e8e8ff;
  --border: rgba(120, 140, 180, 0.2);
  --hero-overlay-start: rgba(16, 16, 30, 0.6);
  --hero-overlay-mid: rgba(12, 12, 24, 0.78);
  --hero-overlay-end: rgba(8, 8, 18, 0.92);
  --nav-scrolled-bg: rgba(26, 26, 46, 0.92);
}
[data-theme="rainstorm"][data-color="monsoon"] {
  --bg: #16213e;
  --bg-2: #131c36;
  --bg-3: #1c2646;
  --bg-4: #243154;
  --text: #d4e0f5;
  --text-dim: #647690;
  --text-mid: #90a4be;
  --accent: #4a9fd4;
  --accent-glow: rgba(74, 159, 212, 0.38);
  --white: #e8f0fc;
  --border: rgba(110, 140, 190, 0.2);
  --hero-overlay-start: rgba(12, 18, 34, 0.6);
  --hero-overlay-mid: rgba(10, 14, 28, 0.78);
  --hero-overlay-end: rgba(6, 9, 20, 0.92);
  --nav-scrolled-bg: rgba(22, 33, 62, 0.92);
}
[data-theme="rainstorm"][data-color="thunder"] {
  --bg: #0f3460;
  --bg-2: #0d2e54;
  --bg-3: #143a6e;
  --bg-4: #1c4684;
  --text: #d8e8ff;
  --text-dim: #64809e;
  --text-mid: #94b0ce;
  --accent: #6cb8e8;
  --accent-glow: rgba(108, 184, 232, 0.38);
  --white: #eaf4ff;
  --border: rgba(120, 160, 200, 0.22);
  --hero-overlay-start: rgba(10, 26, 48, 0.6);
  --hero-overlay-mid: rgba(8, 22, 40, 0.78);
  --hero-overlay-end: rgba(5, 16, 30, 0.92);
  --nav-scrolled-bg: rgba(15, 52, 96, 0.92);
}
[data-theme="rainstorm"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
}
[data-theme="rainstorm"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: repeating-linear-gradient(100deg, transparent 0, transparent 6px, rgba(200,220,255,0.18) 6px, rgba(200,220,255,0.18) 7px);
  opacity: 0.5;
}
body[data-rain-drops="1"] .fx-overlay {
  background-image: radial-gradient(circle at 20% 30%, rgba(180,210,255,0.5) 0, transparent 1.5px),
                    radial-gradient(circle at 60% 70%, rgba(180,210,255,0.4) 0, transparent 1px),
                    radial-gradient(circle at 80% 20%, rgba(180,210,255,0.45) 0, transparent 1.2px);
  background-size: 120px 160px, 90px 130px, 150px 110px;
  animation: rainDrops 0.8s linear infinite;
}
@keyframes rainDrops {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 160px, 0 130px, 0 110px; }
}
body[data-rain-splash="1"] .fx-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 90%, rgba(200,220,255,0.25) 0, transparent 6px),
              radial-gradient(circle at 70% 88%, rgba(200,220,255,0.2) 0, transparent 5px);
  background-size: 200px 200px, 240px 240px;
  animation: rainSplash 1.2s ease-in infinite;
}
@keyframes rainSplash {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}
body[data-rain-streaks="1"] .fx-overlay {
  background-image: repeating-linear-gradient(105deg, transparent 0, transparent 3px, rgba(200,220,255,0.25) 3px, rgba(200,220,255,0.25) 4px);
  background-size: 14px 100%;
  animation: rainStreaks 0.5s linear infinite;
}
@keyframes rainStreaks {
  0% { background-position: 0 0; }
  100% { background-position: 40px 200px; }
}


/* ============================================================
   12. FOGFROST (雾霜屏幕)
   ============================================================ */
[data-theme="fogfrost"] {
  --font-display: 'Quicksand', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="fogfrost"][data-color="mist"] {
  --bg: #d4d4d4;
  --bg-2: #cdcdcd;
  --bg-3: #c4c4c4;
  --bg-4: #b8b8b8;
  --text: #2a2a2a;
  --text-dim: #6a6a6a;
  --text-mid: #4a4a4a;
  --accent: #7a8a9a;
  --accent-glow: rgba(122, 138, 154, 0.35);
  --white: #f4f4f4;
  --border: rgba(60, 60, 70, 0.16);
  --hero-overlay-start: rgba(212, 212, 212, 0.55);
  --hero-overlay-mid: rgba(196, 196, 196, 0.72);
  --hero-overlay-end: rgba(180, 180, 180, 0.88);
  --nav-scrolled-bg: rgba(212, 212, 212, 0.92);
}
[data-theme="fogfrost"][data-color="frost"] {
  --bg: #e8f0f0;
  --bg-2: #dfe8e8;
  --bg-3: #d2dede;
  --bg-4: #c2d2d2;
  --text: #1c3030;
  --text-dim: #5a7474;
  --text-mid: #3c5454;
  --accent: #5a90a0;
  --accent-glow: rgba(90, 144, 160, 0.32);
  --white: #f6fbfb;
  --border: rgba(40, 70, 70, 0.16);
  --hero-overlay-start: rgba(232, 240, 240, 0.55);
  --hero-overlay-mid: rgba(210, 222, 222, 0.72);
  --hero-overlay-end: rgba(194, 210, 210, 0.88);
  --nav-scrolled-bg: rgba(232, 240, 240, 0.92);
}
[data-theme="fogfrost"][data-color="arctic"] {
  --bg: #c0d0d0;
  --bg-2: #b6c6c6;
  --bg-3: #aababa;
  --bg-4: #9aaeae;
  --text: #1a2828;
  --text-dim: #506464;
  --text-mid: #384a4a;
  --accent: #6a90a0;
  --accent-glow: rgba(106, 144, 160, 0.34);
  --white: #eaf2f2;
  --border: rgba(40, 60, 60, 0.18);
  --hero-overlay-start: rgba(192, 208, 208, 0.55);
  --hero-overlay-mid: rgba(170, 186, 186, 0.72);
  --hero-overlay-end: rgba(154, 174, 174, 0.88);
  --nav-scrolled-bg: rgba(192, 208, 208, 0.92);
}
[data-theme="fogfrost"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="fogfrost"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  backdrop-filter: blur(4px);
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.4) 0, transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,0.3) 0, transparent 45%);
  opacity: 0.7;
}
body[data-fog-density="1"] .fx-overlay {
  backdrop-filter: blur(10px);
  opacity: 0.92;
}
body[data-fog-wipe="1"] .fx-overlay {
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%);
  background-size: 300% 100%;
  animation: fogWipe 8s ease-in-out infinite;
}
@keyframes fogWipe {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
body[data-fog-drift="1"] .fx-overlay {
  animation: fogDrift 20s linear infinite;
}
@keyframes fogDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 100px, -180px 120px; }
}


/* ============================================================
   13. SNOWFALL (暴雪纷飞)
   ============================================================ */
[data-theme="snowfall"] {
  --font-display: 'Crimson Text', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="snowfall"][data-color="blizzard"] {
  --bg: #1a1a2e;
  --bg-2: #16162a;
  --bg-3: #20203a;
  --bg-4: #2a2a48;
  --text: #e0e0f0;
  --text-dim: #747494;
  --text-mid: #a0a0c0;
  --accent: #aecbe8;
  --accent-glow: rgba(174, 203, 232, 0.36);
  --white: #f0f0ff;
  --border: rgba(140, 160, 200, 0.2);
  --hero-overlay-start: rgba(16, 16, 30, 0.6);
  --hero-overlay-mid: rgba(12, 12, 24, 0.78);
  --hero-overlay-end: rgba(8, 8, 18, 0.92);
  --nav-scrolled-bg: rgba(26, 26, 46, 0.92);
}
[data-theme="snowfall"][data-color="midnight"] {
  --bg: #0f0f23;
  --bg-2: #0c0c1f;
  --bg-3: #14142e;
  --bg-4: #1c1c3c;
  --text: #d8d8f0;
  --text-dim: #6a6a90;
  --text-mid: #9696be;
  --accent: #9ec0e8;
  --accent-glow: rgba(158, 192, 232, 0.36);
  --white: #eaeaff;
  --border: rgba(120, 150, 200, 0.2);
  --hero-overlay-start: rgba(10, 10, 22, 0.6);
  --hero-overlay-mid: rgba(8, 8, 18, 0.78);
  --hero-overlay-end: rgba(5, 5, 14, 0.92);
  --nav-scrolled-bg: rgba(15, 15, 35, 0.92);
}
[data-theme="snowfall"][data-color="polar"] {
  --bg: #1e3a5f;
  --bg-2: #1a3456;
  --bg-3: #24406a;
  --bg-4: #2e4c7c;
  --text: #dce8f5;
  --text-dim: #6e88a8;
  --text-mid: #9ab0ce;
  --accent: #b8d8f0;
  --accent-glow: rgba(184, 216, 240, 0.36);
  --white: #ecf4fc;
  --border: rgba(140, 170, 210, 0.22);
  --hero-overlay-start: rgba(16, 32, 52, 0.6);
  --hero-overlay-mid: rgba(12, 26, 44, 0.78);
  --hero-overlay-end: rgba(8, 20, 36, 0.92);
  --nav-scrolled-bg: rgba(30, 58, 95, 0.92);
}
[data-theme="snowfall"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="snowfall"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
body[data-snow-flakes="1"] .fx-overlay {
  background-image: radial-gradient(circle at 10% 10%, #fff 0, transparent 1.5px),
                    radial-gradient(circle at 30% 40%, #fff 0, transparent 2px),
                    radial-gradient(circle at 50% 20%, #fff 0, transparent 1px),
                    radial-gradient(circle at 70% 60%, #fff 0, transparent 1.8px),
                    radial-gradient(circle at 90% 30%, #fff 0, transparent 1.2px);
  background-size: 220px 220px, 260px 260px, 180px 180px, 300px 300px, 200px 200px;
  animation: snowFlakes 6s linear infinite;
}
@keyframes snowFlakes {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 220px, 0 260px, 0 180px, 0 300px, 0 200px; }
}
body[data-snow-accumulate="1"] .fx-overlay::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.7));
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
}
body[data-snow-wind="1"] .fx-overlay {
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 2px),
                    radial-gradient(circle at 60% 50%, #fff 0, transparent 1.5px),
                    radial-gradient(circle at 85% 25%, #fff 0, transparent 1.8px);
  background-size: 240px 200px, 200px 240px, 280px 180px;
  animation: snowWind 4s linear infinite;
}
@keyframes snowWind {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: -120px 200px, -90px 240px, -140px 180px; }
}


/* ============================================================
   14. SANDSTORM (沙尘暴)
   ============================================================ */
[data-theme="sandstorm"] {
  --font-display: 'Khand', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s ease;
}
[data-theme="sandstorm"][data-color="desert"] {
  --bg: #c19a6b;
  --bg-2: #b68e5e;
  --bg-3: #a9824f;
  --bg-4: #9a7440;
  --text: #3a2a14;
  --text-dim: #6e5836;
  --text-mid: #50401f;
  --accent: #8a5a2a;
  --accent-glow: rgba(138, 90, 42, 0.34);
  --white: #f4e4ce;
  --border: rgba(80, 56, 24, 0.2);
  --hero-overlay-start: rgba(193, 154, 107, 0.55);
  --hero-overlay-mid: rgba(180, 140, 92, 0.72);
  --hero-overlay-end: rgba(160, 120, 74, 0.88);
  --nav-scrolled-bg: rgba(193, 154, 107, 0.92);
}
[data-theme="sandstorm"][data-color="dune"] {
  --bg: #8b7355;
  --bg-2: #806a4c;
  --bg-3: #735e40;
  --bg-4: #645136;
  --text: #f0e6d4;
  --text-dim: #b09a78;
  --text-mid: #d0bc94;
  --accent: #d4a55a;
  --accent-glow: rgba(212, 165, 90, 0.36);
  --white: #f6ecd8;
  --border: rgba(220, 190, 130, 0.24);
  --hero-overlay-start: rgba(139, 115, 85, 0.55);
  --hero-overlay-mid: rgba(122, 100, 72, 0.72);
  --hero-overlay-end: rgba(104, 84, 58, 0.88);
  --nav-scrolled-bg: rgba(139, 115, 85, 0.92);
}
[data-theme="sandstorm"][data-color="sahara"] {
  --bg: #d4a55a;
  --bg-2: #c8984a;
  --bg-3: #bc8a3c;
  --bg-4: #ae7c2e;
  --text: #3a2810;
  --text-dim: #705636;
  --text-mid: #524024;
  --accent: #a86a1e;
  --accent-glow: rgba(168, 106, 30, 0.36);
  --white: #f6e6c8;
  --border: rgba(90, 60, 20, 0.22);
  --hero-overlay-start: rgba(212, 165, 90, 0.55);
  --hero-overlay-mid: rgba(196, 148, 72, 0.72);
  --hero-overlay-end: rgba(176, 124, 46, 0.88);
  --nav-scrolled-bg: rgba(212, 165, 90, 0.92);
}
[data-theme="sandstorm"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="sandstorm"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  filter: sepia(0.4);
  background: radial-gradient(circle at 40% 50%, rgba(220,180,110,0.3) 0, transparent 50%);
}
body[data-sand-particles="1"] .fx-overlay {
  background-image: radial-gradient(circle at 20% 30%, rgba(230,200,140,0.6) 0, transparent 1px),
                    radial-gradient(circle at 50% 60%, rgba(230,200,140,0.5) 0, transparent 1.2px),
                    radial-gradient(circle at 75% 25%, rgba(230,200,140,0.55) 0, transparent 1px),
                    radial-gradient(circle at 85% 75%, rgba(230,200,140,0.5) 0, transparent 1.3px);
  background-size: 180px 140px, 220px 160px, 160px 180px, 200px 150px;
  animation: sandParticles 2s linear infinite;
}
@keyframes sandParticles {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: -300px 80px, -280px 100px, -260px 70px, -320px 90px; }
}
body[data-sand-wind="1"] .fx-overlay {
  background: linear-gradient(90deg, transparent, rgba(210,170,100,0.35) 50%, transparent);
  background-size: 300% 100%;
  animation: sandWind 3s linear infinite;
}
@keyframes sandWind {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
body[data-sand-haze="1"] .fx-overlay {
  backdrop-filter: sepia(0.5) blur(3px);
  background: rgba(190,150,90,0.25);
}


/* ============================================================
   16. AURORA (极光涌动)
   ============================================================ */
[data-theme="aurora"] {
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.7s ease;
}
[data-theme="aurora"][data-color="borealis"] {
  --bg: #051a14;
  --bg-2: #041610;
  --bg-3: #0a2418;
  --bg-4: #123020;
  --text: #d8f5e8;
  --text-dim: #5e8e78;
  --text-mid: #8ec0a8;
  --accent: #00ff7f;
  --accent-glow: rgba(0, 255, 127, 0.38);
  --white: #e8fce8;
  --border: rgba(0, 220, 120, 0.22);
  --hero-overlay-start: rgba(4, 14, 10, 0.6);
  --hero-overlay-mid: rgba(3, 12, 8, 0.78);
  --hero-overlay-end: rgba(2, 8, 5, 0.92);
  --nav-scrolled-bg: rgba(5, 26, 20, 0.92);
}
[data-theme="aurora"][data-color="twilight"] {
  --bg: #1a0533;
  --bg-2: #16042c;
  --bg-3: #220a40;
  --bg-4: #2e1054;
  --text: #e0d0f8;
  --text-dim: #6e5a9e;
  --text-mid: #9c8ac4;
  --accent: #7a4dff;
  --accent-glow: rgba(122, 77, 255, 0.38);
  --white: #f0e6ff;
  --border: rgba(120, 80, 220, 0.24);
  --hero-overlay-start: rgba(14, 4, 28, 0.6);
  --hero-overlay-mid: rgba(10, 3, 22, 0.78);
  --hero-overlay-end: rgba(6, 2, 14, 0.92);
  --nav-scrolled-bg: rgba(26, 5, 51, 0.92);
}
[data-theme="aurora"][data-color="polaris"] {
  --bg: #04141a;
  --bg-2: #031016;
  --bg-3: #081c24;
  --bg-4: #0e2832;
  --text: #d0f0f5;
  --text-dim: #5a808e;
  --text-mid: #88b4be;
  --accent: #00ced1;
  --accent-glow: rgba(0, 206, 209, 0.38);
  --white: #e6fafc;
  --border: rgba(0, 190, 200, 0.22);
  --hero-overlay-start: rgba(3, 12, 16, 0.6);
  --hero-overlay-mid: rgba(2, 10, 13, 0.78);
  --hero-overlay-end: rgba(1, 6, 8, 0.92);
  --nav-scrolled-bg: rgba(4, 20, 26, 0.92);
}
[data-theme="aurora"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="aurora"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  filter: blur(8px);
  background: linear-gradient(120deg, transparent 20%, var(--accent-glow) 40%, var(--accent-glow) 60%, transparent 80%);
  background-size: 200% 100%;
  opacity: 0.5;
}
body[data-aurora-flow="1"] .fx-overlay {
  animation: auroraFlow 10s ease-in-out infinite;
}
@keyframes auroraFlow {
  0%, 100% { background-position: 0% 50%; opacity: 0.4; }
  50% { background-position: 100% 50%; opacity: 0.75; }
}
body[data-aurora-multi="1"] .fx-overlay {
  background: linear-gradient(120deg, transparent 20%, rgba(0,255,127,0.4) 35%, rgba(0,206,209,0.4) 50%, rgba(122,77,255,0.4) 65%, transparent 80%);
  background-size: 200% 100%;
  filter: blur(12px);
  animation: auroraMulti 8s ease-in-out infinite;
}
@keyframes auroraMulti {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
body[data-aurora-stars="1"] .fx-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: blur(0);
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 0.8px),
                    radial-gradient(circle at 60% 40%, #fff 0, transparent 1px),
                    radial-gradient(circle at 80% 15%, #fff 0, transparent 0.7px),
                    radial-gradient(circle at 40% 70%, #fff 0, transparent 0.9px);
  background-size: 250px 250px, 300px 300px, 200px 200px, 280px 280px;
  animation: auroraStars 5s ease-in-out infinite;
}
@keyframes auroraStars {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}


/* ============================================================
   19. LIGHTNING (雷暴闪电)
   ============================================================ */
[data-theme="lightning"] {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s ease;
}
[data-theme="lightning"][data-color="storm"] {
  --bg: #0a0a1a;
  --bg-2: #08081a;
  --bg-3: #10102a;
  --bg-4: #181838;
  --text: #d8d8f0;
  --text-dim: #6a6a8e;
  --text-mid: #9a9abe;
  --accent: #b8c8ff;
  --accent-glow: rgba(184, 200, 255, 0.38);
  --white: #e8e8ff;
  --border: rgba(140, 150, 200, 0.22);
  --hero-overlay-start: rgba(6, 6, 16, 0.6);
  --hero-overlay-mid: rgba(4, 4, 14, 0.78);
  --hero-overlay-end: rgba(2, 2, 8, 0.92);
  --nav-scrolled-bg: rgba(10, 10, 26, 0.92);
}
[data-theme="lightning"][data-color="bolt"] {
  --bg: #0c0c18;
  --bg-2: #0a0a16;
  --bg-3: #12122a;
  --bg-4: #1a1a3a;
  --text: #f0f0f0;
  --text-dim: #6e6e8e;
  --text-mid: #9c9cbe;
  --accent: #ffffff;
  --accent-glow: rgba(255, 255, 255, 0.38);
  --white: #ffffff;
  --border: rgba(160, 160, 200, 0.24);
  --hero-overlay-start: rgba(8, 8, 18, 0.6);
  --hero-overlay-mid: rgba(6, 6, 16, 0.78);
  --hero-overlay-end: rgba(3, 3, 10, 0.92);
  --nav-scrolled-bg: rgba(12, 12, 24, 0.92);
}
[data-theme="lightning"][data-color="charged"] {
  --bg: #0a0a1a;
  --bg-2: #08081c;
  --bg-3: #10102e;
  --bg-4: #181842;
  --text: #d8d8f5;
  --text-dim: #6a6a92;
  --text-mid: #9a9ac4;
  --accent: #6c8cff;
  --accent-glow: rgba(108, 140, 255, 0.38);
  --white: #e8e8ff;
  --border: rgba(120, 140, 220, 0.24);
  --hero-overlay-start: rgba(6, 6, 18, 0.6);
  --hero-overlay-mid: rgba(4, 4, 16, 0.78);
  --hero-overlay-end: rgba(2, 2, 10, 0.92);
  --nav-scrolled-bg: rgba(10, 10, 26, 0.92);
}
[data-theme="lightning"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="lightning"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow: inset 0 0 120px rgba(120,140,255,0.15);
}
body[data-light-bolts="1"] .fx-overlay {
  background-image: linear-gradient(135deg, transparent 48%, rgba(220,230,255,0.9) 49%, rgba(255,255,255,0.6) 50%, transparent 51%),
                    linear-gradient(115deg, transparent 60%, rgba(220,230,255,0.7) 61%, transparent 62%);
  background-size: 300px 400px, 240px 360px;
  background-repeat: no-repeat;
  animation: lightBolts 4s steps(1) infinite;
}
@keyframes lightBolts {
  0%, 92%, 100% { opacity: 0; }
  93%, 95% { opacity: 1; }
  96%, 98% { opacity: 0; }
  99% { opacity: 0.8; }
}
body[data-light-flash="1"] .fx-overlay {
  background: rgba(220,230,255,0.6);
  animation: lightFlash 5s steps(1) infinite;
}
@keyframes lightFlash {
  0%, 88%, 100% { opacity: 0; }
  89% { opacity: 0.9; }
  90% { opacity: 0.2; }
  91% { opacity: 0.8; }
  92% { opacity: 0; }
}
body[data-light-thunder="1"] .fx-overlay {
  box-shadow: inset 0 0 200px var(--accent-glow), 0 0 60px var(--accent-glow);
  animation: lightThunder 6s ease-in-out infinite;
}
@keyframes lightThunder {
  0%, 80%, 100% { box-shadow: inset 0 0 60px rgba(120,140,255,0.1); }
  82% { box-shadow: inset 0 0 200px var(--accent-glow), 0 0 80px var(--accent-glow); }
  85% { box-shadow: inset 0 0 80px rgba(120,140,255,0.15); }
}


/* ============================================================
   20. PETALS (花瓣飘落)
   ============================================================ */
[data-theme="petals"] {
  --font-display: 'Noto Serif JP', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s ease;
}
[data-theme="petals"][data-color="sakura"] {
  --bg: #2a1418;
  --bg-2: #241014;
  --bg-3: #34181e;
  --bg-4: #422026;
  --text: #ffe0e0;
  --text-dim: #9a6a6e;
  --text-mid: #c89098;
  --accent: #ff9999;
  --accent-glow: rgba(255, 153, 153, 0.38);
  --white: #fff0f0;
  --border: rgba(255, 150, 150, 0.22);
  --hero-overlay-start: rgba(22, 12, 14, 0.6);
  --hero-overlay-mid: rgba(18, 9, 12, 0.78);
  --hero-overlay-end: rgba(12, 6, 8, 0.92);
  --nav-scrolled-bg: rgba(42, 20, 24, 0.92);
}
[data-theme="petals"][data-color="spring"] {
  --bg: #3a1c22;
  --bg-2: #321820;
  --bg-3: #44202a;
  --bg-4: #52282e;
  --text: #ffe8e8;
  --text-dim: #a07478;
  --text-mid: #d09ca0;
  --accent: #ffcccc;
  --accent-glow: rgba(255, 204, 204, 0.38);
  --white: #fff4f4;
  --border: rgba(255, 180, 180, 0.22);
  --hero-overlay-start: rgba(28, 14, 18, 0.6);
  --hero-overlay-mid: rgba(24, 11, 15, 0.78);
  --hero-overlay-end: rgba(16, 8, 10, 0.92);
  --nav-scrolled-bg: rgba(58, 28, 34, 0.92);
}
[data-theme="petals"][data-color="hanami"] {
  --bg: #2e1018;
  --bg-2: #280c14;
  --bg-3: #381420;
  --bg-4: #461a28;
  --text: #ffd8d8;
  --text-dim: #945a64;
  --text-mid: #c0848e;
  --accent: #ff6666;
  --accent-glow: rgba(255, 102, 102, 0.38);
  --white: #ffeaea;
  --border: rgba(255, 120, 120, 0.24);
  --hero-overlay-start: rgba(24, 10, 14, 0.6);
  --hero-overlay-mid: rgba(20, 8, 12, 0.78);
  --hero-overlay-end: rgba(14, 6, 8, 0.92);
  --nav-scrolled-bg: rgba(46, 16, 24, 0.92);
}
[data-theme="petals"] .hero-bg {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
[data-theme="petals"] .fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
body[data-petal-fall="1"] .fx-overlay {
  background-image: radial-gradient(ellipse 6px 4px at 15% 10%, var(--accent) 0, transparent 70%),
                    radial-gradient(ellipse 7px 5px at 40% 30%, var(--accent) 0, transparent 70%),
                    radial-gradient(ellipse 5px 4px at 70% 20%, var(--accent) 0, transparent 70%),
                    radial-gradient(ellipse 6px 5px at 88% 50%, var(--accent) 0, transparent 70%);
  background-size: 240px 280px, 300px 260px, 200px 300px, 260px 240px;
  border-radius: 60% 40% 60% 40% / 50%;
  animation: petalFall 8s linear infinite;
}
@keyframes petalFall {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 30px 280px, -20px 260px, 40px 300px, -30px 240px; }
}
body[data-petal-swirl="1"] .fx-overlay {
  background-image: radial-gradient(ellipse 6px 4px at 20% 20%, var(--accent) 0, transparent 70%),
                    radial-gradient(ellipse 7px 5px at 60% 50%, var(--accent) 0, transparent 70%),
                    radial-gradient(ellipse 5px 4px at 80% 30%, var(--accent) 0, transparent 70%);
  background-size: 260px 260px, 300px 300px, 240px 240px;
  animation: petalSwirl 10s linear infinite;
}
@keyframes petalSwirl {
  0% { background-position: 0 0, 0 0, 0 0; transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
  100% { background-position: 80px 260px, -60px 300px, 90px 240px; transform: rotate(0deg); }
}
body[data-petal-accumulate="1"] .fx-overlay::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--accent-glow) 50%, var(--accent-glow));
  border-radius: 50% 50% 0 0 / 18px 18px 0 0;
}

/* THEME: SILHOUETTE — 剪影逆光 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&display=swap');

[data-theme="silhouette"] {
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="silhouette"][data-color="golden"] {
  --bg: #0a0a05; --bg-2: #14140a; --bg-3: #1e1e10; --bg-4: #2a2a18;
  --text: #f5e6c8; --text-dim: #8a7d60; --text-mid: #b0a280;
  --accent: #d4a017; --accent-glow: rgba(212, 160, 23, 0.4);
  --white: #fff8e7; --border: rgba(212, 160, 23, 0.12);
  --hero-overlay-start: rgba(10, 10, 5, 0.5); --hero-overlay-mid: rgba(20, 20, 10, 0.6); --hero-overlay-end: rgba(10, 10, 5, 0.92);
  --nav-scrolled-bg: rgba(10, 10, 5, 0.92);
}
[data-theme="silhouette"][data-color="sunset"] {
  --bg: #0d0805; --bg-2: #1a0e08; --bg-3: #241510; --bg-4: #30201a;
  --text: #f0d4c0; --text-dim: #8a7060; --text-mid: #b09080;
  --accent: #e85d04; --accent-glow: rgba(232, 93, 4, 0.4);
  --white: #fff0e0; --border: rgba(232, 93, 4, 0.12);
  --hero-overlay-start: rgba(13, 8, 5, 0.5); --hero-overlay-mid: rgba(26, 14, 8, 0.6); --hero-overlay-end: rgba(13, 8, 5, 0.92);
  --nav-scrolled-bg: rgba(13, 8, 5, 0.92);
}
[data-theme="silhouette"][data-color="crimson"] {
  --bg: #080505; --bg-2: #140a0a; --bg-3: #1e1010; --bg-4: #2a1818;
  --text: #f0c8c8; --text-dim: #8a6060; --text-mid: #b08080;
  --accent: #c1121f; --accent-glow: rgba(193, 18, 31, 0.4);
  --white: #ffe8e8; --border: rgba(193, 18, 31, 0.12);
  --hero-overlay-start: rgba(8, 5, 5, 0.5); --hero-overlay-mid: rgba(20, 10, 10, 0.6); --hero-overlay-end: rgba(8, 5, 5, 0.92);
  --nav-scrolled-bg: rgba(8, 5, 5, 0.92);
}

[data-theme="silhouette"] .about-img-wrapper {
  position: relative; overflow: hidden;
  box-shadow: 0 0 60px var(--accent-glow), inset 0 0 30px rgba(0,0,0,0.5);
}
[data-theme="silhouette"] .about-img-wrapper img {
  filter: brightness(0.1) contrast(1.5);
  transition: filter 0.8s var(--transition);
}
[data-theme="silhouette"] .about-img-wrapper:hover img {
  filter: brightness(0.8) contrast(1.1);
}
body[data-silhouette-backlight="1"] .about-img-wrapper::before {
  content: ''; position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);
  z-index: 0; animation: silhouette-pulse 4s ease-in-out infinite;
}
@keyframes silhouette-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* THEME: LIGHTLEAK — 漏光回忆 */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap');

[data-theme="lightleak"] {
  --font-display: 'Lora', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="lightleak"][data-color="warm"] {
  --bg: #1a0e08; --bg-2: #241510; --bg-3: #2e1e18; --bg-4: #3a2820;
  --text: #f5e0d0; --text-dim: #8a7060; --text-mid: #b09080;
  --accent: #e85d04; --accent-glow: rgba(232, 93, 4, 0.35);
  --white: #fff0e0; --border: rgba(232, 93, 4, 0.12);
  --hero-overlay-start: rgba(26, 14, 8, 0.4); --hero-overlay-mid: rgba(36, 21, 16, 0.55); --hero-overlay-end: rgba(26, 14, 8, 0.9);
  --nav-scrolled-bg: rgba(26, 14, 8, 0.92);
}
[data-theme="lightleak"][data-color="rose"] {
  --bg: #1a0810; --bg-2: #241018; --bg-3: #2e1820; --bg-4: #3a2028;
  --text: #f0d8e0; --text-dim: #8a6070; --text-mid: #b08090;
  --accent: #ff006e; --accent-glow: rgba(255, 0, 110, 0.35);
  --white: #ffe8f0; --border: rgba(255, 0, 110, 0.12);
  --hero-overlay-start: rgba(26, 8, 16, 0.4); --hero-overlay-mid: rgba(36, 16, 24, 0.55); --hero-overlay-end: rgba(26, 8, 16, 0.9);
  --nav-scrolled-bg: rgba(26, 8, 16, 0.92);
}
[data-theme="lightleak"][data-color="amber"] {
  --bg: #181008; --bg-2: #221810; --bg-3: #2c2018; --bg-4: #382820;
  --text: #f0e0c8; --text-dim: #8a7860; --text-mid: #b09880;
  --accent: #d4a017; --accent-glow: rgba(212, 160, 23, 0.35);
  --white: #fff8e0; --border: rgba(212, 160, 23, 0.12);
  --hero-overlay-start: rgba(24, 16, 8, 0.4); --hero-overlay-mid: rgba(34, 24, 16, 0.55); --hero-overlay-end: rgba(24, 16, 8, 0.9);
  --nav-scrolled-bg: rgba(24, 16, 8, 0.92);
}

[data-theme="lightleak"] .hero-bg { filter: sepia(0.2) saturate(1.2); }
[data-theme="lightleak"] .fx-overlay { mix-blend-mode: screen; }
body[data-lightleak-streaks="1"] .hero-overlay {
  background: linear-gradient(105deg, transparent 30%, rgba(232,93,4,0.08) 50%, transparent 70%);
}

/* THEME: DUSTGRAIN — 胶片尘埃 */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

[data-theme="dustgrain"] {
  --font-display: 'Special Elite', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s steps(4);
}

[data-theme="dustgrain"][data-color="sepia"] {
  --bg: #1a1410; --bg-2: #241c16; --bg-3: #2e241c; --bg-4: #3a2e24;
  --text: #e8d8c0; --text-dim: #8a7a64; --text-mid: #b0a088;
  --accent: #c19a6b; --accent-glow: rgba(193, 154, 107, 0.35);
  --white: #f5e8d4; --border: rgba(193, 154, 107, 0.12);
  --hero-overlay-start: rgba(26, 20, 16, 0.5); --hero-overlay-mid: rgba(36, 28, 22, 0.6); --hero-overlay-end: rgba(26, 20, 16, 0.92);
  --nav-scrolled-bg: rgba(26, 20, 16, 0.92);
}
[data-theme="dustgrain"][data-color="noir"] {
  --bg: #0c0c0c; --bg-2: #161616; --bg-3: #202020; --bg-4: #2c2c2c;
  --text: #e0e0e0; --text-dim: #787878; --text-mid: #a0a0a0;
  --accent: #a0a0a0; --accent-glow: rgba(160, 160, 160, 0.35);
  --white: #f0f0f0; --border: rgba(160, 160, 160, 0.12);
  --hero-overlay-start: rgba(12, 12, 12, 0.5); --hero-overlay-mid: rgba(22, 22, 22, 0.6); --hero-overlay-end: rgba(12, 12, 12, 0.92);
  --nav-scrolled-bg: rgba(12, 12, 12, 0.92);
}
[data-theme="dustgrain"][data-color="tech"] {
  --bg: #0a0c10; --bg-2: #141820; --bg-3: #1e242c; --bg-4: #2a3038;
  --text: #c8d4e0; --text-dim: #687888; --text-mid: #8898a8;
  --accent: #6c8898; --accent-glow: rgba(108, 136, 152, 0.35);
  --white: #e0e8f0; --border: rgba(108, 136, 152, 0.12);
  --hero-overlay-start: rgba(10, 12, 16, 0.5); --hero-overlay-mid: rgba(20, 24, 32, 0.6); --hero-overlay-end: rgba(10, 12, 16, 0.92);
  --nav-scrolled-bg: rgba(10, 12, 16, 0.92);
}

[data-theme="dustgrain"] .hero-bg { filter: sepia(0.3) contrast(0.95); }
[data-theme="dustgrain"] .fx-overlay { mix-blend-mode: overlay; }

/* THEME: PRISMATIC — 色散边缘 */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

[data-theme="prismatic"] {
  --font-display: 'Jost', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="prismatic"][data-color="spectrum"] {
  --bg: #050508; --bg-2: #0a0a14; --bg-3: #14141e; --bg-4: #1e1e2e;
  --text: #e0e0f0; --text-dim: #686878; --text-mid: #888898;
  --accent: #00ced1; --accent-glow: rgba(0, 206, 209, 0.35);
  --white: #f0f0ff; --border: rgba(0, 206, 209, 0.12);
  --hero-overlay-start: rgba(5, 5, 8, 0.5); --hero-overlay-mid: rgba(10, 10, 20, 0.6); --hero-overlay-end: rgba(5, 5, 8, 0.92);
  --nav-scrolled-bg: rgba(5, 5, 8, 0.92);
}
[data-theme="prismatic"][data-color="iridescent"] {
  --bg: #080510; --bg-2: #100a18; --bg-3: #181024; --bg-4: #221830;
  --text: #e0d8f0; --text-dim: #686078; --text-mid: #8880a0;
  --accent: #a78bfa; --accent-glow: rgba(167, 139, 250, 0.35);
  --white: #f0e8ff; --border: rgba(167, 139, 250, 0.12);
  --hero-overlay-start: rgba(8, 5, 16, 0.5); --hero-overlay-mid: rgba(16, 10, 24, 0.6); --hero-overlay-end: rgba(8, 5, 16, 0.92);
  --nav-scrolled-bg: rgba(8, 5, 16, 0.92);
}
[data-theme="prismatic"][data-color="razor"] {
  --bg: #06080a; --bg-2: #0c1014; --bg-3: #161a1e; --bg-4: #20262c;
  --text: #dce8f0; --text-dim: #607078; --text-mid: #809098;
  --accent: #ff006e; --accent-glow: rgba(255, 0, 110, 0.35);
  --white: #e8f0f4; --border: rgba(255, 0, 110, 0.12);
  --hero-overlay-start: rgba(6, 8, 10, 0.5); --hero-overlay-mid: rgba(12, 16, 20, 0.6); --hero-overlay-end: rgba(6, 8, 10, 0.92);
  --nav-scrolled-bg: rgba(6, 8, 10, 0.92);
}

[data-theme="prismatic"] .hero-title {
  text-shadow: -1px 0 rgba(255,0,0,0.5), 1px 0 rgba(0,200,255,0.5);
}
[data-theme="prismatic"] .fx-overlay { mix-blend-mode: screen; }

/* THEME: GLASSPLATE — 玻璃干版 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

[data-theme="glassplate"] {
  --font-display: 'Libre Baskerville', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="glassplate"][data-color="silver"] {
  --bg: #101014; --bg-2: #181820; --bg-3: #202028; --bg-4: #2c2c34;
  --text: #d8d8e0; --text-dim: #686878; --text-mid: #888898;
  --accent: #b0b8c0; --accent-glow: rgba(176, 184, 192, 0.35);
  --white: #e8e8f0; --border: rgba(176, 184, 192, 0.12);
  --hero-overlay-start: rgba(16, 16, 20, 0.5); --hero-overlay-mid: rgba(24, 24, 32, 0.6); --hero-overlay-end: rgba(16, 16, 20, 0.92);
  --nav-scrolled-bg: rgba(16, 16, 20, 0.92);
}
[data-theme="glassplate"][data-color="sepia"] {
  --bg: #141008; --bg-2: #1c1810; --bg-3: #242018; --bg-4: #302820;
  --text: #e0d4c0; --text-dim: #786c58; --text-mid: #988878;
  --accent: #a09080; --accent-glow: rgba(160, 144, 128, 0.35);
  --white: #f0e8d8; --border: rgba(160, 144, 128, 0.12);
  --hero-overlay-start: rgba(20, 16, 8, 0.5); --hero-overlay-mid: rgba(28, 24, 16, 0.6); --hero-overlay-end: rgba(20, 16, 8, 0.92);
  --nav-scrolled-bg: rgba(20, 16, 8, 0.92);
}
[data-theme="glassplate"][data-color="cyan"] {
  --bg: #08101a; --bg-2: #101820; --bg-3: #182028; --bg-4: #242c34;
  --text: #c8dce8; --text-dim: #587078; --text-mid: #788ca0;
  --accent: #5a8aa0; --accent-glow: rgba(90, 138, 160, 0.35);
  --white: #d8ecf8; --border: rgba(90, 138, 160, 0.12);
  --hero-overlay-start: rgba(8, 16, 26, 0.5); --hero-overlay-mid: rgba(16, 24, 32, 0.6); --hero-overlay-end: rgba(8, 16, 26, 0.92);
  --nav-scrolled-bg: rgba(8, 16, 26, 0.92);
}

[data-theme="glassplate"] .about-img-wrapper {
  box-shadow: 0 0 40px var(--accent-glow), inset 0 0 20px rgba(0,0,0,0.3);
}
[data-theme="glassplate"] .about-img-wrapper img {
  filter: sepia(0.4) contrast(0.9) brightness(0.95);
  transition: filter 0.8s var(--transition);
}
[data-theme="glassplate"] .about-img-wrapper:hover img {
  filter: sepia(0.1) contrast(1) brightness(1);
}
body[data-glass-crackle="1"] .about-img-wrapper::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 21px);
  pointer-events: none; z-index: 3;
}

/* ============================================================
   END OF THEMES V6
   ============================================================ */