/* moments.css -- one signature ambient moment per slide (js/motion/moments.js).
 * See js/motion/kit.js for the contract. Overlays exist only when motion runs
 * (moments.js builds nothing under reduced motion); they show only while their
 * scene is on screen (.mo-on). Paint is gradients only: no filter, no blend
 * modes, no will-change; motion is transform/opacity via WAAPI. */

.mo { position: absolute; inset: 0; pointer-events: none; display: none; }
.mo--bg { z-index: 0; overflow: hidden; }   /* just above img.base, below the arch */
.mo--card { z-index: 1; }                   /* just above the arch, below florals + text */
.mo-on > .stage > .mo { display: block; }
.mo-p { position: absolute; pointer-events: none; border-radius: 50%; opacity: 0; }

/* welcome-dinner: candle-light pooled low in the card (warm amber on cream) */
.mo-glow { border-radius: 0; }
.mo-glow--candle {
  background: radial-gradient(ellipse 50% 80% at 50% 80%,
    rgba(255, 172, 88, 0.32), rgba(255, 186, 112, 0.15) 45%, rgba(255, 196, 130, 0) 100%);
}
.mo-glow--candle-core {
  background: radial-gradient(ellipse 50% 70% at 50% 70%,
    rgba(255, 158, 64, 0.28), rgba(255, 176, 96, 0.11) 50%, rgba(255, 190, 120, 0) 100%);
}
/* grah-shantak: diya glow, a touch rosier to sit with the pink frame */
.mo-glow--diya {
  transform-origin: 50% 80%;
  background: radial-gradient(ellipse 50% 80% at 50% 80%,
    rgba(255, 146, 76, 0.36), rgba(255, 170, 120, 0.15) 48%, rgba(255, 190, 150, 0) 100%);
}
/* wedding: warm halo behind the title */
.mo-glow--halo {
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255, 190, 130, 0.34), rgba(255, 205, 160, 0.14) 55%, rgba(255, 215, 175, 0) 100%);
}

/* tiny light motes */
.mo-mote--amber { background: radial-gradient(circle, rgba(255, 240, 200, 1) 0 12%, rgba(255, 170, 80, 0.5) 30%, rgba(255, 170, 80, 0) 70%); }
.mo-mote--gold  { background: radial-gradient(circle, rgba(255, 238, 190, 1) 0 12%, rgba(226, 186, 100, 0.5) 30%, rgba(226, 186, 100, 0) 70%); }

/* haldi-mehendi: turmeric-gold dust (deeper saffron halo so it reads on pale yellow) */
.mo-speck { background: radial-gradient(circle, rgba(255, 236, 160, 1) 0 13%, rgba(212, 140, 24, 0.6) 30%, rgba(212, 140, 24, 0) 70%); }

/* sangeet: four-point star glint -- two tapered rays + a soft core */
.mo-spark {
  border-radius: 0;
  background:
    radial-gradient(circle, rgba(255, 252, 232, 1) 0 4%, rgba(255, 226, 150, 0.6) 9%, rgba(255, 214, 130, 0.14) 20%, rgba(255, 214, 130, 0) 34%),
    radial-gradient(ellipse 50% 5% at 50% 50%, rgba(255, 240, 196, 1), rgba(255, 224, 150, 0.35) 45%, rgba(255, 220, 140, 0) 100%),
    radial-gradient(ellipse 5% 50% at 50% 50%, rgba(255, 240, 196, 1), rgba(255, 224, 150, 0.35) 45%, rgba(255, 220, 140, 0) 100%);
}

/* reception: soft bokeh (radial gradients, no blur filter) */
.mo-bokeh--lilac { background: radial-gradient(circle, rgba(246, 214, 246, 0.5) 0, rgba(226, 186, 236, 0.22) 38%, rgba(214, 170, 228, 0.08) 58%, rgba(214, 170, 228, 0) 70%); }
.mo-bokeh--gold  { background: radial-gradient(circle, rgba(255, 228, 182, 0.48) 0, rgba(240, 200, 150, 0.20) 38%, rgba(230, 190, 140, 0.07) 58%, rgba(230, 190, 140, 0) 70%); }

/* rsvp: a gold underline that draws left -> right on hover / focus / tap.
 * Replaces stage.css's hover text-decoration on these links. Works without JS;
 * under reduced motion it simply appears. */
/* inline-block so the link box hugs its text (.tl is font-size:0, which would
   leave a plain inline <a> zero-height on the baseline); baseline is unchanged. */
.scene--rsvp .tl a.ln { position: relative; display: inline-block; border-radius: calc(4 * var(--u)); outline-offset: calc(10 * var(--u)); }
.scene--rsvp .tl a.ln:hover .r { text-decoration: none; }
.scene--rsvp .tl a.ln::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(10 * var(--u));           /* the PSD lines carry a trailing space */
  bottom: calc(-2 * var(--u));          /* just under the line, clear of descenders */
  height: calc(4 * var(--u));
  background: linear-gradient(90deg, rgba(201, 162, 78, 0.2), #c9a24e 18%, #d9b45d 82%, rgba(217, 180, 93, 0.2));
  border-radius: calc(2 * var(--u));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.scene--rsvp .tl a.ln:hover::after,
.scene--rsvp .tl a.ln:focus-visible::after,
.scene--rsvp .tl a.ln:active::after { transform: scaleX(1); }

/* last: "Open Map" -- a gentle ring every few seconds + a soft press state */
.scene--last a.hit::before,
.scene--last a.hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(15.5 * var(--u));
  pointer-events: none;
}
.scene--last a.hit::before {
  background: rgba(217, 180, 93, 0.2);
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.scene--last a.hit:active::before { opacity: 1; transform: scale(0.97); transition-duration: 0.06s; }
@media (hover: hover) { .scene--last a.hit:hover::before { opacity: 0.5; } }
.scene--last a.hit::after {
  border: calc(3 * var(--u)) solid rgba(217, 180, 93, 0.9);
  opacity: 0;
}
html.motion .scene--last.mo-on a.hit::after { animation: mo-ring 4.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s infinite; }
html.motion .scene--last.mo-on a.hit:active::after { animation-play-state: paused; }
@keyframes mo-ring {
  0%   { opacity: 0;    transform: scale(1); }
  6%   { opacity: 0.85; transform: scale(1.005); }
  42%  { opacity: 0;    transform: scale(1.07, 1.32); }
  100% { opacity: 0;    transform: scale(1.07, 1.32); }
}

@media (prefers-reduced-motion: reduce) {
  .scene--rsvp .tl a.ln::after,
  .scene--last a.hit::before { transition: none; }
}