/* blessing.css — "Tap to shower blessings" on the Wedding Ceremony slide.
 * Owned by blessing.js. Ported from muskan-shourya (css/scenes/wedding.css +
 * the hint parts of css/fx/kit.css) so it looks and moves the same.
 *
 * Every length here is a DESIGN px of the 1080x1920 slide: .wd-frame is a
 * 1080x1920 box that blessing.js scales to the stage, exactly like the paged
 * template's .scene__frame. Motion is transform / opacity only.
 */

.wd-frame {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40; /* over every artwork layer and the event copy */
  width: 1080px;
  height: 1920px;
  transform-origin: 0 0;
  transform: scale(var(--wd-k, 0.3611));
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* ------------------------------------------------------------------ petals */
/* Wrapper takes the fall (or the lift), the <img> inside takes the spin. */

.wd-petal {
  position: absolute;
  left: var(--x, 540px);
  top: var(--y, 1200px);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
}

.wd-petal__img {
  display: block;
  width: var(--w, 32px);
  height: var(--h, 24px);
  filter: drop-shadow(0 1px 2px rgba(84, 44, 58, 0.18));
}

/* ----------------------------------------------------------- blessing ring */

.wd-hold {
  position: absolute;
  left: var(--x, 540px);
  top: var(--y, 1236px);
  z-index: 478;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.wd-hold.is-on {
  opacity: 1;
}

.wd-hold > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s, 108px);
  height: var(--s, 108px);
  margin: calc(var(--s, 108px) / -2) 0 0 calc(var(--s, 108px) / -2);
  border-radius: 50%;
}

.wd-hold__ring {
  --s: 112px;
  border: 4px solid rgba(255, 252, 244, 0.95);
  box-shadow: 0 0 26px rgba(226, 190, 128, 0.6), inset 0 0 14px rgba(226, 190, 128, 0.3);
}

.wd-hold__fill {
  --s: 98px;
  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 22px rgba(240, 214, 158, 0.65);
  transform: scale(0.12);
}

/* ------------------------------------------------------------- glow + bloom */

.wd-glow {
  position: absolute;
  left: 130px; /* centred on the couple (x 530) */
  top: 1240px;
  z-index: 290;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 248, 226, 0.95) 0%, rgba(246, 226, 176, 0.5) 42%, rgba(232, 204, 150, 0) 72%);
  opacity: 0;
  pointer-events: none;
}

/* Bounded light the blessing lets go: never bigger than the slide, never scaled past 1. */
.wd-bloom {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  z-index: 250;
  width: var(--d, 1080px);
  height: var(--d, 1080px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 252, 244, 0.98) 0%,
    rgba(255, 240, 210, 0.9) 28%,
    rgba(240, 214, 158, 0.5) 54%,
    rgba(226, 190, 128, 0) 78%
  );
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------- hit target */

.wd-hit {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  z-index: 470;
  width: var(--w, 0px);
  height: var(--h, 0px);
  padding: 0;
  border: 0;
  border-radius: 60px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.wd-hit:disabled {
  cursor: default;
}

.wd-hit:focus-visible {
  outline: 4px solid #e8d2a2;
  outline-offset: -10px;
}

/* -------------------------------------------------------------------- hint */
/* muskan-shourya's tap hint, in its night-scene tone (this slide is navy). */

.fx-hint {
  --fx-ink: rgba(255, 252, 246, 0.98);
  --fx-glow: rgba(196, 96, 118, 0.42);
  --fx-plate: radial-gradient(
    closest-side,
    rgba(232, 210, 162, 0.2) 0%,
    rgba(201, 163, 92, 0.11) 44%,
    rgba(201, 163, 92, 0) 76%
  );
  --fx-chip-bg: rgba(19, 45, 88, 0.68);
  --fx-chip-ring: rgba(232, 210, 162, 0.58);
  --fx-chip-ink: #fbf7ef;
  --fx-chip-shadow: rgba(3, 12, 33, 0.5);
  position: absolute;
  left: var(--fx-x, 540px);
  top: var(--fx-y, 960px);
  z-index: 480;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.fx-hint.is-on {
  opacity: 1;
}

.fx-hint > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fx-s, 40px);
  height: var(--fx-s, 40px);
  margin: calc(var(--fx-s, 40px) / -2) 0 0 calc(var(--fx-s, 40px) / -2);
  border-radius: 50%;
  animation-delay: calc(var(--fx-i, 0) * 300ms);
  animation-duration: 2200ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.fx-hint__plate {
  --fx-s: 320px;
  background: var(--fx-plate);
}

.fx-hint__ring {
  --fx-s: 200px;
  border: 10px solid var(--fx-ink);
  box-shadow: 0 0 30px var(--fx-glow), inset 0 0 20px rgba(201, 163, 92, 0.3);
  animation-name: fx-ring-out;
}

.fx-hint__core {
  --fx-s: 46px;
  background: radial-gradient(circle at 50% 42%, #fffdf7 0%, var(--fx-ink) 52%, rgba(201, 163, 92, 0.55) 100%);
  box-shadow: 0 0 16px rgba(255, 250, 235, 0.7), 0 0 34px var(--fx-glow);
  animation-name: fx-core-beat;
  animation-delay: 0ms;
}

@keyframes fx-ring-out {
  0% { opacity: 0; transform: scale(0.3); }
  6% { opacity: 1; }
  32%, 100% { opacity: 0; transform: scale(1.16); }
}

@keyframes fx-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); }
}

.fx-hint__chip {
  position: absolute;
  left: var(--fx-chip-x, 0px);
  top: var(--fx-chip-y, 0px);
  z-index: 2;
  width: max-content;
  max-width: 780px;
  margin: 0;
  padding: 19px 42px 21px;
  border-radius: 999px;
  background: var(--fx-chip-bg);
  box-shadow:
    inset 0 0 0 3px var(--fx-chip-ring),
    0 12px 34px var(--fx-chip-shadow);
  color: var(--fx-chip-ink);
  font: 400 38px/1.3 "Georgia", "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.11em;
  text-align: center;
  text-indent: 0.11em;
  transform: translate3d(-50%, calc(-50% + 14px), 0);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-hint.is-on .fx-hint__chip {
  transform: translate3d(-50%, -50%, 0);
}

/* reduced motion: one static frame, still a legible affordance */
.fx-hint.is-still > span {
  animation: none !important;
  opacity: 1;
}