/* darshan.css — the living sanctum (a 10s seamless video loop) and pushpanjali.
 *
 * Stack, bottom to top: video -> embers canvas -> aura -> shades -> offerings -> copy.
 * Offered flowers sit ABOVE the shades so they stay vivid where they land on the
 * pedestal step. js/darshan.js maps art coordinates to screen through the same
 * object-fit: cover maths the video uses, so flowers land on the step on any aspect.
 */

/* z-index gives the darshan its own stacking level. Everything drawn over the video has
   to be composited; without this, Chrome keeps squashing the rest of the page into that
   same overlap layer (measured: one 390x8576 layer instead of 390x844). */
.darshan {
  position: relative;
  z-index: 1;
  contain: paint;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--garbha) url("../assets/video/darshan-poster.jpg") center / cover no-repeat;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.darshan__video,
.darshan__embers,
.darshan__aura,
.darshan__offerings,
.darshan__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.darshan__video {
  object-fit: cover;
  object-position: 50% 50%;
}

.darshan__shade--top {
  bottom: auto;
  height: 20%;
  background: linear-gradient(180deg, rgba(20, 4, 6, 0.78), rgba(20, 4, 6, 0));
}

.darshan__shade--bottom {
  top: auto;
  height: 30%;
  background: linear-gradient(0deg, rgba(20, 4, 6, 0.92) 12%, rgba(20, 4, 6, 0.55) 58%, rgba(20, 4, 6, 0));
}

/* ---- aura: Bappa's glow, centred on the murti by js (--ax/--ay) ------------ */
.darshan__aura {
  background: radial-gradient(ellipse 44% 26% at var(--ax, 50%) var(--ay, 38%),
    rgba(255, 222, 150, 0.5), rgba(255, 170, 70, 0.18) 48%, rgba(255, 150, 60, 0) 72%);
  opacity: 0;
}

.darshan__aura.is-pulse {
  animation: aura-pulse 1100ms var(--ease-out);
}

.darshan.is-blessed .darshan__aura {
  animation: aura-bless 1800ms var(--ease-out) forwards, aura-breathe 4.2s var(--ease-soft) 1800ms infinite alternate;
}

@keyframes aura-pulse {
  0%   { opacity: 0; }
  30%  { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes aura-bless {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes aura-breathe {
  from { opacity: 0.6; }
  to   { opacity: 0.85; }
}

/* ---- offered flowers --------------------------------------------------------- */
.offering {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 38px);
  height: var(--size, 38px);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.offering.is-fading {
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}

.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 0 30%, rgba(255, 200, 90, 0.9) 45%, rgba(255, 170, 60, 0) 72%);
  pointer-events: none;
}

/* ---- copy -------------------------------------------------------------------- */
.darshan__invocation {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 3.4%);
  margin: 0;
  font: 400 clamp(21px, 5.8vw, 25px) / 1.3 var(--font-deva);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--brass-hi);
  text-shadow: 0 0 18px rgba(246, 196, 69, 0.45), 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.darshan__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px));
  padding: 0 var(--pad);
  text-align: center;
}

.darshan__prompt {
  margin: 0 0 4px;
  font: 500 clamp(23px, 6.4vw, 27px) / 1.2 var(--font-display);
  color: var(--ivory);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.darshan__sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ivory-dim);
}

.darshan__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.darshan__actions [hidden] {
  display: none;
}

.darshan__count {
  min-height: 1.4em;
  margin: 10px 0 0;
  font: 600 12px/1.4 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marigold);
}

.darshan__next {
  animation: next-nudge 1.8s var(--ease-soft) infinite;
}

@keyframes next-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* entrance once the gate has lifted */
.darshan__invocation,
.darshan__panel {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.darshan.is-revealed .darshan__invocation {
  opacity: 1;
  transform: none;
  transition-delay: 500ms;
}

.darshan.is-revealed .darshan__panel {
  opacity: 1;
  transform: none;
  transition-delay: 1300ms;
}