/* scenes/wedding.css -- js/motion/scenes/wedding.js (Vivah Royale).
 * Every node here is created by wedding.js inside the wedding .stage. Overlays are
 * small (no node bigger than the stage), pointer-events:none except the pill; only
 * transform / opacity animate. "Before the entrance" states are scoped to
 * .scene:not(.is-entered) and the nodes only exist under html.motion, so reduced
 * motion / no JS is the exact PSD frame. */

/* ---------------------------------------------------------------- sky */
.wd-dusk, .wd-sky, .wd-bless { position: absolute; pointer-events: none; }
.wd-sky, .wd-bless { inset: 0; }
.wd-dusk, .wd-sky { z-index: 0; }           /* above the base plane, under every PSD layer */
.wd-dusk {                                  /* twilight lifting into the night (removed after) */
  left: 0;
  top: 0;
  width: 100%;
  height: calc(1500 * var(--u));
  background: linear-gradient(180deg, rgba(112, 98, 158, 0.62) 0%, rgba(122, 104, 160, 0.5) 45%, rgba(170, 120, 140, 0.34) 80%, rgba(170, 120, 140, 0) 100%);
}
.wd-star {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  background: radial-gradient(circle closest-side, #fffef6 0%, rgba(255, 248, 222, 0.85) 28%, rgba(255, 238, 200, 0.22) 62%, rgba(255, 238, 200, 0) 100%);
}
.scene:not(.is-entered) .wd-star { opacity: 0; }

/* ---------------------------------------------------------------- chandeliers */
.wd-swing { position: absolute; inset: 0; }
.wd-glow {                                  /* warm bloom behind the crystals, faint at rest */
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  background: radial-gradient(circle closest-side, rgba(255, 236, 190, 0.75) 0%, rgba(255, 214, 150, 0.38) 34%, rgba(255, 200, 130, 0.12) 66%, rgba(255, 200, 130, 0) 100%);
}
.scene:not(.is-entered) .wd-glow { opacity: 0; }
.wd-glint, .wd-spark {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wd-glint::before, .wd-glint::after, .wd-spark::before, .wd-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 10%;
  margin: -5% 0 0 -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffef6 0%, rgba(255, 246, 214, 0.85) 40%, rgba(255, 240, 200, 0) 100%);
}
.wd-glint::after, .wd-spark::after { transform: rotate(90deg); }
.wd-spark { background: radial-gradient(circle closest-side, rgba(255, 248, 220, 0.95) 0%, rgba(255, 214, 130, 0.55) 16%, rgba(255, 200, 110, 0) 42%); }
.wd-spark::before, .wd-spark::after { height: 14%; margin-top: -7%; }
.wd-spark::before, .wd-spark::after {
  background: radial-gradient(closest-side, #fffbe8 0%, rgba(255, 220, 130, 0.9) 38%, rgba(240, 190, 90, 0) 100%);
}

/* ---------------------------------------------------------------- candles, mirror */
.wd-halo {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.75;
  background: radial-gradient(circle closest-side, rgba(255, 238, 190, 0.9) 0%, rgba(255, 206, 120, 0.45) 36%, rgba(255, 180, 90, 0.12) 70%, rgba(255, 180, 90, 0) 100%);
}
.scene:not(.is-entered) .wd-halo { opacity: 0; }
.wd-sheen {                                  /* masked by the mirror layer's own alpha */
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wd-sheen__band {
  position: absolute;
  left: 0;
  top: -10%;
  width: calc(90 * var(--u));
  height: 120%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 250, 0) 0%, rgba(255, 252, 240, 0.42) 50%, rgba(255, 255, 250, 0) 100%);
}

/* ---------------------------------------------------------------- the blessing */
.wd-bless { z-index: 46; }                   /* above the couple (45) */
.wd-petal { position: absolute; opacity: 0; pointer-events: none; }
.wd-petal img { display: block; width: 100%; height: 100%; }
.wd-cglow {                                  /* behind the couple: same z, earlier in paint order */
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 244, 214, 0.95) 0%, rgba(255, 220, 150, 0.62) 32%, rgba(250, 190, 110, 0.22) 64%, rgba(250, 186, 110, 0) 100%);
}
.wd-cglow.is-on { opacity: 0.75; }          /* reduced motion: a still answer to the tap */

/* "Tap to shower blessings" -- night-toned pill with the gesture in miniature
 * (from suryanshu-rajvi wedding-finale). */
.wd-pill {
  position: absolute;
  z-index: 50;
  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, 24, 60, 0.78);
  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, 8, 28, 0.5);
  color: #fbf4e4;
  font: 400 max(12px, calc(33 * 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;
}
.wd-pill::before {                           /* >= 44 px tap target round a ~30 px pill */
  content: "";
  position: absolute;
  inset: -9px -6px;
  border-radius: 999px;
}
.wd-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;
}
html.motion .wd-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: wd-pill-float 2.6s ease-in-out 0.7s infinite;
}
html.motion .wd-pill.is-on::after { animation: wd-pill-breath 2.6s ease-in-out 0.7s infinite; }
/* used once (or reduced motion): out of sight, still reachable by keyboard */
html.motion .wd-pill.is-used, html:not(.motion) .wd-pill { visibility: visible; transition: opacity 450ms ease, transform 600ms ease; }
html:not(.motion) .wd-pill { transform: none; transition: none; }
.wd-pill:focus-visible { opacity: 1; outline: 2px solid #f1d9a4; outline-offset: 4px; }
.wd-pill:active { scale: 0.96; }
.wd-pill__t { position: relative; }
@keyframes wd-pill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-8 * var(--u))); } }
@keyframes wd-pill-breath { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* the tap gesture: a resting ring, two rings breaking outward, a beating core */
.wd-tap {
  position: relative;
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}
.wd-tap::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: calc(3 * var(--u)) solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
}
.wd-tap > span {
  position: absolute;
  inset: 0;
  border: calc(3.5 * var(--u)) solid currentColor;
  border-radius: 50%;
  opacity: 0;
}
html.motion .wd-pill.is-on .wd-tap > span { animation: wd-ring-out 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite; }
html.motion .wd-pill.is-on .wd-tap > span + span { animation-delay: 300ms; }
.wd-tap > 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);
}
html.motion .wd-pill.is-on .wd-tap > i { animation: wd-core-beat 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite; }
@keyframes wd-ring-out {
  0% { opacity: 0; transform: scale(0.3); }
  6% { opacity: 1; }
  32%, 100% { opacity: 0; transform: scale(1.16); }
}
@keyframes wd-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); }
}

/* status line: announced to screen readers; shown as a caption only with reduced motion */
.wd-status {
  position: absolute;
  z-index: 50;
  translate: -50% -50%;
  padding: calc(14 * var(--u)) calc(34 * var(--u));
  border-radius: 999px;
  background: rgba(14, 24, 60, 0.78);
  box-shadow: inset 0 0 0 calc(2.6 * var(--u)) rgba(232, 210, 162, 0.62);
  color: #fbf4e4;
  font: 400 max(12px, calc(33 * var(--u)))/1.2 "Quattrocento", Georgia, serif;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
html:not(.motion) .wd-status.is-on { opacity: 1; }
html:not(.motion) .stage:has(.wd-status.is-on) .wd-pill { opacity: 0; }