/* scenes/sangeet-baraat.css -- styles for js/motion/scenes/sangeet-baraat.js (sangeet (PDF p4) + baraat (PDF p6)).
   OWNER: the sangeet-baraat motion agent (edit only this file + its JS).

   Every node styled here is created by the JS at runtime, and only when motion runs
   (reduced motion / no JS -> none of it exists and the slide is the exact PSD frame).
   Armed states are scoped under html.motion. Coordinates are design px (1 px = var(--u),
   set inline by the JS). Overlays are small, or at most stage-sized plain-colour /
   gradient sheets that only ever animate transform + opacity. */

.sb-fx {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* ================================================================== SANGEET
   Resting (lit) values are the plain rules; the dimmed "before the lights" state is
   the html.motion [data-scene=sangeet]:not(.sb-lit) rules. The light-up runs WAAPI
   with fill:backwards from those values, so adding .sb-lit never flashes. */

/* A flat night sheet over the art (below the live text, z 13). Zero raster cost. */
.sb-dim { inset: 0; background: #04060e; opacity: 0; }
html.motion [data-scene="sangeet"]:not(.sb-lit) .sb-dim { opacity: 0.64; }

/* The couple paints above the text (z 20), so it gets its own dark sheet cut to its
   silhouette (mask = its own art); removed once the lights are on. */
.sb-couple-dim {
  background: #04060e;
  opacity: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html.motion [data-scene="sangeet"]:not(.sb-lit) .sb-couple-dim { opacity: 0.6; }

/* Lights "off": the SCREEN light layers and the bulb strands sit low until lit. */
html.motion [data-scene="sangeet"]:not(.sb-lit) .ly[data-layer="curtain-lights"] { opacity: 0.1; }
html.motion [data-scene="sangeet"]:not(.sb-lit) .ly:is([data-layer="string-lights-left"], [data-layer="string-lights-right"]) { opacity: 0.32; }

/* Hanging lamps + mirror balls drop in from above the frame on first view. */
html.motion [data-scene="sangeet"]:not(.sb-go) .ly:is([data-layer="lamps-1"], [data-layer="lamps-2"], [data-layer="disco-ball-1"], [data-layer="disco-ball-2"]) {
  transform: translateY(-105%);
}

/* Warm glows, all radial gradients on small nodes. */
.sb-lamp-glow {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 228, 170, 0.95) 0%,
    rgba(255, 205, 140, 0.5) 22%,
    rgba(255, 185, 120, 0.18) 52%,
    rgba(255, 185, 120, 0) 100%);
  opacity: 0.85;
}
html.motion [data-scene="sangeet"]:not(.sb-lit) .sb-lamp-glow { opacity: 0.14; }

.sb-bulb {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 248, 1) 0%,
    rgba(255, 240, 205, 0.75) 18%,
    rgba(255, 220, 160, 0.22) 50%,
    rgba(255, 220, 160, 0) 100%);
  opacity: 0.85;
}
html.motion [data-scene="sangeet"]:not(.sb-lit) .sb-bulb { opacity: 0; }

/* Mirror-ball sheen: a soft diagonal band travelling across a circle-clipped window. */
.sb-sheen { border-radius: 50%; overflow: hidden; opacity: 1; }
.sb-sheen > i {
  position: absolute;
  inset: -10% 30%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 252, 240, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-260%) rotate(18deg);
  opacity: 0.55;
}
.sb-ball-flash {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(230, 240, 255, 0.4) 30%,
    rgba(220, 235, 255, 0) 100%);
  opacity: 0;
}

/* Spotlight: a soft trapezoid of haze, visible only below the text block (the
   vertical mask keeps the upper half clear), hanging from a point above the frame. */
.sb-cone {
  transform-origin: 50% 0;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg,
    rgba(255, 238, 205, 0) 0%,
    rgba(255, 238, 205, 0.85) 32%,
    rgba(255, 244, 222, 1) 50%,
    rgba(255, 238, 205, 0.85) 68%,
    rgba(255, 238, 205, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.15) 64%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.15) 64%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
  opacity: 1;
}
.sb-pool {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 236, 200, 0.42) 0%,
    rgba(255, 228, 185, 0.18) 50%,
    rgba(255, 228, 185, 0) 100%);
  opacity: 1;
}
.sb-rim {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 226, 182, 0.42) 0%,
    rgba(255, 214, 165, 0.2) 42%,
    rgba(255, 214, 165, 0.06) 66%,
    rgba(255, 214, 165, 0) 100%);
  opacity: 1;
}
html.motion [data-scene="sangeet"]:not(.sb-lit) :is(.sb-cone, .sb-pool, .sb-rim) { opacity: 0; }

/* ================================================================== BARAAT */

