/* ============================================================
   KUMAYA WORLD — SACRED LIBRARY DESIGN SYSTEM
   Extracted from the Cartographer's Atelier mockup.
   Aesthetic: 19th-century navigator's room — vellum, brass,
   ink, candle warmth. Celestial held to a whisper.
   Use this stylesheet on chambers/pages that have entered
   the new design language. Do NOT use on dark legacy pages.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --kw-indigo:        #24324A;  /* Compass Indigo — primary text, primary surface */
  --kw-night:         #35506B;  /* Night-Sky Blue — secondary text, accents */
  --kw-ivory:         #F5F0E6;  /* Aged Ivory — primary background */
  --kw-parchment:     #DDD2BF;  /* Parchment Sand — borders, dividers, soft surfaces */
  --kw-gold:          #C6A15B;  /* Burnished Gold — accent lines, hover, eyebrow */
  --kw-ember:         #A86A3A;  /* Ember Accent — used VERY sparingly, focal dots only */

  --kw-indigo-10:     rgba(36, 50, 74, 0.10);
  --kw-indigo-20:     rgba(36, 50, 74, 0.20);
  --kw-indigo-50:     rgba(36, 50, 74, 0.50);
  --kw-indigo-80:     rgba(36, 50, 74, 0.80);
  --kw-night-30:      rgba(53, 80, 107, 0.30);
  --kw-night-60:      rgba(53, 80, 107, 0.60);
  --kw-gold-20:       rgba(198, 161, 91, 0.20);
  --kw-gold-30:       rgba(198, 161, 91, 0.30);
  --kw-gold-50:       rgba(198, 161, 91, 0.50);

  --kw-font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --kw-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset within a sacred chamber ---------- */
.sl-chamber,
.sl-chamber * {
  box-sizing: border-box;
}

.sl-chamber {
  background: var(--kw-ivory);
  color: var(--kw-indigo);
  font-family: var(--kw-font-sans);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sl-chamber ::selection {
  background: var(--kw-gold);
  color: var(--kw-ivory);
}

/* ---------- Vellum texture overlay ---------- */
.sl-vellum {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  z-index: 1;
}

/* ---------- Corner-marked frame (cartographer's chart border) ---------- */
.sl-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid var(--kw-parchment);
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sl-frame > .sl-frame-row {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}
.sl-frame .sl-frame-mark {
  width: 8px;
  height: 8px;
  border: 1px solid var(--kw-gold);
}
@media (min-width: 768px) {
  .sl-frame { inset: 40px; }
}

/* ---------- Layout containers ---------- */
.sl-stage {
  position: relative;
  z-index: 20;
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 32px;
  text-align: center;
}
@media (min-width: 768px) {
  .sl-stage { padding: 96px 64px; }
}

/* ---------- Eyebrow / chamber tag ---------- */
.sl-eyebrow {
  display: inline-block;
  font-family: var(--kw-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kw-gold);
  margin-bottom: 24px;
}

/* ---------- Display titles ---------- */
.sl-title {
  font-family: var(--kw-font-serif);
  font-weight: 500;
  color: var(--kw-indigo);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 32px;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
}

.sl-title-rule {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--kw-gold-50);
  margin: 0 auto;
}

/* ---------- Ceremonial copy ---------- */
.sl-ceremonial {
  font-family: var(--kw-font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--kw-night);
  line-height: 1.55;
  margin: 0 0 16px;
}

.sl-prose {
  font-family: var(--kw-font-sans);
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--kw-indigo-80);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Primary CTA (indigo with gold inner frame on hover) ---------- */
.sl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 48px;
  background: var(--kw-indigo);
  color: var(--kw-ivory);
  font-family: var(--kw-font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.5s ease-out;
}
.sl-cta::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--kw-gold);
  opacity: 0.5;
  transition: opacity 0.5s;
  pointer-events: none;
}
.sl-cta:hover {
  background: var(--kw-night);
}
.sl-cta:hover::before {
  opacity: 1;
}
.sl-cta-arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.sl-cta:hover .sl-cta-arrow {
  transform: translateX(4px);
}

/* ---------- Secondary / footer cue ---------- */
.sl-footer-cue {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.6;
}
.sl-footer-cue-rule {
  width: 1px;
  height: 32px;
  background: var(--kw-night-30);
  margin-bottom: 16px;
}
.sl-footer-cue-text {
  font-family: var(--kw-font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kw-night);
  font-weight: 500;
  margin: 0;
}

