/* Sip celebrations (ui/celebrate.js). Overlay is click-through; transform/opacity animations only.
   Font sizes come from the .mega/.title classes. No radius on UI (art in the SVGs is illustration). */

.cel {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}

.cel-dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 22, .82); /* deeper than ink so the page clearly dims */
}

.cel-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gap) 6vh;
}

.cel-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
}
.cel-art-ace { width: min(82vw, 340px); min-height: 0; }
.cel-art-ace .cel-svg { width: 100%; height: auto; overflow: visible; }
.cel-art-par { min-height: 72px; }
.cel-art-birdie { min-height: 56px; }
.cel-art-eagle, .cel-art-albatross { min-height: 90px; }
.cel-art-triple, .cel-art-double { min-height: 64px; }

.cel-svg { display: block; overflow: visible; will-change: transform, opacity; }
.cel-flyer { position: relative; }

.cel-label {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--butter);
  text-shadow:
    -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink),
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 0 18px var(--ink);
  will-change: transform, opacity;
  opacity: 0;
}

/* Flat fills for the illustrations */
.c-accent { fill: var(--cel-accent, var(--accent)); }
.c-butter { fill: var(--butter); }
.c-mint { fill: var(--mint); }
.c-tangerine { fill: var(--tangerine); }
.c-ink-fill { fill: var(--ink); }
.c-hole { fill: #0B0D1F; }
.c-dimple { fill: var(--ink-3); }
.c-cloud { fill: var(--butter); opacity: .55; }
.cel-svg .c-accent, .cel-svg .c-butter { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.cel-svg path.c-butter[style] { stroke: none; }

.cel-svg .wings, .cel-svg .wing, .cel-svg .flagcloth, .cel-svg .pole { will-change: transform; }

/* Confetti squares and sparkles */
.cel-sq {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .cel-art, .cel-sq { display: none; }
}