/*
  Seasonal website themes — decorative accents layered on top of the
  normal Mextix design, never replacing it. Every theme is opt-in via
  [data-season="..."] on <html>, set by seasonal-theme.js after it reads
  the active theme from the backend. No [data-season] attribute = the
  normal site, unchanged.

  Two layers:
  1. `.season-decorations` -- a position:fixed, full-viewport, pointer-
     events:none overlay (built by seasonal-theme.js) holding the ambient
     top banner/corner cluster and falling/drifting particles. Sits above
     the sticky nav (z-index 50) so top-edge accents (lights, bunting,
     garland) are actually visible, and below the support widget/chat
     panel (z-index 80/90) so those stay fully on top.
  2. Card accents -- pure CSS ::before pseudo-elements on the shared card
     classes every page already uses (.service-card, .plan-card,
     .pain-card, .feat-card, .video-card), scoped by [data-season]. Small,
     static (no motion), low-opacity corner marks -- never ::after, which
     .service-card already uses for its own hover accent.

  Every decoration is transform/opacity animated only (GPU-friendly, no
  layout/reflow), capped in element count (see MAX_PARTICLES in
  seasonal-theme.js), and never captures pointer events.
  `prefers-reduced-motion: reduce` turns every animation off and falls
  back to a small set of static accents instead of hiding the theme
  entirely -- still seasonal, just not moving.
*/

.season-decorations{
  position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden;
}

.service-card, .plan-card, .pain-card, .feat-card, .video-card{ position:relative; }

