/* =========================================
   MYSTICAL HANDWRITING TEXT SYSTEM
   - animated in light and dark mode
   - dark mode uses brighter colors
========================================= */

/* Optional: import Kalam if you are using it */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Unbounded:wght@400;600;700&display=swap');

/* =========================
   THEME TOKENS
========================= */

:root {
  --mystic-gradient: linear-gradient(
    90deg,
    #c84c66,
    #c07a3f,
    #b59a2e,
    #3f9c74,
    #3b86b8,
    #6b6fb8,
    #9b5fbf,
    #c84ca0,
    #c84c66
  );
  --page-bg:
    radial-gradient(circle at top left, rgba(214, 140, 115, 0.18), transparent 32rem),
    radial-gradient(circle at top right, rgba(155, 183, 164, 0.18), transparent 30rem),
    var(--cream);
}

html[data-theme="dark"] {
  --mystic-gradient: linear-gradient(
    90deg,
    #ff6b8a,
    #ffb86b,
    #ffe66d,
    #7dffb3,
    #6be7ff,
    #7aa2ff,
    #b692ff,
    #ff8de1,
    #ff6b8a
  );

  --page-bg:
    radial-gradient(circle at top left, rgba(214, 140, 115, 0.18), transparent 32rem),
    radial-gradient(circle at top right, rgba(155, 183, 164, 0.14), transparent 30rem),
    var(--dark);
}

/* =========================
   BASE TEXT
========================= */

.mystic-text,
.mystic-span {
  display: inline-block;

  font-family: "Kalam", system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;

  line-height: 1.35;
  letter-spacing: 0.01em;

  background: var(--mystic-gradient);
  background-size: 220% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  isolation: isolate;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  animation: mystic-shift 18s linear infinite;
  will-change: background-position;
}

/* =========================
   ANIMATION
========================= */

@keyframes mystic-shift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

/* Dark mode keeps animation now */
html[data-theme="dark"] .mystic-text,
html[data-theme="dark"] .mystic-span {
  animation: mystic-shift 18s linear infinite;
}

/* =========================
   FONT VARIANT
========================= */

.mystic-playful {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* =========================
   SIZE SYSTEM
========================= */

.mystic-xl {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
}

.mystic-lg {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
}

.mystic-md {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.mystic-sm {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================
   EMPHASIS
========================= */

.mystic-soft {
  opacity: 0.85;
}

.mystic-bold {
  font-weight: 700;
}

/* =========================
   GLOW
========================= */

.mystic-glow {
  text-shadow:
    0 0 6px rgba(200, 120, 150, 0.18),
    0 0 12px rgba(120, 160, 200, 0.14);
}

html[data-theme="dark"] .mystic-glow {
  text-shadow:
    0 0 8px rgba(255, 107, 138, 0.22),
    0 0 16px rgba(107, 231, 255, 0.18),
    0 0 24px rgba(182, 146, 255, 0.14);
}

/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {
  .mystic-text,
  .mystic-span,
  html[data-theme="dark"] .mystic-text,
  html[data-theme="dark"] .mystic-span {
    animation: none;
  }
}