/*
 * God Spark — Zensical Theme Kit
 * Nature/consciousness theme: legible, calm, organic
 */

/* ─── Design Tokens ─── */
:root {
  --godspark-bg:              #f6fbf7;       /* soft morning mist */
  --godspark-surface:         #ffffff;
  --godspark-text:            #1f2e1d;       /* deep forest text */
  --godspark-text-muted:      #4f5d4b;
  --godspark-primary:         #6b8f71;       /* sage */
  --godspark-secondary:       #a3c4a8;       /* leaf mist */
  --godspark-tertiary:        #e8d5b7;       /* warm sand */
  --godspark-accent:          #8da87d;       /* moss */
  --godspark-iridescent:      linear-gradient(135deg, #e8f0e8, #c8d9c4, #a3c4a8, #d4cfb8, #c2d1c0);
  --godspark-aurora:          linear-gradient(160deg,
    #f4f9f1 0%, #eaf2e4 25%, #f7f4ed 50%, #eef1f0 75%, #f6fbf7 100%);
  --godspark-card-bg:         rgba(255, 255, 255, 0.78);
  --godspark-card-border:     rgba(107, 143, 113, 0.22);
  --godspark-glow:            rgba(141, 168, 125, 0.35);
  --godspark-glow-intense:    rgba(107, 143, 113, 0.75);
  --godspark-duration:        0.7s;
  --godspark-ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --godspark-distance:        24px;
}

/* ─── Base atmosphere ─── */
body {
  background-color: var(--godspark-bg);
  background-image: var(--godspark-aurora);
  background-size: 400% 400%;
  background-attachment: fixed;
  color: var(--godspark-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle animated aurora — reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: godspark-breathe 28s ease-in-out infinite;
  }
  @keyframes godspark-breathe {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
}

/* ─── Typography (solid, legible, no cycling) ─── */
h1, h2, h3, h4, h5, h6,
.zensical article h1,
.zensical article h2,
.zensical article h3 {
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--godspark-text);
}

a {
  color: var(--godspark-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s var(--godspark-ease), text-decoration-color 0.25s;
}
a:hover {
  color: var(--godspark-accent);
}

/* ─── Layout helpers ─── */
.zensical article,
.zensical .content,
main,
article {
  position: relative;
  z-index: 1;
}
.zensical article > *,
.zensical .content > *,
main > *,
article > *,
section {
  position: relative;
  z-index: 1;
}

/* ─── Cards ─── */
.zensical .card,
.zensical article section,
section.card,
div.card,
article.card {
  background: var(--godspark-card-bg);
  border: 1px solid var(--godspark-card-border);
  border-radius: 18px;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  padding: 1.6rem 1.8rem;
  box-shadow:
    0 4px 20px rgba(107, 143, 113, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.03);
  transition:
    transform var(--godspark-duration) var(--godspark-ease),
    box-shadow var(--godspark-duration) var(--godspark-ease),
    border-color 0.3s ease;
}
.zensical .card:hover,
section.card:hover,
div.card:hover,
article.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 36px rgba(107, 143, 113, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: rgba(107, 143, 113, 0.45);
}

/* ─── Code blocks — careful not to break Zensical toolbars ─── */
pre {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--godspark-card-border);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
}
code, kbd {
  background: rgba(107, 143, 113, 0.10);
  border: 1px solid rgba(107, 143, 113, 0.18);
  border-radius: 7px;
  color: var(--godspark-text);
}

/* ─── Blockquotes ─── */
blockquote {
  border-left: 3px solid var(--godspark-secondary);
  background: rgba(141, 168, 125, 0.08);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1.2rem;
  margin: 1.4rem 0;
  color: var(--godspark-text-muted);
  font-style: italic;
}

/* ─── HR divider ─── */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--godspark-primary),
    var(--godspark-secondary),
    transparent);
  margin: 2.4rem 0;
}

/* ─── Tables ─── */
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(107, 143, 113, 0.07);
}
th {
  background: linear-gradient(135deg, var(--godspark-primary), var(--godspark-accent));
  color: #fff;
  font-weight: 550;
}
td {
  background: var(--godspark-surface);
  border-bottom: 1px solid rgba(107, 143, 113, 0.12);
}

/* ─── CTA buttons only (not Zensical toolbar icons) ─── */
button.cta,
a.cta,
.zensical .cta,
button[class*="godspark"],
a[class*="godspark"] {
  background: linear-gradient(135deg, var(--godspark-primary), var(--godspark-accent));
  color: #fff;
  font-weight: 550;
  border: none;
  border-radius: 50px;
  padding: 0.55em 1.5em;
  cursor: pointer;
  transition: opacity 0.25s, box-shadow 0.25s;
  text-decoration: none;
  display: inline-block;
}
button.cta:hover,
a.cta:hover,
.zensical .cta:hover,
button[class*="godspark"]:hover,
a[class*="godspark"]:hover {
  opacity: 0.92;
  box-shadow: 0 4px 18px var(--godspark-glow);
}

/* ─── Scroll reveal ─── */
.godspark-reveal {
  opacity: 0;
  transform: translateY(var(--godspark-distance));
  transition:
    opacity var(--godspark-duration) var(--godspark-ease),
    transform var(--godspark-duration) var(--godspark-ease);
}
.godspark-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.godspark-reveal.is-visible > * {
  opacity: 0;
  transform: translateY(var(--godspark-distance));
  transition:
    opacity var(--godspark-duration) var(--godspark-ease),
    transform var(--godspark-duration) var(--godspark-ease);
}
.godspark-reveal.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.godspark-reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.godspark-reveal.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.godspark-reveal.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.godspark-reveal.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.godspark-reveal.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.godspark-reveal.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tone: disable cycling header colors ─── */
.md-header, .md-header__inner, .md-header__button, .md-icon {
  animation: none !important;
}

/* ─── Tone: disable header color cycling backgrounds ─── */
[data-md-color-component="header"] {
  animation: none !important;
}

/* ─── Tone: no shimmer on headings ─── */
h1, h2, h3, h4, h5, h6,
.zensical article h1,
.zensical article h2,
.zensical article h3 {
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--godspark-text) !important;
  background-clip: unset !important;
  color: var(--godspark-text);
}

/* ─── Cursor glow (opt-in via attribute) ─── */
[godspark-glow]::after,
.godspark-glow-active::after {
  content: "";
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  background: radial-gradient(
    circle,
    rgba(141, 168, 125, 0.22) 0%,
    rgba(107, 143, 113, 0.08) 35%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  will-change: transform, opacity;
}
[godspark-glow]::after,
.godspark-glow-active::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [godspark-glow]::after,
  .godspark-glow-active::after {
    display: none !important;
  }
  .godspark-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .godspark-reveal.is-visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Selection ─── */
::selection {
  background: var(--godspark-primary);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--godspark-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--godspark-bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--godspark-primary),
    var(--godspark-accent),
    var(--godspark-secondary));
  border-radius: 99px;
}

/* ─── Print ─── */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }
  .godspark-glow-active::after,
  [godspark-glow]::after { display: none !important; }
}

/* ─── Hero image on homepage ─── */
.godspark-hero {
  margin: 1.2rem 0 2rem;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--godspark-card-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)),
    var(--godspark-aurora);
  background-blend-mode: overlay;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.godspark-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
}
.godspark-hero figcaption {
  padding: 0.8rem 1rem;
  color: var(--godspark-text-muted);
  font-size: 0.92rem;
}