/* ============================================================
   Daily Vedanta — the living layer
   Lighting, symbols and motion, all of it drawn from the tradition:
   a Śrī Yantra turning behind the page, a ring of lotus petals turning
   the other way, lamp light that follows the hand, sparks rising from
   a flame, and a page that dissolves rather than jumps.
   Everything here is decoration: it sits behind the text, never over it,
   and all of it stops under prefers-reduced-motion.
   ============================================================ */

:root {
  --lamp-x: 50%;
  --lamp-y: 30%;
  --scroll: 0;
  --scroll-px: 0px;
  --sky-drift: 0px;
}

/* The page's own furniture stays above the atmosphere. */
main, footer.site { position: relative; z-index: 1; }
.sound-invite, .toast { z-index: 120; }
dialog { z-index: 210; }
.site-header { z-index: 60; }

/* ---------------------------------------------------- the sky behind it all */
.dv-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;
}
.dv-sky > * { position: absolute; }

/* lamp light, following the hand: the page is lit rather than coloured */
.dv-lamp {
  inset: -30%;
  background:
    radial-gradient(38rem 38rem at var(--lamp-x) var(--lamp-y),
      rgba(229, 181, 92, 0.13) 0%, rgba(229, 181, 92, 0.055) 34%, transparent 68%),
    radial-gradient(26rem 26rem at var(--lamp-x) var(--lamp-y),
      rgba(201, 106, 74, 0.075) 0%, transparent 62%);
  transition: opacity 900ms var(--ease-out);
}
[data-theme='light'] .dv-lamp {
  background:
    radial-gradient(38rem 38rem at var(--lamp-x) var(--lamp-y),
      rgba(154, 106, 21, 0.10) 0%, rgba(154, 106, 21, 0.04) 36%, transparent 70%),
    radial-gradient(24rem 24rem at var(--lamp-x) var(--lamp-y),
      rgba(166, 72, 42, 0.05) 0%, transparent 60%);
}

/* the dawn that never quite arrives, low on the horizon */
.dv-dawn {
  inset: auto -20% -22% -20%; height: 62vh;
  background: radial-gradient(60% 100% at 50% 100%,
    rgba(229, 181, 92, 0.11) 0%, rgba(120, 82, 140, 0.07) 42%, transparent 78%);
}
[data-theme='light'] .dv-dawn { opacity: 0.55; }

/* Śrī Yantra: nine interlocking triangles, turning once every four minutes */
.dv-yantra {
  top: 50%; left: 50%; width: min(120vmin, 1100px); aspect-ratio: 1;
  translate: -50% calc(-50% + var(--sky-drift));
  opacity: 0.07; color: var(--color-primary);
  animation: dv-turn 480s linear infinite;
}
.dv-yantra svg { width: 100%; height: 100%; }
[data-theme='light'] .dv-yantra { opacity: 0.055; }

/* a ring of lotus petals, turning the other way */
.dv-petals {
  top: 50%; left: 50%; width: min(150vmin, 1400px); aspect-ratio: 1;
  translate: -50% calc(-50% - var(--sky-drift));
  opacity: 0.05; color: var(--color-text-muted);
  animation: dv-turn-back 900s linear infinite;
}
.dv-petals svg { width: 100%; height: 100%; }

[data-theme='light'] .dv-petals { opacity: 0.03; }
[data-theme='light'] .dv-spark { opacity: 0; }
@keyframes dv-turn { to { rotate: 360deg; } }
@keyframes dv-turn-back { to { rotate: -360deg; } }

/* sparks off a lamp flame, rising slowly through the dark */
.dv-spark {
  bottom: -8vh; width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-primary); opacity: 0;
  filter: blur(0.4px);
  box-shadow: 0 0 8px 2px rgba(229, 181, 92, 0.35);
  animation: dv-rise linear infinite;
}
@keyframes dv-rise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.7); }
  12% { opacity: 0.55; }
  70% { opacity: 0.35; }
  100% { opacity: 0; transform: translateY(-112vh) translateX(var(--drift, 30px)) scale(1.15); }
}
[data-theme='light'] .dv-spark { box-shadow: 0 0 7px 2px rgba(154, 106, 21, 0.28); }

/* ------------------------------------------------- the thread at the top */
.dv-thread {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary) 55%, #f6e3b4);
  transform: scaleX(var(--scroll)); transform-origin: 0 50%;
  opacity: 0.85;
}

