/* scenes/wedding-finale.css -- styles for js/motion/scenes/wedding-finale.js (wedding (PDF p7) + presence (PDF p8) + venue (PDF p9)).
   OWNER: the wedding-finale motion agent (edit only this file + its JS).
   Armed (hidden-before-entrance) states live ONLY under html.motion, so reduced motion /
   no JS shows the exact PSD frame. Every overlay is created by the JS (motion only, except
   the credit line), is pointer-events:none unless it is a control, and is never larger
   than its stage. Only transform / opacity animate; no filter / blend / will-change on
   anything big. Lengths are design px: calc(N * var(--u)). */

/* ------------------------------------------------------------------ armed */
html.motion [data-scene="wedding"]:not(.is-entered) :is([data-layer="drapes"], [data-layer="drapes-top"],
  [data-layer="string-lights-left"], [data-layer="string-lights-right"], [data-layer="chandelier-left"],
  [data-layer="chandelier-right"], [data-layer="warm-glow"],
  [data-layer^="fairy-lights-"], [data-layer="couple"], [data-layer^="lotus-"], [data-layer^="petals-"]),
html.motion [data-scene="wedding"]:not(.is-entered) :is(.wf-firehalo, .wf-firefloor, .wf-agni__flame),
html.motion [data-scene="presence"]:not(.is-entered) :is([data-layer^="pillars-"], [data-layer="taj-mahal"],
  [data-layer^="tree-"], [data-layer="fountain"], .wf-sun),
html.motion [data-scene="venue"]:not(.is-entered) :is([data-layer="map"], [data-layer="button"],
  [data-layer^="border-"], [data-text="venue.way-to-the-celebration"] .tl, .wf-credit) {
  opacity: 0;
}

/* the mandap (and the vedi on it) waits LOW, never invisible: hiding it would bare the
   grass / balustrade seam behind it */
html.motion [data-scene="wedding"]:not(.is-entered) :is([data-layer="mandap"], [data-layer="agni"]) {
  transform: translateY(calc(48 * var(--u)));
}

/* shared containers: stage-sized, unpainted, never hit-tested */
.wf-embers, .wf-sparkle, .wf-bless, .wf-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wf-bless { z-index: 40; -webkit-touch-callout: none; }

/* ================================================================ WEDDING */

/* agni split: the shipped layer hides only once vedi + flame have decoded */
.wf-agni__vedi, .wf-agni__flame { position: absolute; display: block; }
.wf-agni__vedi { inset: 0; width: 100%; height: 100%; opacity: 0; }
.wf-agni__flame { opacity: 0; transform-origin: 50% 100%; }
.wf-agni__flame img { width: 100%; height: 100%; transform-origin: 50% 100%; }
.wf-agni.is-split > img:first-child { opacity: 0; }
.wf-agni.is-split .wf-agni__vedi, .wf-agni.is-split .wf-agni__flame { opacity: 1; }

/* the light the fire throws: a halo round the flame + a pool on the steps */
.wf-firehalo, .wf-firefloor {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.wf-firehalo {
  background: radial-gradient(circle closest-side,
    rgba(255, 196, 110, 0.5) 0%, rgba(255, 150, 70, 0.26) 34%, rgba(255, 120, 50, 0.1) 62%, rgba(255, 120, 50, 0) 100%);
}
.wf-firefloor {
  background: radial-gradient(closest-side,
    rgba(255, 190, 110, 0.34) 0%, rgba(255, 160, 80, 0.14) 55%, rgba(255, 150, 70, 0) 100%);
}

.wf-ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #ffc45c 38%, rgba(255, 120, 40, 0.55) 62%, rgba(255, 100, 30, 0) 100%);
  opacity: 0;
}

/* bulb + crystal twinkles */
.wf-bulb, .wf-crystal {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wf-bulb {
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 252, 236, 0.95) 0%, rgba(255, 222, 150, 0.6) 30%, rgba(255, 200, 120, 0.18) 62%, rgba(255, 200, 120, 0) 100%);
}
.wf-crystal::before, .wf-crystal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 9%;
  margin: -4.5% 0 0 -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffef6 0%, rgba(255, 246, 210, 0.85) 40%, rgba(255, 240, 200, 0) 100%);
}
.wf-crystal::after { transform: rotate(90deg); }

