/* scenes/mandap.css -- styles for js/motion/scenes/mandap.js (mandap).
   OWNER: the mandap motion agent (edit only this file + its JS).
   Everything here is either armed under html.motion or styles nodes the JS creates only
   when motion runs, so reduced motion / no JS shows the exact PSD frame.
   Overlays are small; the only stage-wide node is the canvas band below the text. */

html.motion [data-scene="mandap"] .stage { touch-action: manipulation; }

/* ---------------------------------------------------------------- armed entrances */
html.motion [data-scene="mandap"]:not(.mn-go) .mn-arm { opacity: 0; }
html.motion [data-scene="mandap"]:not(.mn-go) .ly[data-layer="stairs"] { transform: scale(1.03); transform-origin: 50% 100%; }
html.motion [data-scene="mandap"]:not(.mn-go) .ly[data-layer="floor"] { transform: scale(1.04); transform-origin: 50% 100%; }

/* ---------------------------------------------------------------- strand windows */
.mn-pc { position: absolute; overflow: hidden; pointer-events: none; }
.mn-pc--open { overflow: visible; }
.ly .mn-pc > img { position: absolute; max-width: none; }

/* ---------------------------------------------------------------- behind Ganesh */
.mn-halo, .mn-rays, .mn-motes, .mn-ripple, .mn-pool, .mn-flame, .mn-wisp, .mn-fx, .mn-crown, .mn-star, .mn-canvas {
  position: absolute;
  pointer-events: none;
}
.mn-halo {
  opacity: 0.62;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 236, 176, 0.95) 0%, rgba(252, 212, 120, 0.72) 30%,
    rgba(246, 188, 96, 0.3) 58%, rgba(246, 188, 96, 0) 100%);
}
.mn-rays {
  opacity: 0.32;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(238, 190, 96, 0.6) 0deg 2deg, rgba(238, 190, 96, 0) 4.5deg 20deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 26%, #000 40%, rgba(0, 0, 0, 0.45) 62%, transparent 92%);
  mask-image: radial-gradient(circle closest-side, transparent 26%, #000 40%, rgba(0, 0, 0, 0.45) 62%, transparent 92%);
}
html.motion [data-scene="mandap"]:not(.mn-go) :is(.mn-halo, .mn-rays) { opacity: 0; }
.mn-ripple {
  opacity: 0;
  border-radius: 50%;
  border: calc(3 * var(--u)) solid rgba(226, 176, 84, 0.9);
  box-shadow: 0 0 calc(12 * var(--u)) rgba(246, 204, 120, 0.6), inset 0 0 calc(10 * var(--u)) rgba(246, 204, 120, 0.4);
}
/* sparkle motes in the warm air (CSS loops, paused via .mn-away) */
.mn-mote {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 252, 226, 1) 0%, rgba(255, 224, 140, 0.75) 42%, rgba(255, 224, 140, 0) 100%);
}
.mn-alive .mn-mote { animation: mn-mote 9s ease-in-out infinite; }
@keyframes mn-mote {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  22%  { opacity: var(--o, 0.8); }
  62%  { opacity: calc(var(--o, 0.8) * 0.6); transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.7); }
}

/* ---------------------------------------------------------------- crown glint */
.mn-crown {
  overflow: hidden;
  -webkit-mask-image: var(--mn-src);
  mask-image: var(--mn-src);
  -webkit-mask-size: var(--mn-mw) var(--mn-mh);
  mask-size: var(--mn-mw) var(--mn-mh);
  -webkit-mask-position: var(--mn-mx) var(--mn-my);
  mask-position: var(--mn-mx) var(--mn-my);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mn-crown__band {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(105deg, rgba(255, 250, 225, 0) 30%, rgba(255, 250, 225, 0.92) 50%, rgba(255, 250, 225, 0) 70%);
}
.mn-star { opacity: 0; }
.mn-star::before, .mn-star::after {
  content: "";
  position: absolute;
  left: 0;
  top: 46%;
  width: 100%;
  height: 8%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 250, 220, 0), #fffdf0 50%, rgba(255, 250, 220, 0));
}
.mn-star::after { transform: rotate(90deg); }

/* ---------------------------------------------------------------- lamps */
.mn-flame { opacity: 0; transform-origin: 50% 100%; }
.mn-flame.is-lit { opacity: 1; }
.mn-flame img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: mn-flicker 1.2s ease-in-out infinite;
  animation-play-state: paused;
}
.mn-flame.is-lit img { animation-play-state: running; }
@keyframes mn-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  18% { transform: scale(0.95, 1.07) skewX(-2.5deg); }
  36% { transform: scale(1.04, 0.95) skewX(2deg); }
  55% { transform: scale(0.97, 1.1) skewX(-1.5deg); }
  76% { transform: scale(1.02, 0.97) skewX(3deg); }
}
.mn-pool {
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 214, 130, 0.75) 0%, rgba(255, 188, 96, 0.34) 38%, rgba(255, 170, 80, 0) 100%);
}
.mn-pool.is-lit { opacity: 0.8; animation: mn-pool 2.3s ease-in-out infinite; }
@keyframes mn-pool {
  0%, 100% { opacity: 0.8; }
  30% { opacity: 0.64; }
  62% { opacity: 0.9; }
}

