/* Seasonal theme layer for the customer site.
 * The accent colors come from the active theme as inline CSS variables on <body>
 * (--gold / --purple remapped), so the whole site recolors from one place. This file
 * styles the festive ribbon and adds a few tasteful per-holiday flourishes. The site's
 * dark surfaces are kept, so text stays legible whatever the accent. */

.season-ribbon {
  background: var(--theme-ribbon, var(--surface-2));
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  padding: 7px 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.season-ribbon .season-greeting { font-weight: 600; letter-spacing: 0.2px; }
.season-ribbon .season-decor { font-size: 1.05rem; letter-spacing: 3px; white-space: nowrap; }
@media (max-width: 560px) {
  .season-ribbon { font-size: 0.82rem; padding: 6px 12px; gap: 10px; }
  .season-ribbon .season-decor:last-child { display: none; }  /* keep it to one line on phones */
}

/* A soft accent glow under the sticky header so the theme reads at a glance. */
body[data-theme] .site-header {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 45%, transparent),
              0 6px 24px color-mix(in srgb, var(--gold) 12%, transparent);
}

/* The brand name and primary actions already use the remapped accent; nudge a couple of
 * extra spots so the holiday feels intentional rather than accidental. */
body[data-theme] .brand .brand-name { text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
body[data-theme] .season-ribbon .season-greeting { color: var(--gold-bright); }

/* Per-holiday background wash — a faint tint behind the page, never loud. */
body[data-theme="halloween"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(255,117,24,0.10) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(160,92,255,0.10) 0%, transparent 55%); }
body[data-theme="christmas"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(229,72,77,0.10) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(63,174,107,0.10) 0%, transparent 55%); }
body[data-theme="new_year"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(232,193,90,0.12) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(192,160,255,0.10) 0%, transparent 55%); }
body[data-theme="thanksgiving"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(217,128,59,0.11) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(199,91,58,0.10) 0%, transparent 55%); }
body[data-theme="july_4th"], body[data-theme="memorial_day"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(217,80,78,0.10) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(90,127,212,0.10) 0%, transparent 55%); }
body[data-theme="valentines"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(255,107,157,0.12) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(255,158,196,0.10) 0%, transparent 55%); }
body[data-theme="st_patricks"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(63,174,107,0.12) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(127,212,160,0.10) 0%, transparent 55%); }
body[data-theme="easter"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(229,155,208,0.12) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(154,208,229,0.10) 0%, transparent 55%); }
body[data-theme="cinco_de_mayo"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(232,93,59,0.11) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(76,175,125,0.10) 0%, transparent 55%); }
body[data-theme="labor_day"] { background-image:
  radial-gradient(900px 480px at 12% -8%, rgba(224,162,60,0.11) 0%, transparent 60%),
  radial-gradient(800px 420px at 100% 0%, rgba(90,160,212,0.10) 0%, transparent 55%); }
body[data-theme] { background-attachment: fixed; }

/* ---- Festive animations (particles + a clickable mascot) ---- */
.season-fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.season-fx .sp { position: absolute; top: 0; will-change: transform, opacity; opacity: 0.9;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); user-select: none; }
@keyframes sp-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0); }
  100% { transform: translate3d(var(--sway, 0), 114vh, 0) rotate(var(--spin, 360deg)); }
}
@keyframes sp-rise {
  0%   { transform: translate3d(0, 114vh, 0) rotate(0); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate3d(var(--sway, 0), -14vh, 0) rotate(var(--spin, 360deg)); opacity: 0; }
}
.sp-fall { animation: sp-fall linear infinite; }
.sp-rise { animation: sp-rise linear infinite; }

.season-mascot { position: fixed; left: 16px; bottom: 16px; z-index: 44; font-size: 2.5rem;
  line-height: 1; background: none; border: 0; padding: 4px; cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); animation: mascot-bob 2.6s ease-in-out infinite;
  transition: transform 0.12s ease; -webkit-tap-highlight-color: transparent; }
.season-mascot:hover { transform: scale(1.12) rotate(4deg); }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50%      { transform: translateY(-11px) rotate(7deg); }
}
.season-mascot.pop { animation: mascot-pop 0.6s ease; }
@keyframes mascot-pop {
  0% { transform: scale(1); } 30% { transform: translateY(-26px) scale(1.35) rotate(-14deg); }
  60% { transform: translateY(4px) scale(0.92); } 100% { transform: scale(1); }
}
.sp-burst { position: fixed; z-index: 45; pointer-events: none; will-change: transform, opacity;
  animation: sp-burst 0.95s ease-out forwards; }
@keyframes sp-burst {
  0%   { transform: translate(0,0) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--bx, 0), var(--by, -120px)) scale(1.1) rotate(220deg); opacity: 0; }
}
@media (max-width: 560px) { .season-mascot { font-size: 2rem; left: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .season-fx { display: none; }
  .season-mascot { animation: none; }
}

/* Holiday sound toggle (sits above the mascot) */
.season-mute { position: fixed; left: 18px; bottom: 74px; z-index: 44; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease; }
.season-mute:hover { transform: scale(1.1); border-color: var(--gold); }
@media (max-width: 560px) { .season-mute { left: 14px; bottom: 62px; width: 34px; height: 34px; } }