/* ---------- Compass / map visual region ---------- */
.sl-compass-region {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-compass-rhumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  pointer-events: none;
}

.sl-compass-disc {
  position: relative;
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--kw-gold-30);
  box-shadow:
    0 0 0 4px var(--kw-indigo-10),
    0 24px 48px -12px var(--kw-indigo-50);
}
.sl-compass-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sl-compass-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kw-indigo-10);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Stage waypoints around the compass ---------- */
.sl-waypoints {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sl-waypoint {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}
.sl-waypoint-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--kw-indigo);
  background: var(--kw-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px var(--kw-indigo-10);
}
.sl-waypoint-dot::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--kw-ember);
  border-radius: 50%;
}
.sl-waypoint-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--kw-gold);
  border-radius: 50%;
  opacity: 0.2;
}
.sl-waypoint-roman {
  font-family: var(--kw-font-serif);
  font-weight: 700;
  color: var(--kw-indigo);
  font-size: 1.05rem;
  line-height: 1;
}
.sl-waypoint-label {
  font-family: var(--kw-font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-night);
  margin-top: 4px;
}

/* ---------- Sacred header (replaces dark game header on chamber pages) ---------- */
.sl-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  font-family: var(--kw-font-sans);
}
.sl-header-mark {
  font-family: var(--kw-font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-indigo);
  text-decoration: none;
}
.sl-header-nav {
  display: flex;
  gap: 32px;
}
.sl-header-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-night);
  text-decoration: none;
  transition: color 0.25s;
  font-weight: 500;
}
.sl-header-nav a:hover {
  color: var(--kw-gold);
}
@media (max-width: 600px) {
  .sl-header { padding: 20px 24px; }
  .sl-header-nav { gap: 18px; }
  .sl-header-nav a { font-size: 0.68rem; letter-spacing: 0.14em; }
}

/* ---------- Subtle entry fade ---------- */
@keyframes sl-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sl-fade-in {
  opacity: 0;
  animation: sl-fade-in 0.7s ease-out forwards;
}
.sl-delay-1 { animation-delay: 0.05s; }
.sl-delay-2 { animation-delay: 0.15s; }
.sl-delay-3 { animation-delay: 0.25s; }
.sl-delay-4 { animation-delay: 0.40s; }
.sl-delay-5 { animation-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .sl-fade-in { opacity: 1; animation: none; }
}

/* ============================================================
   PHASE 1 — REALM OVERLAYS + GLOBAL AMBIENT LAYER
   ------------------------------------------------------------
   Additive system. The 6 Sacred Library tokens above remain the
   constant base (typography, indigo ink, brass accents). Each
   "realm" is a small overlay palette scoped under a body class
   that any chamber can opt into. The ambient classes below are
   palette-agnostic — they read CSS vars so a realm overlay can
   tint them without rewriting any animation.
   ============================================================ */

/* ---------- Realm overlay palettes ---------- */
/* Awareness — Mist-Blue Observatory */
.realm-awareness {
  --kw-realm-1:    #AEBFCC;  /* Mist Blue */
  --kw-realm-2:    #6E7C86;  /* Dusty Slate */
  --kw-realm-bg:   #F3EBDD;  /* Soft Parchment */
  --kw-realm-ink:  #46525A;  /* Faded Ink */
  --kw-realm-acc:  #B6A88A;  /* Muted Silver-Gold */
  --kw-amb-tint:   174, 191, 204;
}

/* Regulation — Sage Conservatory */
.realm-regulation {
  --kw-realm-1:    #A8B8A1;  /* Sage Green */
  --kw-realm-2:    #7D9380;  /* Mineral Green */
  --kw-realm-bg:   #EFE7D8;  /* Warm Bone */
  --kw-realm-ink:  #4E5B4F;  /* Moss Ink */
  --kw-realm-acc:  #B59C6B;  /* Quiet Brass */
  --kw-amb-tint:   168, 184, 161;
}

/* Embodiment — Amber Workshop */
.realm-embodiment {
  --kw-realm-1:    #C5904A;  /* Burnished Amber */
  --kw-realm-2:    #A87633;  /* Deep Ochre */
  --kw-realm-bg:   #E2D2B7;  /* Sandstone */
  --kw-realm-ink:  #5A4737;  /* Walnut Ink */
  --kw-realm-acc:  #B7955B;  /* Antique Gold */
  --kw-amb-tint:   197, 144, 74;
}

