/* =========================================================================
   Per-page themes — colorful moods, contact-inspired freshness
   Each section has its own hue · airy gradients · bright white glass
   Contact page keeps the mint correspondence reference
   ========================================================================= */

/* Shared fresh-surface tokens (contact-inspired clarity, hue-neutral) */
:root {
  --fresh-surface: rgba(255, 255, 255, 0.86);
  --fresh-surface-raised: #ffffff;
  --fresh-glass-fill: rgba(255, 255, 255, 0.62);
  --fresh-glass-border: rgba(255, 255, 255, 0.55);

  /* Contact mint — reference palette, used on contact + hero accent option */
  --mint-a: #f0fdf4;
  --mint-b: #ecfdf5;
  --mint-c: #d1fae5;
  --mint-accent: #059669;
  --mint-accent-hover: #047857;
  --mint-ink: #14532d;
  --mint-ink-muted: rgba(20, 83, 45, 0.72);
  --mint-ink-subtle: rgba(20, 83, 45, 0.55);
  --mint-border: rgba(5, 150, 105, 0.14);
}

/* Hide global aurora wash when sections carry their own mood */
body:has(.theme-panel) .aurora,
body.theme-beach .aurora {
  opacity: 0;
  visibility: hidden;
}

.theme-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(92dvh, 920px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: none !important;
  color: var(--theme-ink);
  background: var(--theme-bg);
  --accent: var(--theme-accent);
  --accent-hover: var(--theme-accent-hover, var(--theme-accent));
  --ink: var(--theme-ink);
  --ink-muted: var(--theme-ink-muted);
  --ink-subtle: var(--theme-ink-subtle);
  --ink-tertiary: var(--theme-ink-faint);
  --surface-1: var(--theme-surface);
  --surface-2: var(--theme-surface-raised);
  --hairline: var(--theme-border);
  /* Light sections: translucent glass so blur reads over colorful bg */
  --glass-fill-subtle: rgba(255, 255, 255, 0.36);
  --glass-blur-subtle: blur(22px) saturate(180%) brightness(1.05);
  --glass-border: color-mix(in srgb, var(--theme-accent) 14%, rgba(255, 255, 255, 0.58));
  --glass-sheen-opacity: 0.68;
  --glass-shadow: 0 4px 20px color-mix(in srgb, var(--theme-accent) 10%, rgba(0, 0, 0, 0.08));
}

.theme-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--theme-photo, none) center / cover no-repeat;
  opacity: var(--theme-photo-opacity, 0);
  pointer-events: none;
}

.theme-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--theme-overlay, transparent);
  pointer-events: none;
}

.theme-panel > .container,
.theme-panel > .hero-inner,
.theme-panel > .frame {
  position: relative;
  z-index: 1;
  width: 100%;
}

.theme-panel .eyebrow { color: var(--theme-accent); }
.theme-panel .lead { color: var(--theme-ink-muted); }
.theme-panel .muted,
.theme-panel .danger { color: var(--theme-ink-subtle); }
.theme-panel h1,
.theme-panel h2,
.theme-panel h3 {
  color: var(--theme-ink);
  font-family: var(--theme-font-display, var(--font-display));
}
.theme-panel .grad { color: var(--theme-accent); }
.theme-panel .card,
.theme-panel .info-card,
.theme-panel .linklist a {
  color: var(--theme-ink);
}
.theme-panel .linklist a {
  border-radius: var(--pill, 980px);
  font-weight: 500;
}
.theme-panel .btn-primary {
  color: var(--theme-accent);
  border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--glass-border));
  box-shadow:
    var(--glass-rim),
    0 2px 18px color-mix(in srgb, var(--theme-accent) 14%, transparent);
}
.theme-panel .btn-primary:hover { color: var(--theme-accent-hover, var(--theme-accent)); }
.theme-panel .btn-ghost {
  color: var(--theme-accent);
  border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--glass-border));
}
.theme-panel .btn-ghost:hover { color: var(--theme-accent-hover, var(--theme-accent)); }
.theme-panel .linklist a {
  border-color: color-mix(in srgb, var(--theme-accent) 18%, var(--glass-border));
}
.theme-panel .world-clock,
.theme-panel .clock-chip {
  background: var(--theme-surface);
  border: 0.5px solid var(--theme-border);
  color: var(--theme-ink-subtle);
}

