/* Psanctuary's look for the arrival kit, shared by every Psanctuary page (the entry portal and the
   AstroLog). Load after arrival.css, before the site's own CSS.

   The family look is a spore print: a violet-black base (never neutral grey), Young Serif with
   Figtree, and the print a mushroom cap leaves when it drops its spores. The sibling org,
   psanctuarychurch, shares all of it except the accent: bruise blue here, golden cap there.

   Modes are set on attribute selectors, so a light card in the splash can preview a mode by carrying
   data-theme itself. --spore is the family's own token (the violet of the spores themselves); the
   spore field behind every page and the spore prints read it. */

:root,
[data-theme="spore"] {
  --background: #16111a;
  --foreground: #efe7dc;
  --heading: #f6efe4;
  --muted: #aba0ae;
  --surface: #201926;
  --surface-muted: #2a2131;
  --border: #342a3b;
  --accent: #74bce0;
  --accent-strong: #a3d5ee;
  --on-accent: #06202e;
  --spore: #a88bc9;
  --scrim: rgba(22, 17, 26, 0.62);
  --arr-backdrop: rgba(10, 7, 13, 0.64);
  color-scheme: dark;
}

[data-theme="paper"] {
  --background: #f3f1f4;
  --foreground: #1c1620;
  --heading: #1c1620;
  --muted: #615767;
  --surface: #ffffff;
  --surface-muted: #ece7ef;
  --border: #e0dae4;
  --accent: #1a6a90;
  --accent-strong: #135472;
  --on-accent: #ffffff;
  --spore: #6a4c8c;
  --scrim: rgba(243, 241, 244, 0.7);
  --arr-backdrop: rgba(28, 22, 32, 0.34);
  color-scheme: light;
}

/* @@third-mode */
[data-theme="dusk"] {
  --background: #0e1524;
  --foreground: #e4eaf4;
  --heading: #f1f5fb;
  --muted: #9eadc6;
  --surface: #152036;
  --surface-muted: #1c2943;
  --border: #283857;
  --accent: #8fd0f2;
  --accent-strong: #b9e3f8;
  --on-accent: #05192a;
  --spore: #a7a3e0;
  --scrim: rgba(14, 21, 36, 0.62);
  --arr-backdrop: rgba(6, 10, 18, 0.64);
  color-scheme: dark;
}
/* @@end-third-mode */

/* Blacklight (kit 1.2): the playful mode, this org's alone. Ultraviolet black, glowing lime, spore
   pink, the way a poster glows under a black light. Text stays well above 7:1. */
[data-theme="blacklight"] {
  --background: #0b0612;
  --foreground: #efe6fb;
  --heading: #fbf6ff;
  --muted: #b7a6cc;
  --surface: #150c22;
  --surface-muted: #1f1330;
  --border: #33204b;
  --accent: #c9f76f;
  --accent-strong: #e2ffa8;
  --on-accent: #142004;
  --spore: #f08cf0;
  --scrim: rgba(11, 6, 18, 0.62);
  --arr-backdrop: rgba(6, 3, 10, 0.7);
  color-scheme: dark;
}

/* Shared by every mode: the family's type, and a preview strip that fans out like gills. */
:root,
[data-theme] {
  --font-heading: "Young Serif", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-settings: normal;
  --body-leading: 1.65;
  --perf: color-mix(in srgb, var(--spore) 55%, transparent);
  /* half a print rising from below the strip: the stem ring, then soft-edged gills (soft ramps,
     not hard stops, so thin lines don't shimmer into moiré) */
  --ink: radial-gradient(circle at 50% 210%, var(--surface) 0 27%, var(--accent) 27.5% 30%, transparent 30.5%),
    repeating-conic-gradient(from 0deg at 50% 210%, transparent 0deg, color-mix(in srgb, var(--spore) 70%, transparent) 0.8deg, transparent 1.6deg 3.4deg),
    radial-gradient(farthest-side at 50% 210%, color-mix(in srgb, var(--spore) 26%, var(--surface)) 55%, var(--surface) 100%);
}

/* ── the playful side (kit 1.2): an iridescent sheen, like oil on a cap after rain ─────────────
   Used sparingly: the portal's big title, the current page in the nav, and the map's "you are
   here". Off in reading mode and with more contrast, where plain ink reads best. */
