/* ============================================
   ROOT TOKENS · მისტიკური პალიტრა
   ============================================ */
:root {
  /* THEME · WINE (default) */
  --void: #0a0306;
  --night: #1a0509;
  --shadow: #3a0a14;
  --wine: #5a1020;
  --ink: #1a0509;

  --gold: #d4b46a;
  --gold-bright: #f5e6c4;
  --gold-dim: #8a7340;
  --ember: #b8763a;

  --moon: #f0e4d0;
  --mist: #b8a888;
  --mystic: #5a1020;
  --blood: #7a142a;
  --line: rgba(212, 180, 106, .16);
  --line-strong: rgba(245, 230, 196, .34);

  --bg-glow-a: rgba(90, 16, 32, .24);
  --bg-glow-b: rgba(212, 180, 106, .12);

  --serif: "Noto Serif Georgian", "Cormorant Garamond", serif;
  --display: "Noto Serif Georgian", "Cinzel", serif;
  --script: "Italianno", "Cormorant Garamond", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* THEME · WINE — wine red & gold */
[data-theme="wine"] {
  --void: #0a0306;
  --night: #1a0509;
  --shadow: #3a0a14;
  --wine: #5a1020;
  --ink: #1a0509;

  --gold: #d4b46a;
  --gold-bright: #f5e6c4;
  --gold-dim: #8a7340;
  --ember: #b8763a;

  --moon: #f0e4d0;
  --mist: #b8a888;
  --mystic: #5a1020;
  --blood: #7a142a;
  --line: rgba(212, 180, 106, .16);
  --line-strong: rgba(245, 230, 196, .34);

  --bg-glow-a: rgba(90, 16, 32, .24);
  --bg-glow-b: rgba(212, 180, 106, .12);
}

/* THEME · MIDNIGHT — deep navy & soft gold */
[data-theme="midnight"] {
  --void: #03050a;
  --night: #060a18;
  --shadow: #0c1530;
  --wine: #1a2858;
  --ink: #060a18;

  --gold: #c8b88a;
  --gold-bright: #ece0b8;
  --gold-dim: #7f755a;
  --ember: #8a7154;

  --moon: #e6dac4;
  --mist: #aea18a;
  --mystic: #1a2858;
  --blood: #2a3058;
  --line: rgba(200, 184, 138, .16);
  --line-strong: rgba(236, 224, 184, .34);

  --bg-glow-a: rgba(26, 40, 88, .26);
  --bg-glow-b: rgba(200, 184, 138, .12);
}

/* THEME · FOREST — emerald & antique gold */
[data-theme="forest"] {
  --void: #03080a;
  --night: #061110;
  --shadow: #0c2018;
  --wine: #133028;
  --ink: #061110;

  --gold: #cbb47e;
  --gold-bright: #ede2bc;
  --gold-dim: #827452;
  --ember: #9a7440;

  --moon: #e6d8c4;
  --mist: #aea288;
  --mystic: #133028;
  --blood: #25422e;
  --line: rgba(203, 180, 126, .16);
  --line-strong: rgba(237, 226, 188, .34);

  --bg-glow-a: rgba(19, 48, 40, .28);
  --bg-glow-b: rgba(203, 180, 126, .12);
}

/* THEME · GOLD — brown & bright gold */
[data-theme="gold"] {
  --void: #0a0805;
  --night: #15110a;
  --shadow: #2e2410;
  --wine: #4a3818;
  --ink: #15110a;

  --gold: #e8c876;
  --gold-bright: #fbeec0;
  --gold-dim: #927c48;
  --ember: #c98a40;

  --moon: #f5ecd6;
  --mist: #c8b888;
  --mystic: #4a3818;
  --blood: #6a3a18;
  --line: rgba(232, 200, 118, .18);
  --line-strong: rgba(251, 238, 192, .36);

  --bg-glow-a: rgba(74, 56, 24, .3);
  --bg-glow-b: rgba(232, 200, 118, .14);
}

/* THEME · VIOLET — dark violet & gold */
[data-theme="violet"] {
  --void: #07050d;
  --night: #110a1c;
  --shadow: #221335;
  --wine: #3a1d5a;
  --ink: #110a1c;

  --gold: #d4b46a;
  --gold-bright: #f3e5b6;
  --gold-dim: #8a7340;
  --ember: #9a6ac8;

  --moon: #efe6f5;
  --mist: #b8a8c8;
  --mystic: #3a1d5a;
  --blood: #5a2a78;
  --line: rgba(212, 180, 106, .16);
  --line-strong: rgba(243, 229, 182, .34);

  --bg-glow-a: rgba(58, 29, 90, .3);
  --bg-glow-b: rgba(212, 180, 106, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root,
[data-theme] {
  transition: background-color .6s ease, color .6s ease;
}

body {
  background: var(--void);
  color: var(--moon);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  transition: background .8s var(--ease), color .8s var(--ease);
}
/* Hide the OS cursor only after the custom-cursor JS has initialised, so
   if that script fails to run (cache, error, mobile) users still see a cursor. */
body.has-custom-cursor { cursor: none; }

/* ============================================
   ANIMATED COSMIC BACKGROUND
   ============================================ */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 20% 10%, var(--bg-glow-a), transparent 50%),
    radial-gradient(ellipse at 80% 80%, var(--bg-glow-b), transparent 55%),
    radial-gradient(ellipse at 50% 50%, var(--shadow), var(--void) 70%),
    var(--void);
  transition: background .8s var(--ease);
}

#stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.mist {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 70%, rgba(107,68,136,.08), transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(201,169,97,.04), transparent 35%);
  animation: mistDrift 30s ease-in-out infinite alternate;
  filter: blur(40px);
}