/* ---------------------------------------------------------- Christmas --- */
.season-christmas .season-lights{
  position:absolute; top:0; left:0; right:0; height:14px;
  background:repeating-linear-gradient(90deg,
    #E0453A 0 3px, transparent 3px 22px,
    #2F9E55 22px 25px, transparent 25px 44px,
    #F0B429 44px 47px, transparent 47px 66px,
    #3B6FE0 66px 69px, transparent 69px 88px);
  opacity:.9;
  box-shadow:0 2px 14px -2px rgba(240,180,41,.45), 0 2px 10px -2px rgba(224,69,58,.3);
}
:root:not([data-theme="light"]) .season-christmas .season-lights{ opacity:.75; }
.season-christmas .season-snowcap{
  position:absolute; top:14px; left:0; right:0; height:16px; pointer-events:none;
  background:
    radial-gradient(circle at 6% 0, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 18% 40%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 31% 0, #fff 0 6px, transparent 7px),
    radial-gradient(circle at 46% 30%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 60% 0, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 74% 35%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 88% 0, #fff 0 6px, transparent 7px),
    radial-gradient(circle at 97% 30%, #fff 0 4px, transparent 5px);
  opacity:.55; filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.season-christmas .season-corner{ position:absolute; font-size:38px; opacity:.6; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.season-christmas .season-corner-left{ top:16px; left:14px; transform:rotate(-6deg); }
.season-christmas .season-corner-right{ top:16px; right:16px; transform:scaleX(-1) rotate(-6deg); }
.season-christmas .snowflake{
  position:absolute; top:-5vh; color:#CFE8F7;
  animation:season-snow-fall linear infinite;
  text-shadow:0 0 3px rgba(255,255,255,.8);
}
@keyframes season-snow-fall{
  from{ transform:translateY(0) translateX(0) rotate(0deg); }
  to{ transform:translateY(110vh) translateX(20px) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .season-christmas .snowflake{ animation:none; opacity:.35 !important; top:6vh; }
}
[data-season="christmas"] .service-card::before,
[data-season="christmas"] .plan-card::before,
[data-season="christmas"] .pain-card::before,
[data-season="christmas"] .feat-card::before,
[data-season="christmas"] .video-card::before{
  display:block; position:absolute; pointer-events:none; user-select:none;
  content:''; top:0; left:10px; right:10px; height:8px;
  background:
    radial-gradient(circle at 4% 0, #fff 0 3.2px, transparent 3.6px),
    radial-gradient(circle at 16% 55%, #fff 0 2.6px, transparent 3px),
    radial-gradient(circle at 29% 0, #fff 0 3.6px, transparent 4px),
    radial-gradient(circle at 43% 45%, #fff 0 2.6px, transparent 3px),
    radial-gradient(circle at 57% 0, #fff 0 3.2px, transparent 3.6px),
    radial-gradient(circle at 71% 50%, #fff 0 2.6px, transparent 3px),
    radial-gradient(circle at 85% 0, #fff 0 3.6px, transparent 4px),
    radial-gradient(circle at 97% 45%, #fff 0 2.6px, transparent 3px);
  opacity:.7;
}

/* --------------------------------------------------------- Halloween --- */
.season-halloween .season-corner{
  position:absolute; font-size:46px; opacity:.65; filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));
}
.season-halloween .season-corner-left{ top:8px; left:10px; transform:rotate(-8deg); }
.season-halloween .season-corner-right{ top:4px; right:12px; transform:rotate(10deg); }
.season-halloween .season-web-glow{
  position:absolute; top:-30px; right:-20px; width:140px; height:140px; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(180,150,255,.18) 0deg 2deg, transparent 2deg 30deg);
  border-radius:50%; opacity:.5;
}
.season-halloween .bat{
  position:absolute; top:-4vh; font-size:18px; opacity:.6;
  animation:season-bat-drift linear infinite;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
@keyframes season-bat-drift{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-30px, 45vh) rotate(-8deg); }
  100%{ transform:translate(10px, 100vh) rotate(6deg); }
}
.season-halloween .ghost{
  position:absolute; font-size:26px; opacity:.4;
  animation:season-ghost-float 7s ease-in-out infinite;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.2));
}
@keyframes season-ghost-float{
  0%, 100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-18px) translateX(10px); }
}
@media (prefers-reduced-motion: reduce){
  .season-halloween .bat{ display:none; }
  .season-halloween .ghost{ animation:none; }
}
[data-season="halloween"] .service-card::before,
[data-season="halloween"] .plan-card::before,
[data-season="halloween"] .pain-card::before,
[data-season="halloween"] .feat-card::before,
[data-season="halloween"] .video-card::before{
  display:block; position:absolute; top:10px; right:12px; font-size:15px; line-height:1;
  pointer-events:none; user-select:none;
  content:'🕸️'; opacity:.35;
}

/* ------------------------------------------------------- Thanksgiving --- */
.season-thanksgiving .season-rule{
  position:absolute; top:0; left:0; right:0; height:10px;
  background:linear-gradient(90deg,#C97A2B,#D9A441,#B5542B,#D9A441,#C97A2B);
  opacity:.85;
}
.season-thanksgiving .season-garland{
  position:absolute; top:3px; left:0; right:0; height:24px; pointer-events:none;
  font-size:15px; opacity:.6; white-space:nowrap; overflow:hidden;
  letter-spacing:28px; padding-left:10px;
}
.season-thanksgiving .season-corner{ position:absolute; font-size:40px; opacity:.6; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.season-thanksgiving .season-corner-left{ top:14px; left:12px; transform:rotate(-6deg); }
.season-thanksgiving .season-corner-right{ top:14px; right:14px; transform:rotate(8deg); }
.season-thanksgiving .autumn-leaf{
  position:absolute; top:-5vh; opacity:.75;
  animation:season-leaf-fall linear infinite;
}
@keyframes season-leaf-fall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); }
  50%{ transform:translateY(55vh) translateX(-24px) rotate(140deg); }
  100%{ transform:translateY(110vh) translateX(10px) rotate(300deg); }
}
@media (prefers-reduced-motion: reduce){
  .season-thanksgiving .autumn-leaf{ animation:none; opacity:.35 !important; top:10vh; }
}
[data-season="thanksgiving"] .service-card::before,
[data-season="thanksgiving"] .plan-card::before,
[data-season="thanksgiving"] .pain-card::before,
[data-season="thanksgiving"] .feat-card::before,
[data-season="thanksgiving"] .video-card::before{
  display:block; position:absolute; top:10px; right:12px; font-size:15px; line-height:1;
  pointer-events:none; user-select:none;
  content:'🍁'; opacity:.4;
}

/* ----------------------------------------------------------- New Year --- */
.season-new_year .season-firework{
  position:absolute; width:5px; height:5px; border-radius:50%;
  box-shadow:0 0 0 0 currentColor;
  animation:season-firework-burst 2.6s ease-out infinite;
}
@keyframes season-firework-burst{
  0%{ box-shadow:0 0 0 0 currentColor; opacity:1; }
  70%{ opacity:.5; }
  100%{ box-shadow:0 0 0 46px transparent; opacity:0; }
}
.season-new_year .season-sparkle{
  position:absolute; font-size:13px; color:#F0B429; opacity:.7;
  animation:season-twinkle 2.4s ease-in-out infinite;
}
@keyframes season-twinkle{
  0%, 100%{ opacity:.15; transform:scale(.8); }
  50%{ opacity:.85; transform:scale(1.15); }
}
.season-new_year .season-confetti{
  position:absolute; top:-5vh; width:7px; height:12px; opacity:.8;
  animation:season-confetti-fall linear infinite;
}
@keyframes season-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(110vh) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce){
  .season-new_year .season-firework{ animation:none; box-shadow:0 0 0 18px currentColor; opacity:.12; }
  .season-new_year .season-sparkle{ animation:none; opacity:.5; }
  .season-new_year .season-confetti{ display:none; }
}
[data-season="new_year"] .service-card::before,
[data-season="new_year"] .plan-card::before,
[data-season="new_year"] .pain-card::before,
[data-season="new_year"] .feat-card::before,
[data-season="new_year"] .video-card::before{
  display:block; position:absolute; top:10px; right:12px; font-size:15px; line-height:1;
  pointer-events:none; user-select:none;
  content:'✨'; opacity:.45;
}

/* ----------------------------------------------------- Independence Day --- */
.season-july_fourth .season-bunting{
  position:absolute; top:0; left:0; right:0; height:22px; opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='22'%3E%3Cpolygon points='0,0 16,0 8,20' fill='%23B22234'/%3E%3Cpolygon points='16,0 32,0 24,20' fill='%23FFFFFF'/%3E%3Cpolygon points='32,0 48,0 40,20' fill='%233C3B6E'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:48px 22px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.season-july_fourth .season-corner{ position:absolute; font-size:36px; opacity:.6; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.season-july_fourth .season-corner-left{ top:26px; left:14px; }
.season-july_fourth .season-corner-right{ top:26px; right:16px; }
.season-july_fourth .season-star{
  position:absolute; top:-4vh; color:#B22234; opacity:.65;
  animation:season-star-drift linear infinite;
}
@keyframes season-star-drift{
  from{ transform:translateY(0) rotate(0deg); }
  to{ transform:translateY(110vh) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce){
  .season-july_fourth .season-star{ display:none; }
}
[data-season="july_fourth"] .service-card::before,
[data-season="july_fourth"] .plan-card::before,
[data-season="july_fourth"] .pain-card::before,
[data-season="july_fourth"] .feat-card::before,
[data-season="july_fourth"] .video-card::before{
  display:block; position:absolute; top:10px; right:12px; font-size:15px; line-height:1;
  pointer-events:none; user-select:none;
  content:'★'; color:#B22234; opacity:.4;
}

/* --------------------------------------------------------- Memorial Day --- */
/* Deliberately the quietest theme of the six -- a day of remembrance, not
   a celebration, so no falling particles or motion of any kind, just a
   restrained ribbon and a couple of static stars in the flag's colors. */
.season-memorial_day .season-ribbon{
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#B22234,#FFFFFF,#3C3B6E);
  opacity:.6;
}
.season-memorial_day .season-corner{
  position:absolute; font-size:22px; color:#3C3B6E; opacity:.35;
}
.season-memorial_day .season-corner-left{ top:14px; left:16px; }
.season-memorial_day .season-corner-right{ top:14px; right:18px; color:#B22234; }
[data-season="memorial_day"] .service-card::before,
[data-season="memorial_day"] .plan-card::before,
[data-season="memorial_day"] .pain-card::before,
[data-season="memorial_day"] .feat-card::before,
[data-season="memorial_day"] .video-card::before{
  display:block; position:absolute; top:10px; right:12px; font-size:15px; line-height:1;
  pointer-events:none; user-select:none;
  content:'★'; color:#3C3B6E; opacity:.25;
}

/* Card accents are display:none by default; each theme above switches its
   own ::before on and positions it (a full-width snow ridge for Christmas,
   a single corner glyph for every other theme) -- kept per-theme rather
   than a shared positioning rule so each one can size itself differently
   without a specificity fight. */
.service-card::before, .plan-card::before, .pain-card::before, .feat-card::before, .video-card::before{
  display:none;
}