/* —— Hero: warm sunrise welcome —— */
.theme-hero {
  --theme-bg: linear-gradient(165deg, #fff8f5 0%, #ffedd5 48%, #fed7aa 100%);
  --theme-accent: #ea580c;
  --theme-accent-hover: #c2410c;
  --theme-ink: #292524;
  --theme-ink-muted: rgba(41, 37, 36, 0.72);
  --theme-ink-subtle: rgba(41, 37, 36, 0.55);
  --theme-ink-faint: rgba(41, 37, 36, 0.38);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(234, 88, 12, 0.16);
  --ring: 0 0 0 3px color-mix(in srgb, #ea580c 35%, transparent);
  background: var(--theme-bg) !important;
}
.theme-hero .eyebrow { color: var(--theme-accent); }
.theme-hero .hero-name { color: var(--theme-ink); }
.theme-hero .hero-tag { color: var(--theme-ink-muted); }
.theme-hero .btn-primary {
  color: var(--theme-accent);
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--glass-border));
}
.theme-hero .btn-primary:hover { color: var(--theme-accent-hover); }
.theme-hero .ctrl--glass { color: var(--theme-ink-subtle); }
.theme-hero .world-clock__greeting { color: var(--theme-ink-muted); }
.theme-hero .tz-clock__digital { color: var(--theme-ink); }
.theme-hero .analog__hand--second,
.theme-hero .analog__hub { background: var(--theme-accent); }
.theme-hero .analog__hand--minute {
  background: color-mix(in srgb, var(--theme-ink) 75%, var(--theme-accent));
}

