/* ══════════════════════════════════════════════════════════════
   語道 · THEMES.CSS  —  THE VOID EDITION
   
   Palette pulled from:  deep space void · cult ritual horror · evil eye
   Black — the absence before anything existed
   Red   — blood, warning, the ruptured
   Purple — bruised dark matter, deep cosmic wrong
   Yellow — the eye. the iris. the thing that watches.
   
   This file owns the atmosphere. Variables + animation + body layer.
   main.css touches none of this directly — it only reads the vars.
   ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   ANIMATABLE CUSTOM PROPERTIES (Houdini)
   Allows CSS to animate --variables natively.
   Falls back silently in unsupporting browsers.
═══════════════════════════════════════════ */
@property --glow-red {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(160, 10, 30, 0.0);
}
@property --glow-eye {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(185, 138, 8, 0.0);
}
@property --nebula-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.04;
}


/* ═══════════════════════════════════════════
   ROOT VARIABLES — THE VOID PALETTE
═══════════════════════════════════════════ */
:root {

  /* Backgrounds — pure void, no warmth */
  --bg:      #050508;
  --bg2:     #08070e;
  --card:    #0c0b14;
  --cardh:   #111028;

  /* Borders — purple veins, barely visible */
  --b:       rgba(120, 60, 180, 0.12);
  --b2:      rgba(140, 70, 200, 0.22);

  /* Red — blood, rupture, alarm */
  --red:     #a00a1e;
  --red2:    #c41230;

  /* Eye Yellow — the iris. sickly. watching. */
  --gold:    #b8860b;
  --gold2:   #d4a20f;

  /* Purple — bruised space, cult ritual */
  --void:    #1a0a2e;
  --void2:   #2d1458;
  --purple:  #6b21a8;
  --purple2: #8b31d0;

  /* Ok / survival green */
  --ok:      #1a7a5a;

  /* Text */
  --tx:      #e0dce8;
  --tx2:     #7a708a;
  --tx3:     #35303f;

  /* Derived glow values */
  --red-glow:    rgba(160, 10, 30, 0.22);
  --eye-glow:    rgba(185, 138, 8, 0.20);
  --purple-glow: rgba(107, 33, 168, 0.25);
  --ok-glow:     rgba(26, 122, 90, 0.18);

  /* Typography */
  --font-ui:       'Sora', sans-serif;
  --font-jp:       'Noto Sans JP', sans-serif;
  --font-jp-serif: 'Noto Serif JP', serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  /* Motion */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 100ms;
  --t-base: 200ms;
  --t-slow: 350ms;

  /* Z layers */
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}


/* ═══════════════════════════════════════════
   KEYFRAMES — THE VOID BREATHES
═══════════════════════════════════════════ */

/* The eye opens and closes — slow, patient */
@keyframes eye-pulse {
  0%, 100% { opacity: 0.7; }
  45%       { opacity: 1.0; }
  55%       { opacity: 1.0; }
}

/* XP bar — shifts red → purple → eye yellow */
@keyframes xp-eye-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Nav brand kanji — very slow ritual hue drift */
@keyframes kanji-ritual {
  0%   { filter: hue-rotate(0deg)   brightness(1);    }
  33%  { filter: hue-rotate(-15deg) brightness(1.1);  }
  66%  { filter: hue-rotate(20deg)  brightness(0.95); }
  100% { filter: hue-rotate(0deg)   brightness(1);    }
}

/* Kanji of the day — the character stares back */
@keyframes kanji-stare {
  0%, 80%, 100% {
    text-shadow: 0 0 30px rgba(185,138,8,0.15), 0 0 60px rgba(185,138,8,0.05);
  }
  88% {
    text-shadow:
      0 0 50px rgba(185,138,8,0.50),
      0 0 80px rgba(185,138,8,0.20),
      0 0 120px rgba(160,10,30,0.10);
  }
}

/* Level badge — throbs like a wound */
@keyframes badge-throb {
  0%, 100% { box-shadow: 0 0 14px rgba(160,10,30,0.22); }
  50%       { box-shadow: 0 0 28px rgba(160,10,30,0.45), 0 0 60px rgba(107,33,168,0.20); }
}

/* Review badge — the eye counts your debt */
@keyframes review-eye {
  0%, 100% { box-shadow: 0 0 10px rgba(185,138,8,0.20); }
  50%       { box-shadow: 0 0 24px rgba(185,138,8,0.55), 0 0 44px rgba(185,138,8,0.12); }
}

