/* scenes/carnival.css -- js/motion/scenes/carnival.js (breezy lamps, hummingbirds, tap to celebrate).
 *
 * Every node styled here is created by the JS at runtime. Armed (hidden-before-entrance)
 * states are scoped under html.motion and released by .cv-go (added in the same task the
 * fill:"backwards" entrances start, so nothing flashes). Reduced motion / no JS: none of
 * the armed rules apply and the slide is the exact PSD frame. Coordinates are design px
 * (1 px = var(--u)). Only transform / opacity animate; particles are small nodes. */

html.motion [data-scene="carnival"]:not(.cv-go) .ly:is([data-layer="lamp-1"], [data-layer="lamp-2"], [data-layer="lamp-3"], [data-layer="lamp-4"], [data-layer="lamp-5"], [data-layer="lamp-6"]) {
  transform: translateY(-105%);
}
html.motion [data-scene="carnival"]:not(.cv-go) .ly:is([data-layer="hummingbird-left"], [data-layer="hummingbird-right"], [data-layer="couple"]) {
  opacity: 0;
}

/* hummingbird = body (the PSD sprite, wing clipped away) + two wing copies (wing only) */
.cv-bird { position: absolute; inset: 0; }
.cv-bird > .cv-wing { position: absolute; inset: 0; }

/* particle overlay: z 27 (after the drums), below every text block (z 28+) */
.cv-fx { position: absolute; inset: 0; z-index: 27; pointer-events: none; }
.cv-fx > div { position: absolute; pointer-events: none; user-select: none; }

.cv-conf { border-radius: 1.5px; opacity: 0; }
.cv-conf--dot { border-radius: 50%; }
.cv-conf--ribbon { border-radius: 3px; }

/* powder puffs: lumpy soft clouds from three overlapping radial gradients */
.cv-puff { border-radius: 50%; opacity: 0; }
.cv-puff--haldi {
  background:
    radial-gradient(circle at 38% 42%, rgba(255, 214, 70, 0.9) 0%, rgba(255, 200, 40, 0.45) 26%, rgba(255, 196, 36, 0) 52%),
    radial-gradient(circle at 64% 58%, rgba(255, 190, 30, 0.8) 0%, rgba(250, 178, 24, 0.35) 28%, rgba(250, 178, 24, 0) 54%),
    radial-gradient(circle closest-side, rgba(255, 206, 60, 0.55) 0%, rgba(255, 200, 50, 0.22) 55%, rgba(255, 200, 50, 0) 100%);
}
.cv-puff--gulal {
  background:
    radial-gradient(circle at 40% 40%, rgba(250, 112, 170, 0.9) 0%, rgba(240, 86, 152, 0.42) 26%, rgba(240, 86, 152, 0) 52%),
    radial-gradient(circle at 62% 60%, rgba(236, 70, 140, 0.8) 0%, rgba(236, 70, 140, 0.32) 28%, rgba(236, 70, 140, 0) 54%),
    radial-gradient(circle closest-side, rgba(248, 120, 176, 0.55) 0%, rgba(244, 104, 166, 0.22) 55%, rgba(244, 104, 166, 0) 100%);
}

/* "Tap to celebrate": a real button on the open lawn, clear of the text, couple and drums */
.cv-cta {
  position: absolute;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 30px;
  margin: 0;
  padding: 0.38em 1.05em 0.38em 0.75em;
  border: 1px solid rgba(194, 63, 104, 0.55);
  border-radius: 999px;
  background: rgba(255, 250, 246, 0.86);
  color: #a8345c;
  font-family: "Quattrocento", Georgia, serif;
  font-size: clamp(12px, calc(34 * var(--u)), 16px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(120, 40, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 6px));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}
.cv-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.cv-cta::before { content: ""; position: absolute; inset: -8px -4px; }   /* >= 44 px tap target */
.cv-cta:focus-visible { outline: 2px solid #a8345c; outline-offset: 3px; }
/* three little confetti dots that keep popping */
.cv-cta__pop { position: relative; flex: none; width: 1.2em; height: 1.2em; }
.cv-cta__pop > i {
  position: absolute;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -0.18em 0 0 -0.18em;
}
.cv-cta__pop > i:nth-child(1) { background: #d9567d; }
.cv-cta__pop > i:nth-child(2) { background: #3f8f80; }
.cv-cta__pop > i:nth-child(3) { background: #e2b93a; }
.cv-cta.is-visible .cv-cta__pop > i { animation: cv-pop 2.2s cubic-bezier(0.2, 0.8, 0.3, 1) 0.6s infinite; }
.cv-cta.is-visible .cv-cta__pop > i:nth-child(1) { --dx: -0.42em; --dy: -0.4em; }
.cv-cta.is-visible .cv-cta__pop > i:nth-child(2) { --dx: 0.45em; --dy: -0.3em; animation-delay: 0.68s; }
.cv-cta.is-visible .cv-cta__pop > i:nth-child(3) { --dx: 0.05em; --dy: 0.45em; animation-delay: 0.76s; }
.cv-away .cv-cta__pop > i { animation-play-state: paused; }
@keyframes cv-pop {
  0% { transform: none; opacity: 1; }
  30% { transform: translate(var(--dx), var(--dy)) scale(0.9); opacity: 1; }
  55%, 100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) * 1.2 + 0.2em)) scale(0.6); opacity: 0; }
}

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