/* water: light sweep, ripples, glints -- clipped to the water band */
.wf-water {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.wf-water__band {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(300 * var(--u));
  height: 100%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(235, 245, 255, 0.2) 45%, rgba(255, 255, 255, 0.26) 50%, rgba(235, 245, 255, 0.2) 55%, rgba(255, 255, 255, 0) 100%);
}
.wf-water--day .wf-water__band {
  width: calc(240 * var(--u));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 248, 255, 0.1) 45%, rgba(255, 255, 255, 0.16) 50%, rgba(240, 248, 255, 0.1) 55%, rgba(255, 255, 255, 0) 100%);
}
.wf-water--night .wf-water__band { background: linear-gradient(90deg, rgba(200, 225, 255, 0) 0%, rgba(200, 225, 255, 0.14) 45%, rgba(230, 242, 255, 0.2) 50%, rgba(200, 225, 255, 0.14) 55%, rgba(200, 225, 255, 0) 100%); }
.wf-water__ripple {
  position: absolute;
  border-radius: 50%;
  border: calc(2.4 * var(--u)) solid rgba(255, 255, 255, 0.6);
  opacity: 0;
}
.wf-water--night .wf-water__ripple { border-color: rgba(214, 234, 255, 0.5); }
.wf-water__glint {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, #ffffff 0%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0) 100%);
}