/* Nebula breathing */
@keyframes nebula-shift {
  0%, 100% { opacity: 0.85; filter: blur(40px) saturate(1.2); }
  50%       { opacity: 1.00; filter: blur(32px) saturate(1.7); }
}

/* Card border pulse — the altar is aware of you */
@keyframes altar-border {
  0%, 100% { border-color: rgba(120, 60, 180, 0.12); }
  50%       { border-color: rgba(140, 70, 200, 0.24); }
}


/* ═══════════════════════════════════════════
   ATMOSPHERIC BODY LAYER
   Stars, nebula, grain — the void around everything.
═══════════════════════════════════════════ */

body {
  background-color: var(--bg);
  /* Fine horror grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  position: relative;
  isolation: isolate;
}

/* ── Star field ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    /* Eye-yellow stars — the watching ones */
    radial-gradient(1px   1px   at 8%  12%, rgba(212,162,15,0.90) 0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 7%,  rgba(212,162,15,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 51% 3%,  rgba(212,162,15,1.00) 0%, transparent 100%),
    radial-gradient(1px   1px   at 73% 88%, rgba(212,162,15,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 19% 94%, rgba(212,162,15,0.80) 0%, transparent 100%),
    /* Red stars — the dying ones */
    radial-gradient(1px   1px   at 35% 22%, rgba(196,18,48,0.70)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 45%, rgba(196,18,48,0.90)  0%, transparent 100%),
    radial-gradient(1px   1px   at 82% 61%, rgba(196,18,48,0.50)  0%, transparent 100%),
    radial-gradient(1px   1px   at 14% 77%, rgba(196,18,48,0.60)  0%, transparent 100%),
    /* Purple stars — deep space */
    radial-gradient(1px   1px   at 25% 38%, rgba(139,49,208,0.80) 0%, transparent 100%),
    radial-gradient(1px   1px   at 58% 72%, rgba(139,49,208,0.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 55%, rgba(139,49,208,1.00) 0%, transparent 100%),
    radial-gradient(1px   1px   at 88% 33%, rgba(139,49,208,0.70) 0%, transparent 100%),
    /* Cold white stars — distant, indifferent */
    radial-gradient(1px   1px   at 6%  52%, rgba(224,220,232,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 31% 68%, rgba(224,220,232,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 18%, rgba(224,220,232,0.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 77% 82%, rgba(224,220,232,0.80) 0%, transparent 100%),
    radial-gradient(1px   1px   at 48% 91%, rgba(224,220,232,0.30) 0%, transparent 100%),
    radial-gradient(1px   1px   at 96% 47%, rgba(224,220,232,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 17% 29%, rgba(224,220,232,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 39% 8%,  rgba(224,220,232,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85% 15%, rgba(224,220,232,0.30) 0%, transparent 100%),
    radial-gradient(1px   1px   at 54% 36%, rgba(224,220,232,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 71% 64%, rgba(224,220,232,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 83%, rgba(224,220,232,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 3%  71%, rgba(224,220,232,0.30) 0%, transparent 100%),
    radial-gradient(1px   1px   at 93% 25%, rgba(224,220,232,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 42% 47%, rgba(224,220,232,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 64% 96%, rgba(224,220,232,0.30) 0%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── Nebula — the purple-red bruise in deep space ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 80% 15%,
      rgba(80, 20, 130, 0.22) 0%,
      rgba(40, 8,  80,  0.12) 40%,
      transparent 70%),
    radial-gradient(ellipse 45% 35% at 15% 80%,
      rgba(100, 15, 40, 0.16) 0%,
      rgba(60,  10, 80, 0.09) 45%,
      transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 50%,
      rgba(120, 80, 0, 0.04) 0%,
      transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 0%,
      rgba(10, 5, 20, 0.65) 0%,
      transparent 60%);
  filter: blur(38px) saturate(1.3);
  animation: nebula-shift 18s ease-in-out infinite;
}


/* ═══════════════════════════════════════════
   COMPONENT OVERRIDES
   Specific pieces that need atmospheric treatment
   beyond what main.css variables can handle alone.
═══════════════════════════════════════════ */

/* XP bar — red → purple → eye yellow, cycling */
.xp-bar {
  background: linear-gradient(90deg,
    var(--red2),
    var(--purple2),
    var(--gold2),
    var(--red2)
  ) !important;
  background-size: 300% 100% !important;
  animation: xp-eye-shift 8s ease-in-out infinite;
}

/* Nav brand — gradient through the full palette */
.nav-brand-kanji {
  background: linear-gradient(135deg,
    var(--red2)    0%,
    var(--purple2) 45%,
    var(--gold2)   100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kanji-ritual 20s ease-in-out infinite;
  display: inline-block;
}

/* Level badge — bleeds into purple */
.level-badge {
  animation: badge-throb 4s ease-in-out infinite;
  background: linear-gradient(135deg,
    var(--red)    0%,
    var(--purple) 60%,
    var(--red2)   100%
  ) !important;
}

/* Kanji of the day — the eye stares */
.kanji-day-char {
  animation: kanji-stare 9s ease-in-out infinite;
  color: var(--gold2) !important;
}

/* Review badge — eye yellow glow */
.review-count-badge {
  background: linear-gradient(135deg, var(--red), var(--purple)) !important;
  animation: review-eye 5s ease-in-out infinite 1s;
}

/* Cards breathe their border */
.card {
  animation: altar-border 12s ease-in-out infinite;
}

/* Active nav accent line — full palette stripe */
.nav-item.active::before {
  background: linear-gradient(180deg,
    var(--red2),
    var(--purple2),
    var(--gold2)
  ) !important;
}

/* Nav backgrounds — absolute void with blur */
.nav-desktop {
  background: rgba(5, 4, 8, 0.97) !important;
  border-right-color: rgba(120, 60, 180, 0.10) !important;
  backdrop-filter: blur(12px);
}
.nav-mobile {
  background: rgba(5, 4, 8, 0.97) !important;
  border-top-color: rgba(120, 60, 180, 0.10) !important;
  backdrop-filter: blur(12px);
}

/* Nav item states */
.nav-item.active { background: rgba(26, 10, 46, 0.85) !important; }
.nav-item:hover  { background: rgba(15, 10, 25, 0.90) !important; }

/* Primary button — ritual blend */
.btn-primary {
  background: linear-gradient(135deg,
    var(--red)    0%,
    var(--red2)   50%,
    rgba(107,33,168,0.5) 100%
  ) !important;
  box-shadow: 0 0 0 1px rgba(107, 33, 168, 0.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--red2) 0%, var(--purple) 100%) !important;
  box-shadow: 0 4px 24px var(--red-glow), 0 0 0 1px rgba(107,33,168,0.40) !important;
}

/* Lesson CTA card — blood borders */
.lesson-cta-card {
  border-color: rgba(160, 10, 30, 0.32) !important;
}
.lesson-cta-card::after {
  background: radial-gradient(circle, rgba(160,10,30,0.18), transparent 70%) !important;
}

/* Kanji day card — eye glow */
.kanji-day-card {
  border-color: rgba(185, 138, 8, 0.22) !important;
}
.kanji-day-card::before {
  background: radial-gradient(circle, rgba(185,138,8,0.14), transparent 70%) !important;
}
.kanji-day-label {
  color: var(--gold2) !important;
  letter-spacing: 0.14em;
}

/* Profile card — purple nebula glow */
.profile-card::before {
  background: radial-gradient(circle, rgba(107,33,168,0.18), transparent 70%) !important;
}

/* Lesson eyebrow — eye yellow */
.lesson-cta-eyebrow { color: var(--gold2) !important; }

/* Settings section titles */
.settings-section-title          { color: var(--purple) !important; letter-spacing: 0.12em; }
.settings-section-title--danger  { color: var(--red2)   !important; }

/* Furigana toggle on — purple not green */
.toggle-switch[aria-checked="true"] {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}

/* Coming soon icons — purple ghost gradient */
.coming-soon-icon {
  background: linear-gradient(135deg, var(--tx3), var(--purple), var(--tx2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Streak counters — eye yellow */
#sidebar-streak,
.streak-count { color: var(--gold2) !important; }

/* Scrollbars — purple veins */
::-webkit-scrollbar-thumb       { background: var(--void2)  !important; }
::-webkit-scrollbar-thumb:hover { background: var(--purple) !important; }

/* Focus rings — purple */
:focus-visible { outline-color: var(--purple2) !important; }