html.motion [data-scene="baraat"]:not(.sb-go) .ly:is([data-layer^="chandelier-"]) { transform: translateY(-110%); }
html.motion [data-scene="baraat"]:not(.sb-go) .ly:is([data-layer^="drape-"]) { opacity: 0; }
html.motion [data-scene="baraat"]:not(.sb-go) .ly:is([data-layer="groom-horse"], [data-layer="trumpeter"], [data-layer="guests"]) { opacity: 0; }
html.motion [data-scene="baraat"]:not(.sb-go) .ly:is([data-layer="palm-lights-left"], [data-layer="palm-lights-right"]) > img { opacity: 0.15; }

/* chandelier-3 is one PSD layer holding two chandeliers: the JS clips it into two
   halves (this node + a clone) so each can swing from its own chain. */
.sb-half-l { clip-path: inset(0 50.1% 0 0); }
.sb-half-r { clip-path: inset(0 0 0 49.9%); }

.sb-stars { inset: 0; }
.sb-star {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 248, 225, 0.6) 35%,
    rgba(255, 248, 225, 0) 100%);
}
.sb-star.sb-spark { opacity: 1; }
html.motion [data-scene="baraat"]:not(.sb-go) .sb-star { opacity: 0; }

.sb-fairy {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 245, 1) 0%,
    rgba(255, 238, 190, 0.7) 22%,
    rgba(255, 215, 140, 0.2) 55%,
    rgba(255, 215, 140, 0) 100%);
}
html.motion [data-scene="baraat"]:not(.sb-go) .sb-fairy { opacity: 0; }

.sb-note { color: #f3d18a; }
.sb-note svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* ================================================================== shared */

/* Four-point crystal glint (mirror balls, chandeliers, stars). */
.sb-spark { opacity: 0; }
.sb-spark::before,
.sb-spark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 46%;
  width: 100%;
  height: 8%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
}
.sb-spark::after { transform: rotate(90deg); }
.sb-spark > i {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0%, rgba(255, 250, 230, 0.6) 45%, rgba(255, 250, 230, 0) 100%);
}

.sb-canvas { display: block; }

/* CTA pill (both slides): a real button, night-glass chip with a tap ripple. */
.sb-cta {
  --sb-ty: 0%;
  position: absolute;
  left: 50%;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 36px;
  margin: 0;
  padding: 0.4em 1.05em 0.4em 0.8em;
  border: 1px solid rgba(248, 231, 196, 0.55);
  border-radius: 999px;
  background: rgba(14, 14, 24, 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #f8e7c4;
  font-family: "Quattrocento", Georgia, serif;
  font-size: clamp(13px, calc(34 * var(--u)), 17px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 245, 225, 0.18), 0 0 18px rgba(255, 214, 150, 0.12);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(var(--sb-ty) + 8px));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}
.sb-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, var(--sb-ty));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  animation: sb-cta-float 2.8s ease-in-out 0.7s infinite;
}
/* tap target >= 44px: an invisible hit extension around the 36px chip */
.sb-cta::before { content: ""; position: absolute; inset: -6px -4px; }
.sb-cta.is-busy { opacity: 0.45; }
.sb-cta:hover { border-color: rgba(255, 236, 200, 0.85); }
.sb-cta:active { background: rgba(30, 26, 40, 0.7); }
.sb-cta:focus-visible { outline: 2px solid #f3d18a; outline-offset: 4px; }
.sb-cta__tap { position: relative; flex: none; width: 1.5em; height: 1.5em; }
.sb-cta__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.25em;
  border-radius: 50%;
  background: #f3d18a;
  box-shadow: 0 0 8px rgba(255, 210, 130, 0.9);
}
.sb-cta__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: -0.75em 0 0 -0.75em;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 209, 138, 0.9);
  transform: scale(0.34);
  opacity: 0;
}
.sb-cta.is-visible .sb-cta__ring { animation: sb-tap-ripple 2.6s ease-out infinite; }
.sb-cta.is-visible .sb-cta__ring + .sb-cta__ring { animation-delay: 1.3s; }
[data-scene].sb-away .sb-cta, [data-scene].sb-away .sb-cta__ring { animation-play-state: paused; }

/* sangeet: centred in the dark gap between the venue line and the couple's hands */
[data-scene="sangeet"] .sb-cta { top: calc(966 * var(--u)); --sb-ty: -50%; }
/* baraat: on the aisle, below the horse's hooves */
[data-scene="baraat"] .sb-cta { bottom: calc(26 * var(--u)); }

@keyframes sb-cta-float {
  0%, 100% { transform: translate(-50%, var(--sb-ty)); }
  50% { transform: translate(-50%, calc(var(--sb-ty) - 3px)); }
}
@keyframes sb-tap-ripple {
  0% { transform: scale(0.34); opacity: 0; }
  18% { opacity: 0.9; }
  75% { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-fx, .sb-cta { display: none; }
}