/* ============================================================
   TEMPLE OF APOLLO — divine-being.life
   Shared temple environment stylesheet for ALL pages.
   Extracted from index.html — single source of truth.
   ============================================================ */

/* PILLARS ONLY ON LANDING — sub-pages stay clean (just sky/floor + particles) */
body:not(.is-landing) .temple-layer.temple-far,
body:not(.is-landing) .temple-layer.temple-mid,
body:not(.is-landing) .temple-layer.temple-near { display: none !important; }

/* On sub-pages, keep just a quiet stone backdrop + the rising particles
   (smoke, motes) and sun rays — no pillars, no squiggly floor cracks. */
body:not(.is-landing) .temple-floor svg { display: none !important; }

/* MOBILE OVERFLOW GUARD — prevents the temple decoration layers from
   blowing the document width past the viewport on small screens.
   Audit caught docWidth=750 at 375px viewport; this clamps it to 100vw. */
html { overflow-x: hidden; }
.temple-bg, .temple-rays, .temple-smoke, .temple-motes, .temple-serpents {
  max-width: 100vw;
  overflow: hidden;
}

:root {
  --temple-stone-deep: #15131a;
  --temple-stone-mid:  #2a2520;
  --temple-stone-warm: #3a322a;
  --temple-sand:       #6a5d4d;
  --temple-marble:     #d8cdb8;
  --temple-cream:      #f3ead7;
  --temple-gold:       #f5d27a;
  --temple-sun:        #fff2c8;
  --violet-oil:        #b39afa;
  --violet-deep:       #6d28d9;
  --violet-glow:       rgba(179,154,250,0.55);
  --violet-aura:       rgba(139,92,246,0.28);
  --body-text:         #e8e0d2;
  --body-muted:        #c4b9a3;
}

/* Override page background to temple stone — applies everywhere */
html, body {
  background: #110f14 !important;
  color: var(--body-text);
}

body { position: relative; }

/* Sub-page main content lifts above the temple background */
main { position: relative; z-index: 1; }

/* Cosmos overlay from partials.js — quiet so temple shows through */
.cosmos { opacity: 0.35 !important; mix-blend-mode: screen; }

/* Nav above temple */
.nav { position: sticky; z-index: 100; }

/* ============================================================
   TEMPLE BACKGROUND — fixed, parallax layers
   ============================================================ */
.temple-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 10%,
      rgba(255, 230, 180, 0.10) 0%,
      rgba(80, 60, 40, 0.18) 25%,
      transparent 55%),
    linear-gradient(180deg,
      #1a1620 0%,
      #221c20 22%,
      #2a221e 50%,
      #1d1815 80%,
      #0d0a10 100%);
}

.temple-layer {
  position: absolute;
  left: 0; right: 0;
  will-change: transform;
}

/* Layer 1 — broken ceiling + far stars */
.temple-ceiling {
  top: 0; left: 0; right: 0;
  height: 60vh;
  background:
    radial-gradient(circle 2px at 12% 18%, rgba(255,240,200,0.7), transparent 100%),
    radial-gradient(circle 1.5px at 28% 8%, rgba(255,240,200,0.55), transparent 100%),
    radial-gradient(circle 1.2px at 42% 28%, rgba(255,240,200,0.5), transparent 100%),
    radial-gradient(circle 1.8px at 64% 12%, rgba(255,240,200,0.65), transparent 100%),
    radial-gradient(circle 1px at 78% 22%, rgba(255,240,200,0.45), transparent 100%),
    radial-gradient(circle 1.6px at 88% 6%, rgba(255,240,200,0.6), transparent 100%),
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0,0,0,0.55) 0%, transparent 75%);
  opacity: 0.85;
}

/* Layer 2 — distant columns silhouette */
.temple-far {
  top: 8%;
  width: 100%;
  height: 70vh;
  opacity: 0.55;
  filter: blur(2.5px);
}
.temple-far svg { width: 100%; height: 100%; display: block; }

/* Layer 3 — mid columns sharper */
.temple-mid {
  top: 14%;
  width: 100%;
  height: 80vh;
  opacity: 0.85;
}
.temple-mid svg { width: 100%; height: 100%; display: block; }

/* Layer 4 — cracked floor with violet fissures */
.temple-floor {
  bottom: -10%;
  left: 0; right: 0;
  height: 55vh;
  background:
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(179,154,250,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(139,92,246,0.14) 0%, transparent 65%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(58, 50, 42, 0.4) 25%,
      rgba(35, 28, 22, 0.85) 60%,
      #0a0810 100%);
}
.temple-floor::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 49%, rgba(179,154,250,0.35) 49.6%, rgba(179,154,250,0.55) 50%, rgba(179,154,250,0.35) 50.4%, transparent 51%),
    linear-gradient(72deg,  transparent 49.5%, rgba(179,154,250,0.18) 50%, transparent 50.5%),
    linear-gradient(-40deg, transparent 49.5%, rgba(179,154,250,0.22) 50%, transparent 50.5%);
  background-size: 600px 100%, 380px 100%, 720px 100%;
  background-position: 14% 75%, 62% 82%, 84% 68%;
  background-repeat: no-repeat;
  filter: blur(0.6px);
  opacity: 0.85;
  mix-blend-mode: screen;
}
.temple-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 8% 1.5% at 14% 75%, rgba(179,154,250,0.9), transparent 70%),
    radial-gradient(ellipse 10% 2% at 62% 82%, rgba(179,154,250,0.7), transparent 70%),
    radial-gradient(ellipse 7% 1.2% at 84% 68%, rgba(179,154,250,0.75), transparent 70%);
  filter: blur(8px);
  animation: oilBreath 7s ease-in-out infinite;
}

