/* ============================================================================
   July 4th fireworks overlay — TEMPORARY (remove after 2026-07-07)
   Self-contained holiday layer for savonaspizza.com.
   To fully remove: delete fireworks.css + fireworks.js and the two tagged
   lines in index.html. Nothing else references this.
   ========================================================================== */

/* Full-viewport canvas: a translucent sparkle layer ON TOP of content so it
   reads over every section, but pointer-events:none so it never blocks the
   Order buttons / nav / FAB, and below the header(50) + FAB(60) z-indexes. */
#fw-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 40;
  opacity: 0.55; /* LAYER_OPACITY — single knob; lower if it feels too busy */
}

/* Small patriotic greeting, injected into the hero by fireworks.js */
#fw-greeting {
  display: flex;          /* own line (above the eyebrow), not inline beside it */
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;    /* centered, with space below before the eyebrow */
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(224, 163, 46, 0.55); /* gold */
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#fw-greeting .fw-stars {
  color: var(--gold, #e0a32e);
  font-size: 0.9rem;
  line-height: 1;
}

@media (max-width: 768px) {
  #fw-canvas { opacity: 0.5; }
  #fw-greeting { font-size: 0.7rem; padding: 6px 13px; gap: 8px; }
}

/* Accessibility: no animation for reduced-motion users (greeting still shows) */
@media (prefers-reduced-motion: reduce) {
  #fw-canvas { display: none; }
}