/* ------------------------------------------------ dissolve between pages */
.dv-veil {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 48%, rgba(229, 181, 92, 0.16), transparent 70%),
    var(--color-bg);
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
body[data-leaving='true'] .dv-veil { opacity: 1; }
body[data-entering='true'] main { animation: dv-enter 760ms var(--ease-out) both; }
@keyframes dv-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.995); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ------------------------------------------------------ lamp-lit surfaces */
/* A card is lit by wherever the hand is, as though a lamp were carried past it. */
.tile, .card, .post-card, .story-card, .theme-card, .text-card, .q-card, .video-card, .saint {
  position: relative; isolation: isolate;
  transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}
.tile::after, .card::after, .post-card::after, .story-card::after, .theme-card::after,
.text-card::after, .q-card::after, .video-card::after, .saint::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 420ms var(--ease-out);
  background: radial-gradient(16rem 16rem at var(--px, 50%) var(--py, 0%),
    rgba(229, 181, 92, 0.16), transparent 70%);
}
.tile:hover, .card:hover, .post-card:hover, .story-card:hover, .theme-card:hover,
.text-card:hover, .q-card:hover, .video-card:hover, .saint:hover {
  transform: translateY(-3px);
}
.tile:hover::after, .card:hover::after, .post-card:hover::after, .story-card:hover::after,
.theme-card:hover::after, .text-card:hover::after, .q-card:hover::after,
.video-card:hover::after, .saint:hover::after { opacity: 1; }

/* a portrait warms and lifts a little when the hand rests on it */
.saint img { transition: filter 600ms var(--ease-out), transform 900ms var(--ease-out); }
.saint:hover img { filter: saturate(1.05) brightness(1.06); transform: scale(1.03); }

/* the Sanskrit word breathes, the way a name repeated quietly does */
.sanskrit-chip, .sk-chip {
  animation: dv-breathe 7s var(--ease-in-out) infinite;
}
@keyframes dv-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 181, 92, 0); }
  50% { box-shadow: 0 0 26px -6px rgba(229, 181, 92, 0.32); }
}

/* a section's title is underlined by a thread of lamp light as it arrives */
.h-section { position: relative; }
.in > .h-section::after, .h-section.in::after {
  content: ''; position: absolute; left: 0; bottom: -0.35em; height: 1px; width: 4.5rem;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  transform-origin: 0 50%; animation: dv-thread-in 1100ms var(--ease-out) both;
}
@keyframes dv-thread-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ------------------------------------------------------- drawn symbols */
.dv-sym { display: block; margin-inline: auto; color: var(--color-primary); opacity: 0.85; }
.dv-sym path, .dv-sym circle, .dv-sym line { vector-effect: non-scaling-stroke; }
.dv-sym[data-drawn='false'] path, .dv-sym[data-drawn='false'] circle {
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
}
.dv-sym[data-drawn='true'] path, .dv-sym[data-drawn='true'] circle {
  stroke-dasharray: var(--len, 400); stroke-dashoffset: 0;
  transition: stroke-dashoffset 1800ms var(--ease-out);
}

/* the Om divider becomes a lamp with a drawn flame */
.divider-om { gap: var(--space-5); }
.divider-om .dv-sym { width: 34px; height: 34px; }
.divider-om::before, .divider-om::after { max-width: 200px; }

/* ---------------------------------------------------- respect the visitor */
@media (prefers-reduced-motion: reduce) {
  .dv-yantra, .dv-petals, .dv-spark, .sanskrit-chip, .sk-chip { animation: none; }
  .dv-spark { display: none; }
  .dv-lamp { transition: none; }
  body[data-entering='true'] main { animation: none; }
  .dv-veil { transition: opacity 1ms; }
  .in > .h-section::after, .h-section.in::after { animation: none; }
  .dv-sym[data-drawn='false'] path, .dv-sym[data-drawn='false'] circle { stroke-dashoffset: 0; }
  .tile:hover, .card:hover, .post-card:hover, .story-card:hover, .theme-card:hover,
  .text-card:hover, .q-card:hover, .video-card:hover, .saint:hover { transform: none; }
}

/* On a touch screen there is no hand to follow; keep the light still and centred. */
@media (hover: none) {
  .dv-lamp { --lamp-x: 50%; --lamp-y: 26%; }
  .dv-spark { display: none; }
}

/* ------------------------------------------------------ the sound setting */
.sound-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.sound-modes .chip[aria-pressed='true'] {
  border-color: var(--color-primary); color: var(--color-primary);
  background: var(--color-primary-soft);
}