/* ============================================================================
   Savona's seasonal theme overlay — styles for seasonal.js.
   Replaces fireworks.css. To fully remove: delete seasonal.css + seasonal.js
   + demo.html and the two tagged lines in index.html.
   ========================================================================== */

/* Full-viewport canvas: translucent effect 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. */
#seasonal-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 */
}

/* Holiday greeting badge, injected into the hero by seasonal.js.
   Accent color comes per-theme via --seasonal-accent + inline border-color. */
#seasonal-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);
  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);
}
#seasonal-greeting .sg-icon {
  color: var(--seasonal-accent, #e0a32e);
  font-size: 0.9rem;
  line-height: 1;
}

/* --- Halloween spiders (DOM + CSS animation, injected by seasonal.js) ------ */
#seasonal-spiders {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.seasonal-spider { position: absolute; top: -6px; }
/* Thread grows (scaleY) exactly in sync with the spider's ride (translateY):
   identical duration/delay/timing on both keeps them attached. */
.ss-thread {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: var(--drop, 180px);
  /* silvery silk: dark core + faint white edges so it reads on the dark hero
     AND the cream sections */
  background: linear-gradient(rgba(26, 26, 26, 0.45), rgba(26, 26, 26, 0.18));
  box-shadow: 0.5px 0 0 rgba(255, 255, 255, 0.35), -0.5px 0 0 rgba(255, 255, 255, 0.35);
  transform-origin: top center;
  animation: ss-drop var(--dur, 9s) var(--ease, ease-in-out) var(--delay, 0s) infinite alternate;
}
.ss-bug {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  margin-left: -13px;
  margin-top: -3px; /* head touches the thread end */
  animation: ss-ride var(--dur, 9s) var(--ease, ease-in-out) var(--delay, 0s) infinite alternate;
}
.ss-bug svg {
  display: block;
  animation: ss-swing 2.6s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
/* stagger the swing so the pack never moves in unison */
.seasonal-spider:nth-child(2n) .ss-bug svg { animation-duration: 2.1s; }
.seasonal-spider:nth-child(3n) .ss-bug svg { animation-duration: 3.2s; }
/* scuttling leg twitch */
.ss-legs {
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-twitch 0.5s ease-in-out infinite alternate;
}
.seasonal-spider:nth-child(2n) .ss-legs { animation-duration: 0.38s; }
@keyframes ss-drop { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes ss-ride {
  from { transform: translateY(calc(var(--drop, 180px) * 0.3)); }
  to   { transform: translateY(var(--drop, 180px)); }
}
@keyframes ss-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes ss-twitch { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }

/* Faint static webs anchored in the top corners */
.ss-web {
  position: fixed;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  opacity: 0.26;
  pointer-events: none;
}
.ss-web-left {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  #seasonal-canvas { opacity: 0.5; }
  #seasonal-greeting { font-size: 0.7rem; padding: 6px 13px; gap: 8px; }
  .ss-web { width: 140px; height: 140px; }
}

/* Accessibility: no animation for reduced-motion users (greeting still shows) */
@media (prefers-reduced-motion: reduce) {
  #seasonal-canvas,
  .seasonal-spider { display: none; }
  .ss-web { opacity: 0.18; }
}