.theme-intro .welcome-quote {
  border-left-color: color-mix(in srgb, var(--theme-accent) 45%, transparent);
}
.theme-intro .welcome-quote p {
  color: var(--theme-ink-muted);
}
.theme-intro {
  --theme-photo: url("/images/links-me-bg.jpg");
  --theme-photo-opacity: 0.18;
  --theme-overlay: linear-gradient(90deg, rgba(244, 250, 245, 0.94) 0%, rgba(236, 253, 245, 0.82) 100%);
  --theme-bg: #f4faf5;
  --theme-accent: #16a34a;
  --theme-accent-hover: #15803d;
  --theme-ink: #14532d;
  --theme-ink-muted: rgba(20, 83, 45, 0.72);
  --theme-ink-subtle: rgba(20, 83, 45, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(22, 163, 74, 0.14);
}

/* —— Resume: crisp sky blue —— */
.theme-resume {
  --theme-photo: url("/images/resume-bg.jpg");
  --theme-photo-opacity: 0.14;
  --theme-overlay: linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(219, 234, 254, 0.88));
  --theme-bg: linear-gradient(165deg, #eff6ff 0%, #dbeafe 100%);
  --theme-accent: #2563eb;
  --theme-accent-hover: #1d4ed8;
  --theme-ink: #0f172a;
  --theme-ink-muted: rgba(15, 23, 42, 0.72);
  --theme-ink-subtle: rgba(15, 23, 42, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(37, 99, 235, 0.14);
}

/* —— Academic: bright scholarly paper —— */
.theme-academic {
  --theme-photo: url("/images/academic-bg.jpg");
  --theme-photo-opacity: 0.16;
  --theme-overlay: linear-gradient(135deg, rgba(250, 248, 244, 0.94) 0%, rgba(237, 232, 220, 0.88) 100%);
  --theme-bg: linear-gradient(165deg, #faf8f5 0%, #f5f0e8 100%);
  --theme-accent: #1e40af;
  --theme-accent-hover: #1d4ed8;
  --theme-ink: #1c1917;
  --theme-ink-muted: rgba(28, 25, 23, 0.72);
  --theme-ink-subtle: rgba(28, 25, 23, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(30, 64, 175, 0.14);
  --theme-font-display: Georgia, "Songti SC", "STSong", serif;
  --theme-font-body: Georgia, "Songti SC", "STSong", serif;
  font-family: var(--theme-font-body);
  letter-spacing: 0.01em;
}
.theme-academic .card {
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(30, 64, 175, 0.06);
}

/* —— Notes: sunny notebook —— */
.theme-notes {
  --theme-photo: url("/images/notes-bg.jpg");
  --theme-photo-opacity: 0.1;
  --theme-overlay: linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(254, 243, 199, 0.86));
  --theme-bg: linear-gradient(165deg, #fffbeb 0%, #fef3c7 100%);
  --theme-accent: #d97706;
  --theme-accent-hover: #b45309;
  --theme-ink: #422006;
  --theme-ink-muted: rgba(66, 32, 6, 0.72);
  --theme-ink-subtle: rgba(66, 32, 6, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(217, 119, 6, 0.14);
  --theme-font-display: Georgia, "Kaiti SC", serif;
}

/* —— Encryption: cool secure slate —— */
.theme-encrypt {
  --theme-bg: linear-gradient(160deg, #475569 0%, #334155 100%);
  --theme-accent: #38bdf8;
  --theme-accent-hover: #7dd3fc;
  --theme-ink: #f8fafc;
  --theme-ink-muted: rgba(248, 250, 252, 0.78);
  --theme-ink-subtle: rgba(248, 250, 252, 0.58);
  --theme-surface: rgba(255, 255, 255, 0.12);
  --theme-surface-raised: rgba(255, 255, 255, 0.18);
  --theme-border: rgba(56, 189, 248, 0.22);
  --theme-font-display: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark themed sections — glass over rich backgrounds */
.theme-music,
.theme-encrypt {
  --glass-fill: rgba(255, 255, 255, 0.1);
  --glass-fill-subtle: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-rim:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* —— Music: vivid violet lounge —— */
.theme-music {
  --theme-photo: url("/images/music-bg.jpg");
  --theme-photo-opacity: 0.42;
  --theme-overlay: linear-gradient(180deg, rgba(46, 16, 101, 0.55) 0%, rgba(88, 28, 135, 0.72) 100%);
  --theme-bg: linear-gradient(165deg, #2e1065 0%, #581c87 100%);
  --theme-accent: #e879f9;
  --theme-accent-hover: #f0abfc;
  --theme-ink: #faf5ff;
  --theme-ink-muted: rgba(250, 245, 255, 0.78);
  --theme-ink-subtle: rgba(250, 245, 255, 0.58);
  --theme-surface: rgba(255, 255, 255, 0.12);
  --theme-surface-raised: rgba(255, 255, 255, 0.18);
  --theme-border: rgba(232, 121, 249, 0.24);
  --theme-font-display: "Avenir Next", "SF Pro Display", system-ui, sans-serif;
}
.theme-music .eyebrow .dot {
  background: var(--theme-accent);
  box-shadow: 0 0 12px rgba(232, 121, 249, 0.5);
}

/* —— Novel: warm literary linen —— */
.theme-novel {
  --theme-photo: url("/images/novel-bg.jpg");
  --theme-photo-opacity: 0.22;
  --theme-overlay: linear-gradient(180deg, rgba(250, 245, 240, 0.92), rgba(231, 219, 203, 0.86));
  --theme-bg: linear-gradient(165deg, #faf5f0 0%, #f3ebe3 100%);
  --theme-accent: #b45309;
  --theme-accent-hover: #d97706;
  --theme-ink: #3f2e22;
  --theme-ink-muted: rgba(63, 46, 34, 0.72);
  --theme-ink-subtle: rgba(63, 46, 34, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(180, 83, 9, 0.14);
  --theme-font-display: Georgia, "Songti SC", serif;
}

/* —— Links teaser: coastal sky + sand + sun —— */
.theme-links {
  --theme-photo: url("/images/links-bg.jpg");
  --theme-photo-opacity: 0.32;
  --theme-overlay: linear-gradient(180deg, rgba(224, 242, 254, 0.9) 0%, rgba(247, 240, 229, 0.84) 55%, rgba(254, 243, 199, 0.78) 100%);
  --theme-bg: linear-gradient(180deg, #e0f2fe 0%, #f7f0e5 55%, #fef3c7 100%);
  --theme-accent: #0891b2;
  --theme-accent-hover: #0e7490;
  --theme-ink: #155e75;
  --theme-ink-muted: rgba(21, 94, 117, 0.75);
  --theme-ink-subtle: rgba(21, 94, 117, 0.58);
  --theme-surface: rgba(255, 255, 255, 0.68);
  --theme-surface-raised: rgba(255, 255, 255, 0.9);
  --theme-border: rgba(8, 145, 178, 0.16);
}
.theme-links .linklist a {
  border-radius: 16px;
}

/* —— About: calm teal studio —— */
.theme-about {
  --theme-photo: url("/images/self-bg.jfif");
  --theme-photo-opacity: 0.12;
  --theme-overlay: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(241, 245, 249, 0.9));
  --theme-bg: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%);
  --theme-accent: #0d9488;
  --theme-accent-hover: #0f766e;
  --theme-ink: #1c1917;
  --theme-ink-muted: rgba(28, 25, 23, 0.72);
  --theme-ink-subtle: rgba(28, 25, 23, 0.55);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: rgba(13, 148, 136, 0.14);
}

/* —— Contact: mint correspondence (reference — keep as-is) —— */
.theme-contact {
  --theme-bg: linear-gradient(165deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%);
  --theme-accent: var(--mint-accent);
  --theme-accent-hover: var(--mint-accent-hover);
  --theme-ink: var(--mint-ink);
  --theme-ink-muted: var(--mint-ink-muted);
  --theme-ink-subtle: var(--mint-ink-subtle);
  --theme-surface: var(--fresh-surface);
  --theme-surface-raised: var(--fresh-surface-raised);
  --theme-border: var(--mint-border);
}

/* =========================================================================
   Links full page — beach / coastal airy (colorful chapters)
   ========================================================================= */
.theme-beach {
  --beach-sand: #f7f0e5;
  --beach-sky: #dbeafe;
  --beach-sea: #0891b2;
  --beach-seafoam: #5eead4;
  --beach-ink: #155e75;
  --beach-ink-soft: rgba(21, 94, 117, 0.72);
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-chrome: rgba(255, 255, 255, 0.78);
  --glass-fill-subtle: rgba(255, 255, 255, 0.52);
  --glass-blur: blur(22px) saturate(160%) brightness(1.04);
  --glass-blur-chrome: blur(30px) saturate(165%) brightness(1.03);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-chrome: rgba(255, 255, 255, 0.62);
  color: var(--beach-ink);
  background: linear-gradient(180deg, var(--beach-sky) 0%, var(--beach-sand) 55%, #fef3c7 100%);
}

.theme-beach .panel__bg--mesh {
  background: linear-gradient(175deg, rgba(224, 242, 254, 0.92) 0%, rgba(247, 240, 229, 0.88) 100%);
}

.theme-beach .panel__scrim {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(8, 145, 178, 0.1) 100%
  );
}

.theme-beach .intro-title,
.theme-beach .chapter-meta h2 {
  color: var(--beach-ink);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
}

.theme-beach .link-url {
  color: var(--beach-ink-soft);
}

@media (max-width: 720px) {
  .theme-panel { min-height: auto; padding: clamp(64px, 10vh, 96px) 0; }
}