/* scenes/haldi-wedding.css -- scene styles for: haldi, wedding (js/motion/scenes/haldi-wedding.js).
 *
 * Every overlay here is created by the JS only when motion runs (never under reduced
 * motion), is pointer-events:none, and is at most stage-sized with no paint of its own
 * (.hw-fx, .hw-canvas) -- the painting nodes are small. Armed (hidden-before-entrance)
 * states live under html.motion AND .hw-armed (set by the module once its scene is built),
 * so reduced motion / no JS / a failed setup all show the exact PSD frame.
 */

/* armed: hangings, lights, plants and couples wait for their entrance */
/* (.hw-go is added when the module's entrance actually starts -- after the art decodes --
   and on pagehide; until then the armed layers stay hidden instead of flashing their PSD spot) */
html.motion .hw-armed:not(.hw-go) .hw-arm { opacity: 0; }

/* split sprites inside a layer wrapper (parasol strands, peacock): each is the full layer
   size (transparent outside its part), so at rest they tile the layer exactly */
.hw-part {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hw-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hw-canvas {
  position: absolute;
  pointer-events: none;
}

/* ambient petals (a marigold / rose letting go of a string) */
.hw-petal {
  position: absolute;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* bulb flash: a soft warm-white bloom over a measured bulb centre */
.hw-bulb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 240, 1) 0%,
    rgba(255, 238, 180, 0.75) 28%,
    rgba(255, 214, 130, 0.28) 60%,
    rgba(255, 214, 130, 0) 100%);
}
.hw-bulb--fairy {
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 245, 1) 0%,
    rgba(255, 236, 170, 0.8) 26%,
    rgba(255, 200, 110, 0.3) 58%,
    rgba(255, 200, 110, 0) 100%);
}

/* four-point glint (peacock tail eyes, water) */
.hw-glint {
  position: absolute;
  opacity: 0;
  background:
    radial-gradient(circle closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%) center / 100% 8% no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%) center / 8% 100% no-repeat;
}
.hw-glint--water {
  background:
    radial-gradient(circle closest-side, rgba(255, 255, 255, 0.9), rgba(220, 240, 255, 0) 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 250, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) center / 100% 7% no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(240, 250, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) center / 7% 100% no-repeat;
}

/* haldi: warm bloom behind the couple */
.hw-warm {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 222, 140, 0.7) 0%,
    rgba(255, 206, 120, 0.32) 42%,
    rgba(255, 196, 110, 0) 100%);
}

/* wedding: stars in the navy sky (behind all the art) */
.hw-star {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 1) 0%,
    rgba(230, 238, 255, 0.7) 35%,
    rgba(200, 215, 255, 0) 100%);
}
.hw-star--big {
  border-radius: 0;
  background:
    radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 0%, rgba(235, 242, 255, 0.55) 22%, rgba(200, 215, 255, 0) 48%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 246, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) center / 100% 7% no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(240, 246, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) center / 7% 100% no-repeat;
}

/* wedding: candle glow + flame flicker tips */
.hw-candle-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 214, 120, 0.42) 0%,
    rgba(255, 180, 80, 0.2) 45%,
    rgba(255, 170, 70, 0) 100%);
}
.hw-flame {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  transform-origin: 50% 90%;
  background: radial-gradient(ellipse 50% 50% at 50% 62%,
    rgba(255, 255, 235, 1) 0%,
    rgba(255, 228, 140, 0.85) 40%,
    rgba(255, 170, 60, 0) 100%);
}

/* wedding: the channel's sheen + glints (container shares the water layer's z, so the art
   painted above the water hides it for free) */
.hw-water {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.hw-water__band {
  position: absolute;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(235, 248, 255, 0.32) 45%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(235, 248, 255, 0.32) 55%,
    rgba(255, 255, 255, 0) 100%);
}