/* ---------------------------------------------------------- the blessing */
.wf-bless__hit {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border-radius: calc(80 * var(--u));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wf-petal {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wf-petal img { display: block; width: 100%; height: 100%; }
.wf-bless__glow {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 248, 226, 0.95) 0%, rgba(246, 226, 176, 0.5) 42%, rgba(232, 204, 150, 0) 100%);
}
.wf-bless__bloom {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 252, 244, 0.98) 0%, rgba(255, 240, 210, 0.9) 36%, rgba(240, 214, 158, 0.5) 69%, rgba(226, 190, 128, 0) 100%);
}
.wf-bless__ring {
  position: absolute;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-bless__ring.is-on { opacity: 1; }
.wf-bless__ring > span {
  position: absolute;
  border-radius: 50%;
}
.wf-bless__edge {
  inset: 0;
  border: calc(4 * var(--u)) solid rgba(255, 252, 244, 0.95);
  box-shadow: 0 0 calc(26 * var(--u)) rgba(226, 190, 128, 0.6), inset 0 0 calc(14 * var(--u)) rgba(226, 190, 128, 0.3);
}
.wf-bless__fill {
  inset: calc(7 * var(--u));
  background: radial-gradient(circle at 50% 42%, #fffdf7 0%, rgba(255, 246, 224, 0.95) 46%, rgba(226, 190, 128, 0.55) 100%);
  box-shadow: 0 0 calc(22 * var(--u)) rgba(240, 214, 158, 0.65);
  transform: scale(0.12);
}

/* "Tap to shower blessings" -- the night-toned pill with the gesture in miniature */
.wf-pill {
  position: absolute;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0;
  padding: calc(15 * var(--u)) calc(40 * var(--u)) calc(15 * var(--u)) calc(22 * var(--u));
  border: 0;
  border-radius: 999px;
  background: rgba(14, 34, 72, 0.74);
  box-shadow: inset 0 0 0 calc(2.6 * var(--u)) rgba(232, 210, 162, 0.62), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(3, 12, 33, 0.5);
  color: #fbf4e4;
  font: 400 max(12.5px, calc(36 * var(--u)))/1.2 "Quattrocento", Georgia, serif;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity 450ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 600ms;
}
.wf-pill::before {           /* >= 44 px tap target round a ~30 px pill */
  content: "";
  position: absolute;
  inset: -9px -6px;
  border-radius: 999px;
}
.wf-pill::after {            /* a slow gold breath round the rim */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 calc(30 * var(--u)) rgba(240, 206, 140, 0.55);
  opacity: 0;
}
.wf-pill.is-on {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 450ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  animation: wf-pill-float 2.6s ease-in-out 0.7s infinite;
}
.wf-pill.is-on::after { animation: wf-pill-breath 2.6s ease-in-out 0.7s infinite; }
.wf-pill:active { scale: 0.96; }
.wf-pill:focus-visible { outline: 2px solid #f1d9a4; outline-offset: 4px; }
.wf-pill__t { position: relative; }
@keyframes wf-pill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-8 * var(--u))); } }
@keyframes wf-pill-breath { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* the tap gesture: a resting ring, two rings breaking outward, a beating core */
.wf-tap, .wf-fountain-hint {
  position: relative;
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}
.wf-tap::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: calc(3 * var(--u)) solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
}
.wf-tap > span, .wf-fountain-hint > span {
  position: absolute;
  inset: 0;
  border: calc(3.5 * var(--u)) solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: wf-ring-out 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
.wf-tap > span + span, .wf-fountain-hint > span + span { animation-delay: 300ms; }
.wf-tap > i, .wf-fountain-hint > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 34%;
  margin: -17% 0 0 -17%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fffdf7 0%, #fbf4e4 52%, rgba(201, 163, 92, 0.6) 100%);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 246, 220, 0.75);
  animation: wf-core-beat 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
@keyframes wf-ring-out {
  0% { opacity: 0; transform: scale(0.3); }
  6% { opacity: 1; }
  32%, 100% { opacity: 0; transform: scale(1.16); }
}
@keyframes wf-core-beat {
  0% { transform: scale(1); }
  4% { transform: scale(1.26); }
  11% { transform: scale(1); }
  18% { transform: scale(1.22); }
  26%, 100% { transform: scale(1); }
}

/* =============================================================== PRESENCE */
.wf-sun {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 232, 186, 0.75) 0%, rgba(255, 214, 160, 0.42) 32%, rgba(255, 200, 150, 0.14) 62%, rgba(255, 200, 150, 0) 100%);
}
/* a warm band that climbs the marble, masked by the Taj layer's own alpha */
.wf-sheen {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.wf-sheen__band {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 46%;
  opacity: 0;
  background: linear-gradient(0deg, rgba(255, 214, 150, 0) 0%, rgba(255, 222, 168, 0.5) 45%, rgba(255, 246, 222, 0.62) 52%, rgba(255, 214, 150, 0) 100%);
}

.wf-birds { position: absolute; pointer-events: none; }
.wf-bird { position: absolute; opacity: 0; }
.wf-bird svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #5d4c56;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf-drift__p { position: absolute; opacity: 0; }
.wf-drift__p img { display: block; width: 100%; height: 100%; }

.wf-fountain { position: absolute; pointer-events: none; }
.wf-fountain-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.wf-fountain-hit:focus-visible { outline: 2px solid #9b3a43; outline-offset: -2px; }
.wf-fountain-hint {
  position: absolute;
  width: auto;
  height: auto;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.wf-fountain-hint.is-on { opacity: 1; }
.wf-fountain-hint:not(.is-on) > * { animation-play-state: paused; }
.wf-fountain-hint > span {
  border-width: calc(3 * var(--u));
  box-shadow: 0 0 calc(8 * var(--u)) rgba(80, 100, 130, 0.45), inset 0 0 calc(8 * var(--u)) rgba(80, 100, 130, 0.3);
  animation-duration: 2.8s;
}

/* ================================================================== VENUE */
.wf-card-shadow {
  position: absolute;
  pointer-events: none;
  border-radius: calc(36 * var(--u));
  background: rgba(70, 60, 48, 0.001);
  box-shadow: 0 calc(46 * var(--u)) calc(90 * var(--u)) rgba(70, 58, 44, 0.32), 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(70, 58, 44, 0.18);
  opacity: 0;
}
.wf-pin, .wf-pin-patch, .wf-pin-ripple { position: absolute; display: block; opacity: 0; pointer-events: none; }
.wf-pin-ripple, .wf-pin-ripple > i {
  border-radius: 50%;
  border: calc(3 * var(--u)) solid rgba(226, 58, 48, 0.7);
}
.wf-pin-ripple > i { position: absolute; inset: -3px; opacity: 0; }

.wf-embed {
  position: absolute;
  overflow: hidden;
  border-radius: calc(26 * var(--u));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #f4f1ea;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.wf-embed.is-live {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 900ms ease, visibility 0s linear 0s;
}
.wf-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.wf-embed::after {           /* the screenshot card's soft inner rim, kept over the live map */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.85), inset 0 0 calc(10 * var(--u)) rgba(120, 110, 100, 0.18);
  pointer-events: none;
}

.wf-cta-glow {
  position: absolute;
  pointer-events: none;
  border-radius: calc(30 * var(--u));
  box-shadow: 0 0 calc(34 * var(--u)) calc(6 * var(--u)) rgba(222, 112, 146, 0.55);
  opacity: 0;
}
.wf-cta-shine {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  border-radius: calc(26 * var(--u));
}
.wf-cta-shine__band {
  position: absolute;
  left: 0;
  top: -10%;
  width: 34%;
  height: 120%;
  transform: translateX(-140%) skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
}
.wf-cta-ripple {
  position: absolute;
  width: calc(520 * var(--u));
  height: calc(520 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* studio credit -- also shown with reduced motion (content, not motion) */
.wf-credit {
  position: absolute;
  z-index: 60;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(24 * var(--u));
  white-space: nowrap;
  font: 400 max(11px, calc(29 * var(--u)))/1.2 "Quattrocento", Georgia, serif;
  letter-spacing: 0.08em;
  color: #6d7a3c;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(109, 122, 60, 0.45);
  text-underline-offset: 0.28em;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.wf-credit:hover { color: #4e5a22; text-decoration-color: currentColor; }
.wf-credit:focus-visible { outline: 2px solid #59692b; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .wf-bless, .wf-embers, .wf-sparkle, .wf-drift, .wf-fountain, .wf-fountain-hint, .wf-birds { display: none; }
}