@keyframes mistDrift {
  0%   { transform: translate(0,0) scale(1); opacity: .8; }
  50%  { transform: translate(-30px, 20px) scale(1.05); opacity: 1; }
  100% { transform: translate(20px, -15px) scale(.95); opacity: .7; }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  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 baseFrequency='.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' /%3E%3C/svg%3E");
}

/* ============================================
   BACKGROUND MODES · ფონური ანიმაციები
   ============================================ */

/* SIGILS · floating alchemical glyphs */
#sigils {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-bg="sigilla"] #sigils,
body[data-bg="sigilla"] #sigils { display: block; }
html[data-bg="sigilla"] #stars,
body[data-bg="sigilla"] #stars { display: none; }
.sigil {
  position: absolute;
  color: var(--gold);
  font-family: var(--display);
  font-size: 28px;
  opacity: 0;
  text-shadow: 0 0 12px currentColor;
  animation: sigilDrift linear infinite;
  user-select: none;
}
@keyframes sigilDrift {
  0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .35; }
  90%  { opacity: .35; }
  100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}

/* EMBERS · rising sparks */
#embers {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-bg="favillae"] #embers,
body[data-bg="favillae"] #embers { display: block; }
html[data-bg="favillae"] #stars,
body[data-bg="favillae"] #stars { display: none; }
.ember-particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-bright), 0 0 16px var(--ember);
  bottom: -10px;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: .6; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 30px)) scale(.2); opacity: 0; }
}

/* VEIL · dense crawling mist */
#veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-bg="caligo"] #veil,
body[data-bg="caligo"] #veil { display: block; }
html[data-bg="caligo"] #stars,
body[data-bg="caligo"] #stars { display: none; }
.veil-cloud {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
  animation: veilCrawl linear infinite;
}
.veil-cloud:nth-child(1) { background: var(--mystic); top: -20%; left: -15%; animation-duration: 35s; }
.veil-cloud:nth-child(2) { background: var(--blood); top: 30%; right: -20%; animation-duration: 50s; animation-delay: -10s; }
.veil-cloud:nth-child(3) { background: var(--ember); bottom: -25%; left: 20%; animation-duration: 45s; animation-delay: -22s; opacity: .25; }
.veil-cloud:nth-child(4) { background: var(--mystic); top: 50%; left: 40%; animation-duration: 60s; animation-delay: -33s; opacity: .25; }
@keyframes veilCrawl {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20vw, 15vh) scale(1.15); }
  66%  { transform: translate(-15vw, 25vh) scale(.9); }
  100% { transform: translate(0, 0) scale(1); }
}

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

  #stars,
  #sigils,
  #embers,
  #veil {
    display: none !important;
  }
}