/* Mystic theme — ported from the original styles.css.
   Tailwind utility classes are provided by the Play CDN (configured in base.html);
   this file supplies the design tokens, fonts, component classes and animations. */

:root {
  --radius: 0.75rem;

  /* Themeable brand colours (overridden by the admin Appearance editor).
     Expressed as OKLCH L C H triplets so opacity modifiers work everywhere. */
  --primary-oklch: 0.78 0.18 195;     /* electric cyan */
  --secondary-oklch: 0.62 0.22 305;   /* violet */

  /* Future mystic palette */
  --background: oklch(0.13 0.04 280);
  --foreground: oklch(0.96 0.02 270);

  --card: oklch(0.18 0.05 280 / 0.6);
  --card-foreground: oklch(0.96 0.02 270);

  --popover: oklch(0.16 0.05 280);
  --popover-foreground: oklch(0.96 0.02 270);

  --primary: oklch(var(--primary-oklch));
  --primary-foreground: oklch(0.13 0.04 280);

  --secondary: oklch(var(--secondary-oklch));
  --secondary-foreground: oklch(0.98 0.01 270);

  --mystic: oklch(var(--secondary-oklch));
  --mystic-foreground: oklch(0.98 0.01 270);

  --arcane: oklch(0.82 0.16 85);              /* arcane gold */
  --rune: oklch(0.88 0.14 180);

  --muted: oklch(0.22 0.04 280);
  --muted-foreground: oklch(0.7 0.04 270);

  --accent: oklch(0.3 0.1 300);
  --accent-foreground: oklch(0.96 0.02 270);

  --destructive: oklch(0.62 0.24 25);
  --destructive-foreground: oklch(0.98 0.01 270);

  --border: oklch(0.55 0.15 290 / 0.25);
  --input: oklch(0.55 0.15 290 / 0.2);
  --ring: oklch(var(--primary-oklch));

  --font-display: "Orbitron", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --gradient-mystic: linear-gradient(135deg, oklch(var(--secondary-oklch)), oklch(var(--primary-oklch)));
  --gradient-arcane: linear-gradient(135deg, oklch(0.82 0.16 85), oklch(var(--secondary-oklch)));
  --gradient-cosmos: radial-gradient(ellipse at top, oklch(0.25 0.12 290 / 0.6), transparent 60%),
                     radial-gradient(ellipse at bottom right, oklch(0.3 0.18 200 / 0.4), transparent 55%);
  --glow-cyan: 0 0 30px oklch(var(--primary-oklch) / 0.45), 0 0 80px oklch(var(--primary-oklch) / 0.2);
  --glow-violet: 0 0 30px oklch(var(--secondary-oklch) / 0.5), 0 0 90px oklch(var(--secondary-oklch) / 0.25);
  --shadow-mystic: 0 20px 60px -20px oklch(var(--secondary-oklch) / 0.5);
}

/* Fonts (Orbitron / Space Grotesk / JetBrains Mono) are loaded via the Google
   Fonts <link> in templates/_head.html. */

* {
  border-color: var(--border);
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  background-image: var(--gradient-cosmos);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* ---- component classes ---- */
.glass {
  background: linear-gradient(180deg, oklch(0.22 0.06 285 / 0.55), oklch(0.15 0.04 280 / 0.55));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid oklch(0.55 0.15 290 / 0.25);
}
.glass-strong {
  background: linear-gradient(180deg, oklch(0.25 0.07 285 / 0.75), oklch(0.16 0.04 280 / 0.75));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid oklch(0.55 0.15 290 / 0.35);
}
.text-gradient-mystic {
  background: var(--gradient-mystic);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-arcane {
  background: var(--gradient-arcane);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn-mystic {
  position: relative;
  background: var(--gradient-mystic);
  color: var(--mystic-foreground);
  box-shadow: var(--glow-cyan);
  transition: transform .2s ease, box-shadow .3s ease, filter .3s ease;
  border: none;
  cursor: pointer;
}
.btn-mystic:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: var(--glow-violet), var(--glow-cyan);
}
.rune-border {
  position: relative;
}
.rune-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, oklch(var(--primary-oklch) / 0.7), oklch(var(--secondary-oklch) / 0.7), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.grid-runes {
  background-image:
    linear-gradient(oklch(var(--primary-oklch) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-oklch) / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* line clamp helper (used by script cards) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom page content (the page maker outputs HTML into .page-prose) */
.page-prose { line-height: 1.7; }
.page-prose > :first-child { margin-top: 0; }
.page-prose h1, .page-prose h2, .page-prose h3, .page-prose h4 {
  font-family: var(--font-display);
  color: var(--foreground);
  margin: 1.6em 0 .5em;
  line-height: 1.2;
}
.page-prose h2 { font-size: 1.6rem; }
.page-prose h3 { font-size: 1.25rem; }
.page-prose h4 { font-size: 1.05rem; }
.page-prose p, .page-prose li { color: var(--muted-foreground); }
.page-prose p { margin: 0 0 1em; }
.page-prose a { color: var(--primary); text-decoration: underline; }
.page-prose ul, .page-prose ol { margin: 0 0 1em 1.4em; }
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose li { margin: .3em 0; }
.page-prose strong { color: var(--foreground); }
.page-prose blockquote {
  border-left: 2px solid var(--primary);
  padding-left: 1em;
  margin: 1em 0;
  color: var(--muted-foreground);
}
.page-prose code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: oklch(0.16 0.05 280 / 0.7);
  padding: .1em .35em;
  border-radius: 5px;
}
.page-prose pre {
  background: oklch(0.16 0.05 280 / 0.7);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1em;
  overflow-x: auto;
  margin: 0 0 1em;
}
.page-prose pre code { background: none; padding: 0; }
.page-prose img { max-width: 100%; border-radius: 12px; margin: 1em 0; }
.page-prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

/* ---- animations ---- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px oklch(var(--primary-oklch) / 0.3); }
  50% { box-shadow: 0 0 40px oklch(var(--primary-oklch) / 0.6), 0 0 80px oklch(var(--secondary-oklch) / 0.4); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse {
  50% { opacity: .5; }
}
.animate-float { animation: float-slow 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 40s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent, oklch(0.78 0.18 195 / 0.15), transparent);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}