/* Ticket rain — mounted inside `header.bg-gold.header` (fallback: body). One wave, original timing. */

header.bg-gold.header {
/*  position: relative; */
}

.ticket-rain {
  pointer-events: none;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}

/* Inside gold header bar */
.ticket-rain[data-ticket-rain-mount="header"] {
  position: absolute;
  inset: 0;
  z-index: 30;
}

/* Rare fallback if header missing */
.ticket-rain[data-ticket-rain-mount="body"] {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ticket-rain > span {
  position: absolute;
  top: -80px;
  left: calc(var(--i) * 8%);
  width: 54px;
  height: 28px;
  background: #e90022;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  animation: ticketFall calc(2.8s + (var(--i) * 0.12s)) linear forwards;
}

.ticket-rain > span::before {
  content: "L0TT0";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ticket-rain > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  box-shadow: 54px 0 0 #000;
  transform: translateY(-50%);
}

.ticket-rain > span:nth-child(odd) {
  background: #fbe24b;
}

.ticket-rain > span:nth-child(odd)::before {
  color: #111;
}

.ticket-rain > span:nth-child(3n) {
  animation-delay: -1.4s;
}

.ticket-rain > span:nth-child(4n) {
  animation-delay: -0.7s;
}

@keyframes ticketFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(var(--rain-travel, calc(100vh + 120px))) rotate(540deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-rain {
    background: rgba(0, 0, 0, 0.35);
  }

  .ticket-rain > span {
    animation-duration: 3s !important;
    animation-delay: 0s !important;
    box-shadow: none;
  }
}