@keyframes oilBreath {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* God-light sun rays from broken ceiling */
.temple-rays {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.temple-rays::before,
.temple-rays::after {
  content: '';
  position: absolute;
  top: -10%;
  width: 38vw;
  height: 130vh;
  background: linear-gradient(180deg,
    rgba(255, 240, 195, 0.32) 0%,
    rgba(255, 230, 170, 0.18) 30%,
    rgba(255, 210, 130, 0.06) 65%,
    transparent 100%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: rayBreath 8s ease-in-out infinite;
}
.temple-rays::before {
  left: 18%;
  transform: rotate(8deg);
  transform-origin: top center;
}
.temple-rays::after {
  right: 14%;
  width: 30vw;
  transform: rotate(-6deg);
  transform-origin: top center;
  animation-delay: 3s;
  opacity: 0.85;
}
.temple-ray-3 {
  position: absolute;
  top: -10%;
  left: 52%;
  width: 22vw;
  height: 120vh;
  background: linear-gradient(180deg,
    rgba(255, 245, 210, 0.22) 0%,
    rgba(255, 220, 150, 0.10) 40%,
    transparent 100%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transform: rotate(2deg);
  transform-origin: top center;
  animation: rayBreath 9s ease-in-out infinite 1.5s;
}

@keyframes rayBreath {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* Drifting smoke clouds */
.temple-smoke {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.smoke {
  position: absolute;
  bottom: -20vh;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 235, 215, 0.10) 0%, rgba(245, 235, 215, 0.04) 40%, transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: smokeRise 60s linear infinite;
}
.smoke.s1 { left: 6%;  width: 520px; height: 520px; animation-duration: 58s; animation-delay:  -4s; }
.smoke.s2 { left: 28%; width: 380px; height: 380px; animation-duration: 72s; animation-delay: -22s; opacity: 0.85; }
.smoke.s3 { left: 48%; width: 460px; height: 460px; animation-duration: 50s; animation-delay: -10s; }
.smoke.s4 { left: 66%; width: 340px; height: 340px; animation-duration: 64s; animation-delay: -38s; opacity: 0.7; }
.smoke.s5 { left: 82%; width: 420px; height: 420px; animation-duration: 56s; animation-delay: -16s; }
.smoke.s6 { left: 14%; width: 300px; height: 300px; animation-duration: 80s; animation-delay: -45s; opacity: 0.6; }

@keyframes smokeRise {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(20px, -55vh) scale(1.15); opacity: 0.75; }
  90%  { opacity: 0.4; }
  100% { transform: translate(-12px, -110vh) scale(1.35); opacity: 0; }
}

/* Floating dust motes through god-light */
.temple-motes {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.mote {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 240, 200, 0.85);
  box-shadow: 0 0 6px rgba(255, 235, 180, 0.7);
  animation: moteRise 18s linear infinite;
}

@keyframes moteRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translate(28px, -110vh); opacity: 0; }
}

/* ============================================================
   TYPOGRAPHY — neon violet headers
   ============================================================ */
.temple-glow {
  text-shadow:
    0 0 14px rgba(179,154,250,0.45),
    0 0 32px rgba(139,92,246,0.28),
    0 0 60px rgba(109,40,217,0.18);
  animation: headerPulse 5s ease-in-out infinite;
}
@keyframes headerPulse {
  0%, 100% {
    text-shadow:
      0 0 12px rgba(179,154,250,0.40),
      0 0 28px rgba(139,92,246,0.22),
      0 0 56px rgba(109,40,217,0.14);
  }
  50% {
    text-shadow:
      0 0 18px rgba(179,154,250,0.65),
      0 0 38px rgba(139,92,246,0.40),
      0 0 80px rgba(109,40,217,0.28);
  }
}

/* ============================================================
   FLAME-OIL HOVER — text ignites in violet
   ============================================================ */
.flame-text {
  position: relative;
  transition: color 360ms ease, text-shadow 360ms ease;
}
.flame-text:hover,
a:hover .flame-text {
  color: #ede0ff !important;
  animation: flameBurn 1.4s ease-out forwards;
}
@keyframes flameBurn {
  0% {
    text-shadow:
      0 0 14px rgba(179,154,250,0.45),
      0 0 32px rgba(139,92,246,0.28);
  }
  30% {
    text-shadow:
      0 0 8px  rgba(255,235,180,0.6),
      0 0 18px rgba(220,180,255,0.95),
      0 0 36px rgba(179,154,250,0.85),
      0 0 70px rgba(139,92,246,0.55),
      0 0 120px rgba(109,40,217,0.35);
  }
  70% {
    text-shadow:
      0 0 12px rgba(220,180,255,0.7),
      0 0 28px rgba(179,154,250,0.55),
      0 0 60px rgba(139,92,246,0.35);
  }
  100% {
    text-shadow:
      0 0 14px rgba(179,154,250,0.45),
      0 0 32px rgba(139,92,246,0.28);
  }
}

/* ============================================================
   CLICK-FLARE & AMBIENT-DROP (JS-spawned)
   ============================================================ */
.click-flare {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,240,255,0.95) 0%,
    rgba(220,190,255,0.85) 18%,
    rgba(179,154,250,0.6)  40%,
    rgba(139,92,246,0.25)  65%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: clickFlare 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes clickFlare {
  0%   { transform: scale(0.2); opacity: 0; }
  18%  { transform: scale(0.65); opacity: 0.95; }
  100% { transform: scale(1.6); opacity: 0; }
}

.ambient-drop {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  top: 0;
  width: 6px;
  height: 14px;
  margin-left: -3px;
  background: linear-gradient(180deg,
    rgba(255,235,255,0.95) 0%,
    rgba(220,190,255,1) 30%,
    rgba(179,154,250,0.95) 70%,
    rgba(139,92,246,0.6) 100%);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  box-shadow: 0 0 14px rgba(179,154,250,0.85), 0 0 28px rgba(139,92,246,0.5);
  animation: dropFall 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes dropFall {
  0%   { transform: translate(0, -20px); opacity: 0; }
  8%   { opacity: 1; }
  90%  { transform: translate(0, 78vh); opacity: 1; height: 14px; }
  100% { transform: translate(0, 82vh); opacity: 0; height: 4px; }
}
.ambient-splash {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,240,255,0.9) 0%,
    rgba(179,154,250,0.7) 30%,
    rgba(139,92,246,0.3)  60%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: splashPulse 900ms ease-out forwards;
}
@keyframes splashPulse {
  0%   { transform: scale(0.3); opacity: 0; }
  20%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ============================================================
   TEMPLE NAV — overrides for shared partials.js nav
   ============================================================ */
.nav {
  background: rgba(15, 12, 22, 0.78) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-bottom: 1px solid rgba(179,154,250,0.18) !important;
}
.nav-brand {
  color: var(--temple-cream) !important;
  font-style: italic;
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: none !important;
  transition: color 280ms ease, text-shadow 280ms ease;
}
.nav-brand:hover {
  color: var(--violet-oil) !important;
  text-shadow:
    0 0 12px rgba(179,154,250,0.6),
    0 0 24px rgba(139,92,246,0.35);
}
.nav-glyph { color: var(--violet-oil) !important; filter: drop-shadow(0 0 8px rgba(179,154,250,0.45)); }
.nav-links a {
  color: var(--body-text) !important;
  transition: color 240ms ease, text-shadow 240ms ease;
}
.nav-links a:hover {
  color: var(--violet-oil) !important;
  text-shadow: 0 0 10px rgba(179,154,250,0.55);
}
.nav-links a.is-active { color: var(--violet-oil) !important; }
.nav-links a.is-active::after { background: var(--violet-oil) !important; box-shadow: 0 0 8px rgba(179,154,250,0.7); }
.nav-toggle span { background: var(--temple-cream) !important; }

@media (max-width: 1024px) {
  .nav-links {
    background: rgba(15, 12, 22, 0.96) !important;
    backdrop-filter: blur(32px) !important;
  }
  .nav-links a { border-bottom: 1px solid rgba(179,154,250,0.15) !important; }
}

/* ============================================================
   FOOTER — soften on temple
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  background: rgba(8, 6, 12, 0.6) !important;
  color: var(--body-text) !important;
  border-top: 1px solid rgba(179,154,250,0.18) !important;
}
.footer a { color: var(--body-text) !important; }
.footer a:hover { color: var(--violet-oil) !important; }
.foot-glyph { color: var(--violet-oil) !important; filter: drop-shadow(0 0 8px rgba(179,154,250,0.4)); }

/* ============================================================
   READER-ONLY BODY HARMONIZATION (no parallax, just stone tone)
   ============================================================ */
body.temple-reader { background: #1d1815 !important; }
body.temple-reader .reader-bar { background: rgba(15, 12, 22, 0.92) !important; border-bottom: 1px solid rgba(179,154,250,0.18) !important; }

/* ============================================================
   MOBILE — drop heavy parallax, lighter pacing
   ============================================================ */
@media (max-width: 640px) {
  .smoke { width: 320px !important; height: 320px !important; }
  .smoke.s4, .smoke.s6 { display: none; }
  .temple-far { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .smoke, .mote, .ambient-drop, .ambient-splash,
  .temple-rays::before, .temple-rays::after, .temple-ray-3,
  .temple-floor::after { animation: none !important; }
  .smoke, .mote { display: none; }
  .temple-glow, .flame-text:hover { animation: none !important; }
}