/* Inner Compass — uses base Sacred Library palette as its realm */
.realm-inner-compass {
  --kw-realm-1:    #35506B;
  --kw-realm-2:    #24324A;
  --kw-realm-bg:   #F5F0E6;
  --kw-realm-ink:  #24324A;
  --kw-realm-acc:  #C6A15B;
  --kw-amb-tint:   198, 161, 91;
}

/* Default tint used when no realm is set (brass) */
:root {
  --kw-amb-tint:   198, 161, 91;
}

/* ============================================================
   GLOBAL AMBIENT LAYER
   Opt-in living-world effects. Compose freely:
     <div class="kw-amb-drift kw-amb-breath kw-amb-particles">
   All effects are transform/opacity based for GPU smoothness.
   All respect prefers-reduced-motion.
   ============================================================ */

/* Container helper for stacking ambient FX as a non-interactive layer */
.kw-amb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Slow drift — for atmospheric haze layers */
.kw-amb-drift {
  animation: kwAmbDrift 32s linear infinite;
  will-change: transform;
}
@keyframes kwAmbDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-18px, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Very slow opacity breath — chambers feel alive */
.kw-amb-breath {
  animation: kwAmbBreath 7.5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes kwAmbBreath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Subtle moving sheen — drag a soft band of light across a surface */
.kw-amb-shimmer {
  position: relative;
  overflow: hidden;
}
.kw-amb-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(var(--kw-amb-tint), 0.12) 45%,
    rgba(var(--kw-amb-tint), 0.22) 50%,
    rgba(var(--kw-amb-tint), 0.12) 55%,
    transparent 100%
  );
  animation: kwAmbShimmer 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kwAmbShimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(280%); }
}

/* Soft gold particle field — drifting dust motes.
   Scaled to viewport via 4 stacked gradients for a parallax feel. */
.kw-amb-particles {
  background-image:
    radial-gradient(circle at 12% 22%, rgba(var(--kw-amb-tint), 0.18) 1px, transparent 2px),
    radial-gradient(circle at 38% 64%, rgba(var(--kw-amb-tint), 0.14) 1px, transparent 2px),
    radial-gradient(circle at 71% 18%, rgba(var(--kw-amb-tint), 0.16) 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, rgba(var(--kw-amb-tint), 0.12) 1px, transparent 2px);
  background-size:
    420px 420px,
    520px 520px,
    380px 380px,
    600px 600px;
  animation: kwAmbParticles 60s linear infinite;
  opacity: 0.85;
  will-change: background-position;
}
@keyframes kwAmbParticles {
  0%   { background-position: 0 0,           0 0,           0 0,           0 0; }
  100% { background-position: 420px -420px, -520px 520px,   380px 380px,  -600px -600px; }
}

/* Symbol activation — apply to any element you want to "wake up" on
   hover or focus. Adds a soft brass halo and a 1px etched ring. */
.kw-symbol-wake {
  transition: filter 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
}
.kw-symbol-wake:hover,
.kw-symbol-wake:focus-visible {
  filter: drop-shadow(0 0 12px rgba(var(--kw-amb-tint), 0.45));
  box-shadow: 0 0 0 1px rgba(var(--kw-amb-tint), 0.35), 0 0 24px rgba(var(--kw-amb-tint), 0.18);
}

/* Room-acknowledges-you bloom — fire on completion with JS by adding
   .kw-bloom-active to any element. CSS does the rest. */
.kw-bloom-target {
  position: relative;
}
.kw-bloom-target.kw-bloom-active::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(var(--kw-amb-tint), 0.35), transparent 70%);
  animation: kwAmbBloom 1.6s ease-out forwards;
  pointer-events: none;
}
@keyframes kwAmbBloom {
  0%   { opacity: 0; transform: scale(0.85); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .kw-amb-drift,
  .kw-amb-breath,
  .kw-amb-shimmer::after,
  .kw-amb-particles {
    animation: none !important;
  }
  .kw-bloom-target.kw-bloom-active::before { animation: none; opacity: 0; }
}

/* ---------- Inspiration alias (live page is path-inspiration.html;
   realm-regulation kept above for naming clarity in the brief) ---------- */
.realm-inspiration {
  --kw-realm-1:    #A8B8A1;
  --kw-realm-2:    #7D9380;
  --kw-realm-bg:   #EFE7D8;
  --kw-realm-ink:  #4E5B4F;
  --kw-realm-acc:  #B59C6B;
  --kw-amb-tint:   168, 184, 161;
}