/* ============================================
   MystHiru — Multi-Theme System
   ============================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
html[data-theme] { transition: background .5s ease; }

body {
  margin: 0;
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.75; color: #e8e6ee; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
  transition: background .5s ease;
}

/* ---------- Theme Variables ---------- */
:root, html[data-theme="sakura"] {
  --accent: #f3a6bd; --accent-bright: #ffc2d3; --accent-deep: #c87598; --accent-alt: #aa91ee;
  --bg-0: #080812; --bg-1: #0f0b16; --bg-2: #171126; --bg-3: #1f1835;
  --line: rgba(243,166,189,.16); --card: rgba(15,11,22,.78);
  --text: #e8e6ee; --text-dim: #a090a0; --text-muted: #6f6070;
  --glow-1: 200,117,152; --glow-2: 170,145,238;
  --deco-1: 255,194,211; --deco-2: 243,166,189; --deco-3: 170,145,238; --deco-4: 255,194,211;
}
html[data-theme="aurora"] {
  --accent: #7fd8c8; --accent-bright: #a8f0e2; --accent-deep: #3fa89a; --accent-alt: #7aa8f0;
  --bg-0: #060d12; --bg-1: #0a141c; --bg-2: #0f1f2a; --bg-3: #152c38;
  --line: rgba(127,216,200,.18); --card: rgba(10,20,28,.8);
  --text: #eef6f4; --text-dim: #b2c4c0; --text-muted: #6f8a85;
  --glow-1: 127,216,200; --glow-2: 122,168,240;
  --deco-1: 168,240,226; --deco-2: 127,216,200; --deco-3: 122,168,240; --deco-4: 150,140,220;
}
html[data-theme="twilight"] {
  --accent: #ffb37e; --accent-bright: #ffd2a8; --accent-deep: #d97f4a; --accent-alt: #f07a9a;
  --bg-0: #120b08; --bg-1: #1a100c; --bg-2: #241813; --bg-3: #2f201a;
  --line: rgba(255,179,126,.2); --card: rgba(20,14,10,.82);
  --text: #faf3ec; --text-dim: #cfb8a6; --text-muted: #937a6a;
  --glow-1: 255,179,126; --glow-2: 240,122,154;
  --deco-1: 255,210,168; --deco-2: 255,179,126; --deco-3: 240,122,154; --deco-4: 220,150,120;
}
html[data-theme="azure"] {
  --accent: #8ab4ff; --accent-bright: #b8d4ff; --accent-deep: #4a7fd9; --accent-alt: #a78bfa;
  --bg-0: #070a14; --bg-1: #0c1020; --bg-2: #121a2c; --bg-3: #192438;
  --line: rgba(138,180,255,.18); --card: rgba(10,14,28,.8);
  --text: #eef1fa; --text-dim: #b6c0d8; --text-muted: #6f7a99;
  --glow-1: 138,180,255; --glow-2: 167,139,250;
  --deco-1: 184,212,255; --deco-2: 138,180,255; --deco-3: 167,139,250; --deco-4: 120,150,220;
}

/* ---------- Body Background ---------- */
body {
  background:
    radial-gradient(circle at 12% 5%, rgba(var(--glow-1),.12), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(var(--glow-2),.10), transparent 30rem),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 48%, var(--bg-0) 100%) !important;
}

/* ---------- Theme Decorations ---------- */
.theme-decorations {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}

/* Sakura: falling petals */
html[data-theme="sakura"] .theme-decorations::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(ellipse 4px 4px at 10% 0%, rgba(255,194,211,.5) 0, transparent),
    radial-gradient(ellipse 3px 3px at 25% 5%, rgba(243,166,189,.4) 0, transparent),
    radial-gradient(ellipse 5px 4px at 40% 10%, rgba(255,194,211,.5) 0, transparent),
    radial-gradient(ellipse 3px 3px at 60% 3%, rgba(170,145,238,.3) 0, transparent),
    radial-gradient(ellipse 4px 4px at 78% 8%, rgba(255,194,211,.4) 0, transparent),
    radial-gradient(ellipse 3px 3px at 92% 2%, rgba(243,166,189,.5) 0, transparent),
    radial-gradient(ellipse 4px 4px at 15% 15%, rgba(255,194,211,.4) 0, transparent),
    radial-gradient(ellipse 3px 3px at 50% 20%, rgba(243,166,189,.3) 0, transparent),
    radial-gradient(ellipse 5px 4px at 82% 18%, rgba(255,194,211,.4) 0, transparent),
    radial-gradient(ellipse 3px 3px at 35% 28%, rgba(170,145,238,.3) 0, transparent),
    radial-gradient(ellipse 4px 4px at 70% 25%, rgba(255,194,211,.3) 0, transparent);
  background-size: 200% 100%;
  animation: sakuraFall 18s linear infinite; opacity: .7;
}
@keyframes sakuraFall {
  0% { transform: translateY(0) rotate(0deg); opacity: .7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: .1; }
}