:root {
  --iris: linear-gradient(100deg, var(--spore) 0%, var(--accent) 38%, #9fe0c0 58%, #f0a6d0 80%, var(--spore) 100%);
}
:root:not([data-reading="on"]):not([data-contrast="more"]) .iris {
  background: var(--iris);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* a text-shadow would paint over the clipped sheen; a drop shadow halos it instead */
  text-shadow: none;
  filter: drop-shadow(0 0 10px var(--background));
}
:root:not([data-motion="still"]):not([data-reading="on"]):not([data-contrast="more"]) .iris {
  animation: iris-sheen 14s ease-in-out infinite alternate;
}
@keyframes iris-sheen {
  to {
    background-position: 100% 0;
  }
}
:root:not([data-contrast="more"]) .arr-nav-a[aria-current="page"],
:root:not([data-contrast="more"]) .arr-nav-a.is-current {
  box-shadow: none;
  background-image: var(--iris);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.arr-map-card.is-here {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px color-mix(in srgb, var(--spore) 50%, transparent);
}

/* ── shape: soft and round, like a cap ─────────────────────────────────────────────────── */
:root {
  --arr-radius: 14px;
}
.arr-card-ink {
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: filter 0.4s ease;
}
.arr-card:hover .arr-card-ink {
  filter: brightness(1.18) saturate(1.1);
}
/* Panels catch the light at one corner and the spores at the other. */
.arr-frame.arr-panel {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, var(--border)) 0%, var(--border) 34%, var(--border) 68%, color-mix(in srgb, var(--spore) 50%, var(--border)) 100%);
}

/* ── spore dust: dotted rules instead of solid ones ────────────────────────────────────── */
.arr-rule {
  height: 3px;
  background: radial-gradient(circle, var(--perf) 1.1px, transparent 1.6px) 0 50% / 9px 3px repeat-x;
}
.arr-guide-head {
  border-bottom: 0;
  background: radial-gradient(circle, var(--perf) 1.1px, transparent 1.6px) bottom left / 9px 3px repeat-x;
}
.arr-guide-foot {
  border-top: 0;
  background: radial-gradient(circle, var(--perf) 1.1px, transparent 1.6px) top left / 9px 3px repeat-x;
}
.arr-people:not(.arr-people-compact),
.arr-latest {
  border: 1px solid var(--border);
  border-radius: var(--arr-radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.arr-people:not(.arr-people-compact) > li + li,
.arr-latest > li + li {
  background: radial-gradient(circle, var(--perf) 1px, transparent 1.5px) top left / 9px 3px repeat-x;
}
.arr-latest a:hover {
  background: var(--surface-muted);
}

/* ── the guide's progress glyph becomes a cap seen from underneath: each step lights a gill ─ */
.arr-glyph-wrap {
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--spore) 60%, transparent);
}
.arr-glyph {
  clip-path: circle(42.3% at 50% 50%);
}
.arr-glyph .arr-wedge {
  stroke: var(--surface);
  stroke-width: 1.4px;
  opacity: 0.16;
}
.arr-glyph .arr-wedge.is-lit {
  opacity: 1;
}
/* fine gills over the wedges, and the stem ring at the center */
.arr-glyph-wrap::before {
  content: "";
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 3deg, color-mix(in srgb, var(--surface) 62%, transparent) 0 1.1deg, transparent 1.1deg 7.5deg);
  pointer-events: none;
}
.arr-glyph-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--accent);
  pointer-events: none;
}

/* ── the spore prints turn, slowly: drift turns them, a flush turns them faster ─────────── */
@keyframes spore-turn {
  to {
    transform: rotate(360deg);
  }
}
:root:not([data-motion="still"]) .spore-print {
  animation: spore-turn 420s linear infinite;
}
[data-motion="flush"] .spore-print {
  animation-duration: 160s;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .spore-print {
    animation: none;
  }
}

/* ── reading mode (kit 1.1): Print Paper, still, more contrast, no threads. The spore field behind
   every page fades back to a whisper, so nothing competes with the words. ─────────────────── */
:root[data-reading="on"] #sporefield-canvas {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}