/* ============================================================
   MUGSLAB — SEASONAL THEME LAYER
   ============================================================
   100% additive. Every rule is scoped under body[data-season="..."],
   so with no data-season attribute set, NOTHING here has any effect.

   To change season sitewide: edit the SEASON constant at the top
   of assets/seasonal/seasonal.js and re-upload just that one file.
   To remove seasonal decoration: delete the seasonal.css / seasonal.js
   <link>/<script> lines from a page's <head>/<body>. Nothing else
   is affected.
   ============================================================ */

/* ---------- ribbon (top of page) ---------- */
.seasonal-ribbon{
  display:none;
  position:relative;
  z-index:45;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  padding:13px 46px 13px 16px;
  color:#fff;
}
.seasonal-ribbon .seasonal-ribbon-icon{display:inline-block;margin-right:4px;animation:seasonal-pulse 1.6s ease-in-out infinite}
.seasonal-ribbon a{color:#fff;text-decoration:none;font-weight:800;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:1px;margin-left:6px}
.seasonal-ribbon a:hover{border-color:#fff}
.seasonal-ribbon-close{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;font-size:16px;line-height:1;
  cursor:pointer;
}
.seasonal-ribbon-close:hover{background:rgba(255,255,255,.35)}
@keyframes seasonal-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* ---------- particles (hero only, decorative) ---------- */
.seasonal-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.seasonal-particle{position:absolute;will-change:transform;filter:drop-shadow(0 0 16px rgba(255,140,0,.55)) drop-shadow(0 0 6px rgba(139,47,224,.4))}
@keyframes seasonal-drift{
  0%{transform:translateY(0) translateX(0) rotate(0deg)}
  50%{transform:translateY(-26px) translateX(14px) rotate(10deg)}
  100%{transform:translateY(0) translateX(0) rotate(0deg)}
}
@keyframes seasonal-flicker{0%,100%{opacity:.85}50%{opacity:.45}}

/* injected content must appear immediately — no scroll-triggered fade
   (the sitewide .reveal/IntersectionObserver only watches elements
   present at page load, so anything added later must skip it) */
.seasonal-visible{opacity:1 !important;transform:none !important}

/* ---------- character cast strip ---------- */
.seasonal-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:32px auto 0;align-items:end}
.seasonal-cast a{
  display:flex;align-items:flex-end;justify-content:center;
  border-radius:20px;overflow:hidden;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(0,175,239,.14),rgba(62,64,149,.10));
  box-shadow:var(--shadow-soft);cursor:zoom-in;transition:.3s ease;
  padding:14px 10px 0;min-height:260px;
}
.seasonal-cast a:hover{transform:translateY(-8px) scale(1.02)}
.seasonal-cast img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}

/* ============================================================
   HALLOWEEN
   ============================================================ */
body[data-season="halloween"]{ --hw-orange:#FF7A1A; --hw-orange-bright:#FFA53D; --hw-purple:#8B2FE0; }
body[data-season="halloween"]{background-color:#060912}

body[data-season="halloween"] .seasonal-ribbon{
  display:block;
  background:linear-gradient(90deg,var(--hw-purple),var(--hw-orange));
  box-shadow:0 4px 24px rgba(255,122,26,.25);
}

/* Full-page glow overlay and hero vignette removed — they were the most
   likely cause of the reported scroll/black-screen issue on mobile. The
   character images, promo section and CTA remain untouched. */

body[data-season="halloween"] .seasonal-particle{animation:seasonal-drift 6s ease-in-out infinite, seasonal-flicker 3s ease-in-out infinite}
body[data-season="halloween"] .seasonal-particle:nth-child(2n){animation-duration:7.5s,3.6s}
body[data-season="halloween"] .seasonal-particle:nth-child(3n){animation-delay:1.4s}
body[data-season="halloween"] .seasonal-particle:nth-child(4n){animation-delay:.7s;animation-duration:5.4s,2.8s}
body[data-season="halloween"] .seasonal-particle:nth-child(5n){animation-delay:2.1s}

/* Promo section */
.seasonal-promo-section{display:none}
body[data-season="halloween"] .seasonal-promo-section{display:block}
body[data-season="halloween"] .seasonal-promo-section .eyebrow{
  background:linear-gradient(120deg,var(--hw-orange) 0%,var(--hw-purple) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
body[data-season="halloween"] .seasonal-promo-section .eyebrow::before{background:linear-gradient(120deg,var(--hw-orange),var(--hw-purple))}
body[data-season="halloween"] .seasonal-promo-section .hero-frame{
  background:linear-gradient(160deg,rgba(255,122,26,.45),rgba(139,47,224,.45));
}
body[data-season="halloween"] .seasonal-promo-section .btn-primary{
  background:linear-gradient(120deg,var(--hw-orange) 0%,var(--hw-purple) 100%);
  box-shadow:0 16px 36px rgba(255,122,26,.32);
}
body[data-season="halloween"] .seasonal-cast a{border-color:rgba(255,122,26,.35)}
body[data-season="halloween"] .seasonal-cast a:hover{box-shadow:0 14px 30px rgba(139,47,224,.35)}
body[data-season="halloween"] .seasonal-cast-label{
  text-align:center;font-size:.78rem;font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.08em;margin:28px 0 0;
}

/* Seasonal styling for the existing sound-toggle button (same audio file, themed look) */
body[data-season="halloween"] .sound-toggle{
  background:linear-gradient(135deg,var(--hw-purple),var(--hw-orange));
  border-color:transparent;color:#fff;
  box-shadow:0 0 0 3px rgba(255,122,26,.18);
}
body[data-season="halloween"] .sound-toggle:hover{filter:brightness(1.1)}

@media(max-width:760px){
  .seasonal-ribbon{font-size:.8rem;padding:11px 40px 11px 12px}
  .seasonal-cast{grid-template-columns:1fr 1fr 1fr;gap:8px;max-width:100%}
  .seasonal-cast a{min-height:150px;padding:8px 6px 0}
  .seasonal-cast img{max-height:180px}
}
@media (prefers-reduced-motion: reduce){
  .seasonal-particle{animation:none}
}