/* Aurora: flowing bands + stars */
html[data-theme="aurora"] .theme-decorations::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(127,216,200,.06) 0%, transparent 10%,
    rgba(122,168,240,.04) 20%, transparent 30%, rgba(127,216,200,.05) 40%, transparent 60%,
    rgba(150,140,220,.03) 70%, transparent 100%);
  filter: blur(6px); animation: auroraDrift 12s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% { transform: translateX(-5%) scaleY(1); opacity: .6; }
  50% { transform: translateX(5%) scaleY(1.2); opacity: 1; }
  100% { transform: translateX(-3%) scaleY(.9); opacity: .7; }
}
html[data-theme="aurora"] .theme-decorations::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(2px 2px at 15% 30%, rgba(168,240,226,.5) 0, transparent),
    radial-gradient(2px 2px at 40% 50%, rgba(168,240,226,.4) 0, transparent),
    radial-gradient(2px 2px at 60% 35%, rgba(168,240,226,.3) 0, transparent),
    radial-gradient(2px 2px at 80% 55%, rgba(168,240,226,.4) 0, transparent),
    radial-gradient(2px 2px at 25% 70%, rgba(168,240,226,.3) 0, transparent),
    radial-gradient(2px 2px at 55% 75%, rgba(168,240,226,.35) 0, transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(168,240,226,.3) 0, transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(168,240,226,.25) 0, transparent);
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle { 0% { opacity: .3; } 100% { opacity: .7; } }

/* Twilight: fireflies */
html[data-theme="twilight"] .theme-decorations::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(3px 3px at 8% 65%, rgba(255,210,168,.6) 0, transparent),
    radial-gradient(3px 3px at 22% 45%, rgba(255,179,126,.5) 0, transparent),
    radial-gradient(3px 3px at 35% 72%, rgba(255,210,168,.4) 0, transparent),
    radial-gradient(3px 3px at 48% 38%, rgba(240,122,154,.5) 0, transparent),
    radial-gradient(3px 3px at 60% 60%, rgba(255,179,126,.4) 0, transparent),
    radial-gradient(3px 3px at 75% 42%, rgba(255,210,168,.5) 0, transparent),
    radial-gradient(3px 3px at 88% 68%, rgba(240,122,154,.4) 0, transparent),
    radial-gradient(3px 3px at 50% 82%, rgba(255,179,126,.3) 0, transparent),
    radial-gradient(3px 3px at 15% 85%, rgba(255,210,168,.3) 0, transparent),
    radial-gradient(3px 3px at 70% 78%, rgba(255,179,126,.35) 0, transparent);
  animation: firefly 6s ease-in-out infinite alternate;
}
@keyframes firefly {
  0% { opacity: .3; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.08); }
  100% { opacity: .4; transform: scale(.95); }
}
html[data-theme="twilight"] .theme-decorations::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(0deg, rgba(255,179,126,.06) 0%, transparent 100%);
  filter: blur(8px); animation: emberGlow 8s ease-in-out infinite alternate;
}
@keyframes emberGlow { 0% { opacity: .4; } 100% { opacity: .8; } }

/* Azure: rain */
html[data-theme="azure"] .theme-decorations::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(transparent 0%, rgba(184,212,255,.12) 2%, transparent 3%),
    linear-gradient(transparent 0%, rgba(184,212,255,.1) 2%, transparent 3%),
    linear-gradient(transparent 0%, rgba(184,212,255,.08) 2%, transparent 3%),
    linear-gradient(transparent 0%, rgba(184,212,255,.1) 2%, transparent 3%),
    linear-gradient(transparent 0%, rgba(184,212,255,.09) 2%, transparent 3%),
    linear-gradient(transparent 0%, rgba(184,212,255,.07) 2%, transparent 3%);
  background-size: 200px 100%, 150px 100%, 180px 100%, 220px 100%, 160px 100%, 190px 100%;
  background-position: 10% 0, 25% 0, 45% 0, 65% 0, 80% 0, 95% 0;
  animation: rain 1.2s linear infinite; opacity: .5;
}
@keyframes rain {
  0% { background-position: 10% 0, 25% 0, 45% 0, 65% 0, 80% 0, 95% 0; }
  100% { background-position: 10% 100%, 25% 100%, 45% 100%, 65% 100%, 80% 100%, 95% 100%; }
}
html[data-theme="azure"] .theme-decorations::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(184,212,255,.04) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 60%, rgba(167,139,250,.03) 0%, transparent 35%);
  animation: mistPulse 8s ease-in-out infinite alternate;
}
@keyframes mistPulse { 0% { opacity: .5; } 100% { opacity: 1; } }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -0.04em; margin: 0 0 10px; }
h2 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); letter-spacing: -0.02em; margin: 0 0 18px; }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin: 0 0 8px; }
p { margin: 0; color: var(--text-dim); }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--glow-1),.3); color: #fff; }

