/* ============================================================
   CARNIVAL ORNAMENTS — reusable decorative pieces & ambient loops
   ============================================================ */

/* ---- Ambient keyframes ---- */
@keyframes orn-sway   { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes orn-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes orn-spin   { to { transform: rotate(360deg); } }
@keyframes orn-twinkle{ 0%,100% { opacity:.3; transform: scale(.7);} 50% { opacity:1; transform: scale(1.1);} }
@keyframes orn-glow   { 0%,100% { filter: drop-shadow(0 0 2px var(--c-lgold)); } 50% { filter: drop-shadow(0 0 10px var(--c-lgold)); } }
@keyframes bulb-blink { 0%,49% { opacity:1; } 50%,100% { opacity:.35; } }
@keyframes shimmer-x  { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes spotlight-sweep { 0%,100% { transform: translateX(-30%) rotate(8deg);} 50% { transform: translateX(30%) rotate(-8deg);} }

/* ---- BUNTING (pennant flags strung across) ---- */
.bunting {
  display: flex; justify-content: center; gap: 0; width: 100%;
  pointer-events: none; line-height: 0;
}
.bunting .flag {
  width: 0; height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 30px solid var(--c-red);
  transform-origin: top center;
  animation: orn-sway 3.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.25));
}
.bunting .flag:nth-child(5n+1){ border-top-color: var(--c-red);    animation-delay:0s; }
.bunting .flag:nth-child(5n+2){ border-top-color: var(--gold);     animation-delay:.2s; }
.bunting .flag:nth-child(5n+3){ border-top-color: var(--c-teal);   animation-delay:.4s; }
.bunting .flag:nth-child(5n+4){ border-top-color: var(--magenta);  animation-delay:.6s; }
.bunting .flag:nth-child(5n+5){ border-top-color: var(--sky);      animation-delay:.8s; }
.bunting--string { position: relative; }
.bunting--string::before {
  content:""; position:absolute; top:0; left:2%; right:2%; height:2px;
  background: rgba(255,255,255,.35); border-radius:2px;
}

/* ---- MARQUEE BULB BORDER (carnival lights) ---- */
.bulbs { display:flex; gap:14px; justify-content:center; align-items:center; }
.bulbs span {
  width:12px; height:12px; border-radius:50%;
  box-shadow: 0 0 8px currentColor, 0 0 2px #fff inset;
  animation: bulb-blink 1.1s steps(1) infinite;
}
.bulbs span:nth-child(odd){ animation-delay:.55s; }

/* ---- 8-POINT STAR BURST ---- */
.star-burst {
  width: 1em; height: 1em; display:inline-block; background: currentColor;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: orn-spin 14s linear infinite;
}
.star-twinkle { display:inline-block; color: var(--c-lgold); animation: orn-twinkle 2.4s ease-in-out infinite; }

/* ---- FLOATING ORNAMENT helper ---- */
.float-orn { position:absolute; pointer-events:none; z-index:1; animation: orn-bob 6s ease-in-out infinite; }
.float-orn.delay-1{ animation-delay:1s; } .float-orn.delay-2{ animation-delay:2s; } .float-orn.delay-3{ animation-delay:3s; }

/* ---- WAVY / SCALLOP DIVIDER between sections ---- */
.wave-divider { position:relative; width:100%; height:48px; line-height:0; overflow:hidden; }
.wave-divider svg { width:100%; height:100%; display:block; }
.scallop-edge {
  height:26px; width:100%;
  background:
    radial-gradient(circle at 13px -2px, transparent 13px, var(--c-purple) 14px) repeat-x;
  background-size: 26px 26px;
}

/* ---- TICKET-STUB BUTTON ---- */
.btn-ticket {
  position: relative; display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-badge); text-transform:uppercase; letter-spacing:.05em;
  font-size:.8rem; color:#2a0806; background: var(--gold);
  padding: 1em 2em; cursor:pointer; border:0; overflow:hidden;
  --notch: 12px;
  clip-path: polygon(
    0 12px, var(--notch) 0, calc(100% - var(--notch)) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - 12px));
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  transition: transform .18s var(--ease-bounce), filter .18s;
}
.btn-ticket::after { /* perforation line */
  content:""; position:absolute; top:8px; bottom:8px; left:14px; width:2px;
  background-image: radial-gradient(circle, rgba(0,0,0,.45) 1px, transparent 1.4px);
  background-size: 2px 7px;
}
.btn-ticket .shine {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%);
}
.btn-ticket:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); }
.btn-ticket:hover .shine { animation: shimmer-x .7s var(--ease-out); }
.btn-ticket:active { transform: translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.btn-ticket.lg { font-size:1rem; padding:1.15em 2.4em; }
.btn-ticket.pulse { animation: orn-glow 2s ease-in-out infinite; }
.btn-ticket.teal { background: var(--c-teal); color:#031c19; }
.btn-ticket.red  { background: var(--c-red); color:#fff; }

/* ---- ROSETTE BADGE ---- */
.rosette {
  width: 64px; height: 64px; border-radius:50%; display:grid; place-items:center;
  font-family: var(--f-badge); font-size:.7rem; color:#2a0806;
  background:
    radial-gradient(circle, var(--gold) 58%, transparent 59%),
    conic-gradient(from 0deg, var(--c-red) 0 30deg, var(--gold) 30deg 60deg);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* ---- SPOTLIGHT layer (follows cursor via --mx/--my) ---- */
.spotlight {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,40%),
    rgba(255,215,0,.16), transparent 60%);
  transition: background .15s ease;
}
.spotlight-sweep {
  position:absolute; top:-40%; left:50%; width:60%; height:180%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 70%);
  filter: blur(20px); pointer-events:none; z-index:0;
  animation: spotlight-sweep 7s ease-in-out infinite;
}

/* ---- FROSTED-GLASS logo card (partners) ---- */
.glass-card {
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); border-radius:16px;
}

@media (prefers-reduced-motion: reduce) {
  .bunting .flag, .bulbs span, .star-burst, .star-twinkle, .float-orn,
  .spotlight-sweep, .btn-ticket.pulse { animation: none !important; }
}