/* ---------------------------------------------------------------- wisps from the urns */
.mn-wisp {
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 252, 244, 0.36) 48%, rgba(255, 252, 244, 0) 100%);
}
.mn-alive .mn-wisp { animation: mn-wisp 8s ease-in-out infinite; }
@keyframes mn-wisp {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5, 0.6); }
  22%  { opacity: 0.7; }
  58%  { opacity: 0.42; transform: translate(var(--dx), calc(-120 * var(--u))) scale(1, 1.15); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * -0.6), calc(-250 * var(--u))) scale(1.5, 1.5); }
}

/* ---------------------------------------------------------------- petals + canvas */
.mn-fx { inset: 0; }
.mn-petal { position: absolute; height: auto; opacity: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mn-canvas { left: 0; width: 100%; }

/* Every CSS loop stops with the slide. */
.mn-away :is(.mn-mote, .mn-wisp, .mn-pool, .mn-flame img, .mn-cta, .mn-cta__ring) { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- Ganesh, the tap target */
.mn-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 40% 40% 12% 12%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
}
.mn-alive .mn-hit { visibility: visible; }
.mn-hit:focus-visible { outline: 2px solid #b5862a; outline-offset: 2px; }

/* ---------------------------------------------------------------- CTA pill
   The template's chip (js/motion/scenes/haldi.js .hm-cta), in temple ivory + gold. It sits
   in the sky between the venue line (ink ends y 971) and the crown (y 1109): clear of
   every line of text, of Ganesh, of the rangoli, and >= 110 CSS px above the viewport
   bottom at 390 x 664, where the floor strip below the chowki would be only ~45 px.
   The visible chip is 32 px so it does not crowd the gap: centred a little low (y 1048), so the
   rising float keeps it off the venue line. */
.mn-cta {
  position: absolute;
  left: 50%;
  top: calc(1048 * var(--u));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 32px;
  margin: 0;
  padding: 0.12em 1.05em 0.12em 0.8em;
  border: 1px solid rgba(200, 150, 60, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 251, 238, 0.95), rgba(252, 238, 208, 0.92));
  box-shadow: 0 6px 18px rgba(130, 84, 30, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  color: #9e2c4c;
  font-family: "Quattrocento", Georgia, serif;
  font-size: clamp(13px, calc(36 * var(--u)), 17px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.7s;
}
.mn-cta.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  animation: mn-cta-float 2.8s ease-in-out 0.8s infinite;
}
/* tap target >= 44px: an invisible hit extension around the 32px chip (as .sb-cta) */
.mn-cta::before { content: ""; position: absolute; inset: -7px -4px; }
.mn-cta:focus-visible { outline: 2px solid #9e2c4c; outline-offset: 4px; }
.mn-cta:active { background: linear-gradient(180deg, rgba(252, 240, 214, 0.96), rgba(248, 226, 186, 0.94)); }
.mn-cta__tap { position: relative; flex: none; width: 1.5em; height: 1.5em; }
.mn-cta__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.52em;
  height: 0.52em;
  margin: -0.26em 0 0 -0.26em;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a0 0 30%, #e0a52e 70%, #b97c1c 100%);
  box-shadow: 0 0 7px rgba(240, 180, 60, 0.75);
}
.mn-cta__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: -0.75em 0 0 -0.75em;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 140, 40, 0.9);
  transform: scale(0.34);
  opacity: 0;
}
.mn-cta.is-on .mn-cta__ring { animation: mn-tap-ripple 2.6s ease-out 0.4s infinite; }
.mn-cta.is-on .mn-cta__ring:nth-child(2) { animation-delay: 1.7s; }
/* The two lines share one grid cell, so the pill keeps its width when the line changes. */
.mn-cta__text { display: grid; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
.mn-cta__a, .mn-cta__b { grid-area: 1 / 1; transition: opacity 0.45s ease; text-align: center; }
.mn-cta__b { opacity: 0; }
.mn-cta.is-said .mn-cta__a { opacity: 0; }
.mn-cta.is-said .mn-cta__b { opacity: 1; }
@keyframes mn-cta-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 3px)); }
}
@keyframes mn-tap-ripple {
  0% { transform: scale(0.34); opacity: 0; }
  18% { opacity: 0.9; }
  75% { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* The live region for the blessing line (spoken, shown in the pill). */
.mn-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Safety: never built under reduced motion; hide if they ever appear. */
@media (prefers-reduced-motion: reduce) {
  .mn-cta, .mn-hit, .mn-canvas, .mn-fx, .mn-halo, .mn-rays, .mn-motes, .mn-pool, .mn-flame, .mn-wisp { display: none; }
}