/* Featured-event confetti — everything for the effect lives here.
 * Loaded by base-layout.templ only while a featured event with effect
 * "confetti" is active; markup and per-piece values (position, timing,
 * colour, --sway/--spin/--s) come from featured_event.templ.
 *
 * Layer sits behind the whole header block (contact strip, nav, hero, wave),
 * so pieces start at the very top and are hidden by the wave fill. Pure CSS,
 * never intercepts pointer events, hidden under prefers-reduced-motion.
 */

.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -18px;
  width: calc(8px * var(--s, 1));
  height: calc(13px * var(--s, 1));
  border-radius: 2px;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* dot */
.confetti-piece:nth-child(3n) {
  width: calc(6px * var(--s, 1));
  height: calc(6px * var(--s, 1));
  border-radius: 50%;
}

/* wide chip */
.confetti-piece:nth-child(4n+1) {
  width: calc(10px * var(--s, 1));
  height: calc(7px * var(--s, 1));
}

/* streamer */
.confetti-piece:nth-child(5n+2) {
  width: calc(3px * var(--s, 1));
  height: calc(17px * var(--s, 1));
  border-radius: 1.5px;
}

/* --sway: horizontal drift amplitude incl. sign; --spin: 1 or -1 (rotation direction).
 * Both vary per piece so the pieces don't move in lockstep. */
@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg);
  }

  5% {
    opacity: 0.95;
  }

  25% {
    transform: translate3d(var(--sway, 22px), 25vh, 0) rotateZ(calc(var(--spin, 1) * 120deg)) rotateX(180deg);
  }

  50% {
    transform: translate3d(calc(var(--sway, 22px) * -0.8), 50vh, 0) rotateZ(calc(var(--spin, 1) * 260deg)) rotateX(360deg);
  }

  75% {
    transform: translate3d(calc(var(--sway, 22px) * 0.9), 75vh, 0) rotateZ(calc(var(--spin, 1) * 380deg)) rotateX(540deg);
  }

  92% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sway, 22px) * -0.4), 100vh, 0) rotateZ(calc(var(--spin, 1) * 520deg)) rotateX(720deg);
  }
}

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