/* ==========================================================================
   seasons.css — temporary holiday themes. Classes are namespaced `ss-`.
   Dates live in _data/seasons.json; the head script in base.html sets
   html[data-season="<id>"] plus html[data-season-live] and loads js/seasons.js.
   While data-season-live is set (the first few seconds of a page) the whole
   site wears the holiday palette; js/seasons.js then removes it and the site
   fades back to its normal colors. The greeting pill and gift box keep the
   holiday colors (they read the --ss-* tokens directly).
   With no season set, nothing here applies.
   ========================================================================== */

/* --- Palettes: each season's colors as --ss-* tokens ----------------------- */
html[data-season="thanksgiving"] {
  --ss-primary: #7A3A14; --ss-primary-dark: #5A2A0E; --ss-secondary: #A8561E; --ss-accent: #D9922E;
  --ss-bg: #FBF6EE; --ss-bg-alt: #F3E6D2; --ss-dark: #2E1A0E;
  --ss-tint: #C46A21; --ss-glow: rgba(217,146,46,.22);
  --ss-rule: linear-gradient(90deg, #8C3B12, #D9922E, #B4541A, #E8B04F, #8C3B12);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 3 4 3 6 2-1 3 1 5 4 5-2 2-2 4 0 6-3 0-5 1-6 4l-3-3v8h-2v-8l-3 3c-1-3-3-4-6-4 2-2 2-4 0-6 3 0 5-2 4-5 2 1 5 1 6-2z'/%3E%3C/svg%3E");
}
html[data-season="christmas"] {
  --ss-primary: #1B5236; --ss-primary-dark: #123C27; --ss-secondary: #2C7350; --ss-accent: #B8232F;
  --ss-bg: #FAF8F3; --ss-bg-alt: #EEF0E6; --ss-dark: #13261C;
  --ss-tint: #1B5236; --ss-glow: rgba(184,35,47,.12);
  --ss-rule: repeating-linear-gradient(-45deg, #C8202B 0 8px, #fff 8px 16px);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E");
}
html[data-season="newyear"] {
  --ss-primary: #1B2A55; --ss-primary-dark: #111C3B; --ss-secondary: #34478A; --ss-accent: #C9A24A;
  --ss-bg: #F7F6F2; --ss-bg-alt: #ECEAF2; --ss-dark: #0B1530;
  --ss-tint: #C9A24A; --ss-glow: rgba(201,162,74,.2);
  --ss-rule: linear-gradient(90deg, #0B1530, #C9A24A 25%, #FFF2CC 50%, #C9A24A 75%, #0B1530);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E");
}
html[data-season="july4"], html[data-season="memorial"],
html[data-season="labor"], html[data-season="veterans"] {
  --ss-primary: #1C3A6E; --ss-primary-dark: #12264A; --ss-secondary: #2D5296; --ss-accent: #B3192A;
  --ss-bg: #F8F7F4; --ss-bg-alt: #ECEFF5; --ss-dark: #10203F;
  --ss-tint: #1C3A6E; --ss-glow: rgba(179,25,42,.12);
  --ss-rule: repeating-linear-gradient(90deg, #B3192A 0 24px, #fff 24px 48px, #1C3A6E 48px 72px);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.3L12 17.8l-6.2 3.7 1.6-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
}

html[data-season="halloween"] {
  --ss-primary: #5E2A82; --ss-primary-dark: #431D5E; --ss-secondary: #8240A8; --ss-accent: #E8761C;
  --ss-bg: #FBF7F2; --ss-bg-alt: #F1E8F0; --ss-dark: #1E1028;
  --ss-tint: #E8761C; --ss-glow: rgba(232,118,28,.18);
  --ss-rule: repeating-linear-gradient(90deg, #E8761C 0 20px, #1E1028 20px 40px);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9c.6-1.4 1.2-2 1.6-2l.4 1.8c2-1.8 5-2.4 10-1.3-2 .8-3 2.2-3 4.2-1.4-.8-2.8-.8-4 .6-1.2-.6-2.6-.2-3.2 1.4L12 15l-1.8-1.3c-.6-1.6-2-2-3.2-1.4-1.2-1.4-2.6-1.4-4-.6 0-2-1-3.4-3-4.2 5-1.1 8-.5 10 1.3l.4-1.8c.4 0 1 .6 1.6 2z'/%3E%3C/svg%3E");
}
html[data-season="stpatricks"] {
  --ss-primary: #1E7A44; --ss-primary-dark: #145C32; --ss-secondary: #2E9E5B; --ss-accent: #D4A12A;
  --ss-bg: #F7FAF5; --ss-bg-alt: #E6F1E6; --ss-dark: #0F2A1B;
  --ss-tint: #1E7A44; --ss-glow: rgba(46,158,91,.16);
  --ss-rule: linear-gradient(90deg, #145C32, #2E9E5B, #D4A12A, #2E9E5B, #145C32);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4.2'/%3E%3Ccircle cx='6.8' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='12' r='4.2'/%3E%3Cpath d='M11.2 12h1.6l.6 10h-2.8z'/%3E%3C/svg%3E");
}
html[data-season="spring"] {
  --ss-primary: #5F4FA0; --ss-primary-dark: #463A7A; --ss-secondary: #8371C4; --ss-accent: #E07FA6;
  --ss-bg: #FCFAF6; --ss-bg-alt: #F0ECF7; --ss-dark: #2A2340;
  --ss-tint: #E07FA6; --ss-glow: rgba(224,127,166,.18);
  --ss-rule: linear-gradient(90deg, #E07FA6, #F2C14E, #7FC8A9, #8371C4, #E07FA6);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='4'/%3E%3Ccircle cx='18.2' cy='10' r='4'/%3E%3Ccircle cx='15.8' cy='17.4' r='4'/%3E%3Ccircle cx='8.2' cy='17.4' r='4'/%3E%3Ccircle cx='5.8' cy='10' r='4'/%3E%3C/svg%3E");
}

html[data-season="mothersday"] {
  --ss-primary: #A8325E; --ss-primary-dark: #842548; --ss-secondary: #CC5585; --ss-accent: #C9A24A;
  --ss-bg: #FDF8F8; --ss-bg-alt: #F7E9EF; --ss-dark: #3A1726;
  --ss-tint: #CC5585; --ss-glow: rgba(204,85,133,.16);
  --ss-rule: linear-gradient(90deg, #A8325E, #E98BAE, #C9A24A, #E98BAE, #A8325E);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C4 15 1 11 3 6.5 5 2.5 10 3 12 7c2-4 7-4.5 9-.5 2 4.5-1 8.5-9 14.5z'/%3E%3C/svg%3E");
}
html[data-season="fathersday"] {
  --ss-primary: #1F3B57; --ss-primary-dark: #152A3F; --ss-secondary: #3A6186; --ss-accent: #C98A2B;
  --ss-bg: #F7F6F3; --ss-bg-alt: #E9ECEF; --ss-dark: #13202E;
  --ss-tint: #1F3B57; --ss-glow: rgba(201,138,43,.16);
  --ss-rule: repeating-linear-gradient(-45deg, #1F3B57 0 10px, #C98A2B 10px 14px, #1F3B57 14px 24px);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l-1 3h-4zM10 6h4l2.5 12L12 23l-4.5-5z'/%3E%3C/svg%3E");
}

/* --- Live theme: point the global tokens at the season, fade back after ---- */
@property --primary     { syntax: '<color>'; inherits: true; initial-value: #1B3A5C; }
@property --primary-dark { syntax: '<color>'; inherits: true; initial-value: #12283F; }
@property --secondary   { syntax: '<color>'; inherits: true; initial-value: #2E5A87; }
@property --accent      { syntax: '<color>'; inherits: true; initial-value: #C99A3B; }
@property --bg          { syntax: '<color>'; inherits: true; initial-value: #F7F5EF; }
@property --bg-alt      { syntax: '<color>'; inherits: true; initial-value: #EFEADD; }
@property --dark        { syntax: '<color>'; inherits: true; initial-value: #14213D; }

html[data-season] {
  --ss-fade: 1.5s ease;
  transition: --primary var(--ss-fade), --primary-dark var(--ss-fade), --secondary var(--ss-fade),
    --accent var(--ss-fade), --bg var(--ss-fade), --bg-alt var(--ss-fade), --dark var(--ss-fade);
}
html[data-season-live] {
  --primary: var(--ss-primary); --primary-dark: var(--ss-primary-dark); --secondary: var(--ss-secondary);
  --accent: var(--ss-accent); --bg: var(--ss-bg); --bg-alt: var(--ss-bg-alt); --dark: var(--ss-dark);
}

/* --- Site-wide trim: header and footer stripes ----------------------------- */
html[data-season] .nv::after,
html[data-season] .footer::before {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: var(--ss-rule); pointer-events: none;
  opacity: 0; transition: opacity var(--ss-fade);
}
html[data-season-live] .nv::after,
html[data-season-live] .footer::before { opacity: 1; }
html[data-season] .nv::after { bottom: -1px; }
html[data-season] .footer { position: relative; }
html[data-season] .footer::before { top: 0; }

/* Particle canvas from js/seasons.js — sits under the header, over content */
.ss-fx {
  position: fixed; inset: 0; z-index: 999;
  width: 100%; height: 100%; pointer-events: none;
}

/* --- Homepage hero: tinted backdrop, icon pattern, greeting ---------------- */
html[data-season] .hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, var(--ss-glow), transparent 70%);
  opacity: 0; transition: opacity var(--ss-fade);
}
html[data-season-live] .hero::after { opacity: 1; }
html[data-season] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--ss-tint); opacity: 0; transition: opacity var(--ss-fade);
  -webkit-mask-image: var(--ss-icon), radial-gradient(ellipse at center, transparent 35%, #000 80%);
  -webkit-mask-size: 54px 54px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--ss-icon), radial-gradient(ellipse at center, transparent 35%, #000 80%);
  mask-size: 54px 54px, 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}
html[data-season-live] .hero::before { opacity: .09; }
html[data-season] .hero-badge { border-color: color-mix(in srgb, var(--primary) 18%, transparent); }

.ss-greet[hidden], .ss-line[hidden] { display: none; }
.ss-line {
  margin: -6px auto 22px; max-width: 520px;
  font: 500 15px/1.5 'Inter', sans-serif; color: var(--ss-primary);
}
.ss-greet {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 8px 18px 8px 14px; border-radius: 999px;
  font: 600 14px/1.2 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, var(--ss-primary), var(--ss-secondary));
  box-shadow: 0 10px 24px -12px var(--ss-primary);
}
.ss-mark {
  flex-shrink: 0; width: 16px; height: 16px; background: var(--ss-accent);
  -webkit-mask: var(--ss-icon) center / contain no-repeat; mask: var(--ss-icon) center / contain no-repeat;
}
html[data-season="christmas"] .ss-mark,
html[data-season="july4"] .ss-mark, html[data-season="memorial"] .ss-mark,
html[data-season="labor"] .ss-mark, html[data-season="veterans"] .ss-mark,
html[data-season="stpatricks"] .ss-mark,
html[data-season="mothersday"] .ss-greet .ss-mark,
html[data-season="fathersday"] .ss-greet .ss-mark { background: #fff; }

/* ==========================================================================
   Gift box (holidays with a "gift" in seasons.json, e.g. Mother's/Father's Day)
   ========================================================================== */
.ss-gift { position: fixed; left: 20px; bottom: 20px; z-index: 1001; }
.ss-gift-btn {
  position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  animation: ss-wiggle 3.2s ease-in-out infinite;
}
.ss-gift.is-open .ss-gift-btn { animation: none; }
.ss-gift-btn:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 4px; border-radius: 12px; }
.ss-gift-box { fill: var(--ss-primary); }
.ss-gift-ribbon, .ss-gift-bow { fill: var(--ss-accent); }
.ss-gift-lid { transform-origin: 54px 26px; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.ss-gift.is-open .ss-gift-lid { transform: translate(6px, -16px) rotate(22deg); }
.ss-gift-tag {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 11px/1.2 'Inter', sans-serif; color: #fff; background: var(--ss-dark);
}
.ss-gift.is-open .ss-gift-tag { display: none; }
@keyframes ss-wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-9deg); } 78% { transform: rotate(8deg); }
  82% { transform: rotate(-6deg); } 86% { transform: rotate(4deg); }
}

.ss-gift-card {
  position: absolute; left: 0; bottom: 84px; width: min(320px, calc(100vw - 40px));
  padding: 22px 22px 20px; border-radius: 18px;
  background: #fff; color: var(--ss-dark);
  border-top: 5px solid var(--ss-primary);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
  animation: ss-card-in .35s ease both;
}
.ss-gift-card[hidden] { display: none; }
@keyframes ss-card-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.ss-gift-card .ss-mark { display: block; width: 26px; height: 26px; margin-bottom: 10px; background: var(--ss-primary); }
.ss-gift-title { margin: 0 0 6px; font: 700 20px/1.2 'Space Grotesk', sans-serif; color: var(--ss-primary); }
.ss-gift-text { margin: 0 0 16px; font: 400 14.5px/1.55 'Inter', sans-serif; color: var(--mid); }
.ss-gift-actions { display: flex; gap: 10px; }
.ss-gift-actions a {
  flex: 1; text-align: center; padding: 11px 12px; border-radius: 10px;
  font: 600 14px/1 'Inter', sans-serif; transition: filter .2s ease;
}
.ss-gift-actions a:hover { filter: brightness(1.08); }
.ss-gift-book { background: var(--ss-primary); color: #fff; }
.ss-gift-call { color: var(--ss-primary); border: 1px solid color-mix(in srgb, var(--ss-primary) 35%, transparent); }
.ss-gift-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: transparent; color: var(--mid);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ss-gift-close:hover { background: var(--bg-alt); color: var(--ss-dark); }

/* Burst of hearts / ties out of the box */
.ss-gift-pop {
  position: absolute; left: 22px; top: 6px; width: 18px; height: 18px; pointer-events: none;
  background: var(--ss-secondary);
  -webkit-mask: var(--ss-icon) center / contain no-repeat; mask: var(--ss-icon) center / contain no-repeat;
  animation: ss-pop 1.2s cubic-bezier(.2,.8,.3,1) forwards;
}
.ss-gift-pop:nth-child(3n) { background: var(--ss-accent); }
@keyframes ss-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); }
}

@media (max-width: 768px) {
  .ss-gift { left: 14px; bottom: 74px; }
  .ss-gift-btn svg { width: 54px; height: 54px; }
  .ss-gift-card { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-gift-btn, .ss-gift-card { animation: none; }
}