/* ---------- Navigation ---------- */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 9, 18, .6); backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
nav::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-1),.3), rgba(var(--glow-2),.3), transparent);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { font-weight: 700; letter-spacing: 0.12em; font-size: 0.88rem; color: var(--accent); transition: color .25s ease; }
.nav-brand:hover { color: var(--accent-bright); }
.nav-links { display: flex; gap: 28px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav-links a { font-size: 0.86rem; color: var(--text-dim); transition: color .25s ease; position: relative; font-weight: 400; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); border-radius: 2px; transform: scaleX(0); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a.active { color: var(--accent-bright); }

/* ---------- Skip Link ---------- */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: #0a0812;
  padding: 8px 16px; z-index: 1000;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- Page Header ---------- */
.page-header {
  max-width: 860px; margin: 0 auto; padding: clamp(56px, 8vw, 80px) 24px 20px;
}
.page-header h1 { background: linear-gradient(120deg, var(--text) 5%, var(--accent-bright) 55%, var(--accent-alt) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-header p { color: var(--text-dim); font-size: 1.05rem; letter-spacing: .01em; }

/* ---------- Page Content ---------- */
.page-content { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(145deg, rgba(var(--glow-1),.07), rgba(var(--glow-2),.03) 60%, rgba(var(--glow-1),.02));
  border: 1px solid rgba(var(--glow-1),.12); border-radius: 16px; padding: 24px 28px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .35s ease, transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.card:hover { border-color: rgba(var(--glow-1),.28); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(var(--glow-1),.08); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 10px 24px; border-radius: 999px; font-size: .92rem; font-weight: 500;
  transition: all .3s cubic-bezier(.4,0,.2,1); text-decoration: none; cursor: pointer;
  letter-spacing: .01em;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-alt)); color: #0a0812; border: none; box-shadow: 0 2px 12px rgba(var(--glow-1),.25), 0 1px 3px rgba(0,0,0,.1); }
.btn-primary:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--glow-1),.35), 0 2px 6px rgba(0,0,0,.12); }
.btn-ghost { border: 1px solid rgba(var(--glow-1),.2); color: var(--text-dim); background: rgba(255,255,255,.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); background: rgba(var(--glow-1),.06); }


.deep-entry { margin-top: 20px; font-size: .7rem; text-align: center; }
.deep-entry a { color: rgba(255,255,255,0.1); text-decoration: none; }
.deep-entry a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px; text-align: center; color: var(--text-muted); font-size: .8rem;
  letter-spacing: .03em;
}

/* ---------- Theme Switcher ---------- */
.theme-switcher { position: relative; display: flex; gap: 6px; align-items: center; }
.theme-btn {
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text-dim);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: .9rem;
  display: grid; place-items: center; transition: all .25s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--glow-1),.08); }
.theme-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: rgba(var(--bg-1),.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 5px; min-width: 136px; display: none; z-index: 200; box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  animation: popIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.theme-pop.open { display: block; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  padding: 7px 10px; border-radius: 8px; font-size: .82rem; text-align: left;
}
.theme-opt:hover, .theme-opt.active { background: rgba(var(--glow-1),.1); color: var(--accent); }
.theme-opt .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; width: 42px; height: 42px;
  border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  color: #0a0812; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 18px; font-weight: 600;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1); z-index: 999;
  box-shadow: 0 8px 28px rgba(var(--glow-1),.35), 0 2px 6px rgba(0,0,0,.2);
}
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 36px rgba(var(--glow-1),.45); }
@media (max-width: 560px) { .back-to-top { bottom: 18px; right: 18px; width: 38px; height: 38px; font-size: 16px; } }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent-deep), var(--accent-alt)); border-radius: 999px; opacity: .6; }
::-webkit-scrollbar-thumb:hover { opacity: .9; }

/* ---------- Loading & Empty States ---------- */
.loading-pulse { display: inline-block; color: var(--text-muted); font-size: .85rem; }
.loading-pulse::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }

.empty-state { color: var(--text-muted); padding: 48px 24px; text-align: center; font-size: .9rem; }
.empty-state .empty-icon { font-size: 2rem; display: block; margin-bottom: 12px; opacity: .4; }

/* ---------- Entrance Animation ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeUp .55s cubic-bezier(.4,0,.2,1) both; }
.fade-in { animation: fadeIn .5s ease both; }
.fade-up-1 { animation-delay: .08s; }
.fade-up-2 { animation-delay: .16s; }
.fade-up-3 { animation-delay: .24s; }
.fade-up-4 { animation-delay: .32s; }
.fade-up-5 { animation-delay: .4s; }
.fade-up-6 { animation-delay: .48s; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; height: 52px; }
  .nav-links { gap: 14px; }
  .page-header { padding: 36px 16px 12px; }
  .page-content { padding: 0 16px 60px; }
  .theme-decorations { opacity: .15; }
}

/* ---------- Animation Toggle ---------- */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}