/*
 * Holiday decorations — layered on top of either Website look when <html data-season="…"> is set.
 * Pick a holiday (or Automatic) in Admin → Settings → Website look.
 * The brand colors (buttons, headlines, prices) never change; a holiday only adds a soft greeting
 * bar, a thin accent line under the header and, for a few holidays, a light hero effect.
 *   --sb-bg / --sb-fg   greeting bar background and text
 *   --sb-line           accent line (a color or a gradient)
 */
html[data-season="halloween"]    { --sb-bg: #1d1626; --sb-fg: #f3d9bf; --sb-line: linear-gradient(90deg, #d9772b, #8a5bb0); }
html[data-season="thanksgiving"] { --sb-bg: #3a2616; --sb-fg: #f3e2c7; --sb-line: linear-gradient(90deg, #b5562a, #d79a3c, #8a6a2f); }
html[data-season="christmas"]    { --sb-bg: #173524; --sb-fg: #f6efe2; --sb-line: linear-gradient(90deg, #b8333a, #d9b45a, #b8333a); }
html[data-season="newyear"]      { --sb-bg: #12172b; --sb-fg: #f1e3b5; --sb-line: linear-gradient(90deg, transparent, #d9b45a 30%, #f1e3b5 50%, #d9b45a 70%, transparent); }
html[data-season="valentines"]   { --sb-bg: #fbecf0; --sb-fg: #7a2a45; --sb-line: linear-gradient(90deg, #f2b3c4, #d9607f, #f2b3c4); }
html[data-season="stpatricks"]   { --sb-bg: #eaf5ec; --sb-fg: #1f5a34; --sb-line: linear-gradient(90deg, #4f9d64, #c9a94a, #4f9d64); }
html[data-season="easter"]       { --sb-bg: #f7f2fb; --sb-fg: #4d3f66; --sb-line: linear-gradient(90deg, #f4c6d4, #f6e3a1, #bfe3cf, #cdbdf0); }
html[data-season="earthday"]     { --sb-bg: #eaf3ec; --sb-fg: #24513a; --sb-line: linear-gradient(90deg, #4f9d64, #4a8fb8); }
html[data-season="memorial"],
html[data-season="july4"],
html[data-season="labor"],
html[data-season="veterans"]     { --sb-bg: #13213f; --sb-fg: #f4f1ea; --sb-line: linear-gradient(90deg, #b8333a 33.3%, #f4f1ea 33.3% 66.6%, #3c63b0 66.6%); }

/* Greeting bar above the header */
.season-bar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sb-bg); color: var(--sb-fg); text-align: center;
  padding: 9px 16px 11px; font-size: .9rem; font-weight: 500; letter-spacing: .01em;
}
.season-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sb-line); }
.season-bar .season-icon { font-size: 1rem; line-height: 1; }

/* Thin accent line under the header */
html[data-season] .site-header { border-bottom: 0; }
html[data-season] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sb-line); opacity: .8; }

/* ---------- Illustrations (markup from src/seasonArt.js) ---------- */
html[data-season] .page-hero .container,
html[data-season] .hero-content { position: relative; z-index: 2; }
html[data-season] .site-footer { position: relative; }
.season-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.season-decor svg, .sd-lights, .sd-bunting, .sd-spider, .sd-peek, .sd-on-edge, .sd-snowcap { pointer-events: none; }

/* A little group sitting on the bottom edge of the banner, off to the right of the text */
.sd-scene {
  position: absolute; right: clamp(12px, 5vw, 80px); bottom: 0;
  height: clamp(96px, 15vw, 190px); display: flex; align-items: flex-end; gap: clamp(2px, .6vw, 10px);
}
.sd-scene .sd-item { width: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.sd-bin { filter: drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 7px 10px rgba(0,0,0,.38)) !important; }
.sd-bin--tipped { margin-right: -10px; }
.sd-scene--grass .sd-item.sd-bin { z-index: 2; margin-bottom: -2px; }
.sd-scene--tight .sd-bin { margin-left: 10px; }
.sd-scene--tight { gap: 0; }
.sd-scene--tight .sd-pot { margin-left: -20%; }
.sd-scene--grass { padding: 0 6px 4px; }
.sd-grass { position: absolute; left: -12px; right: -12px; bottom: 0; width: calc(100% + 24px); z-index: 1; }
.sd-scene--grass .sd-item { position: relative; z-index: 0; margin-bottom: 2px; }
.sd-glow { filter: drop-shadow(0 0 14px rgba(255,170,60,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35)) !important; animation: sd-flicker 3.2s ease-in-out infinite; }
.sd-star { animation: sd-twinkle 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.sd-nose { animation: sd-twinkle 1s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #ff3b3b); }
.sd-wave { animation: sd-wave 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }

/* Things crossing the sky (bats, Santa's sleigh) */
.sd-fly { position: absolute; left: 100%; animation: sd-fly 22s linear infinite; }
/* Bats: cross the sky every so often, dipping and swooping, flapping a few beats then gliding */
.sd-batfly { position: absolute; left: 100%; animation: sd-fly-gap 20s linear infinite; }
.sd-batpath { animation: sd-swoop 3.4s ease-in-out infinite; }
.sd-batpath svg { display: block; max-width: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.sd-wing { transform-box: view-box; animation: sd-flap-l 1.5s linear infinite; }
.sd-wing--l { transform-origin: 47px 25px; }
.sd-wing--r { transform-origin: 53px 25px; animation-name: sd-flap-r; }
.sd-sleigh { filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); }

/* Bunnies hopping along the bottom */
.sd-hop { position: absolute; left: -90px; bottom: 6px; z-index: 3; animation: sd-cross 15s linear infinite; }
.sd-hop svg { width: 84px; animation: sd-bounce .7s cubic-bezier(.3,.6,.4,1) infinite alternate; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }

/* Falling leaves / shamrocks, rising hearts */
.sd-fall, .sd-rise { position: absolute; opacity: 0; animation: sd-fall 13s linear infinite; }
.sd-fall { top: -40px; }
.sd-rise { bottom: -40px; animation-name: sd-rise; }

/* Fireworks */
.fw { position: absolute; width: 0; height: 0; }
.fw i, .fw-burst { position: absolute; left: 0; top: 0; animation-duration: var(--dur); animation-delay: var(--delay); animation-iteration-count: infinite; }
.fw-trail { width: 2px; height: 46px; margin-left: -1px; border-radius: 2px; opacity: 0; background: linear-gradient(#fff, var(--c) 30%, transparent); box-shadow: 0 0 6px var(--c); animation-name: fw-rise; }
.fw-flash { width: calc(var(--size) * 2.4); height: calc(var(--size) * 2.4); margin: calc(var(--size) * -1.2) 0 0 calc(var(--size) * -1.2); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0, var(--c) 6%, color-mix(in srgb, var(--c) 25%, transparent) 22%, transparent 60%); animation-name: fw-flash; }
.fw-burst { animation-name: fw-gravity; }
/* Each spark is a streak with a bright head; it starts long (moving fast) and shrinks to a dot */
.fw-burst i { width: 40px; height: 2.2px; margin-top: -1.1px; border-radius: 2px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, transparent) 45%, var(--c) 85%, #fff);
  filter: drop-shadow(0 0 3px var(--c)); animation-name: fw-spark; }
.fw-burst i.fw-in { width: 22px; height: 1.8px; }

/* Snow */
.sd-snow {
  position: absolute; inset: 0; animation: sd-snow 30s linear infinite;
  background-image:
    radial-gradient(2.5px 2.5px at 20px 30px, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 120px 80px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(3px 3px at 200px 150px, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60px 190px, rgba(255,255,255,.55) 50%, transparent 51%);
  background-size: 260px 280px;
}

/* String lights and pennant bunting hanging under the header */
.sd-lights, .sd-bunting { position: absolute; left: 0; right: 0; top: 100%; display: flex; overflow: hidden; }
.sd-lights { height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 1Q20 10 40 1' fill='none' stroke='%23232a26' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x; }
.sd-lights i { flex: none; width: 40px; position: relative; }
.sd-lights i::before { content: ""; position: absolute; left: 17px; top: 4px; width: 6px; height: 4px; background: #2b302c; border-radius: 1px; }
.sd-lights i::after {
  content: ""; position: absolute; left: 15.5px; top: 7px; width: 9px; height: 13px; border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%;
  background: var(--bulb); box-shadow: 0 0 10px 2px var(--bulb); animation: sd-twinkle 1.4s ease-in-out infinite alternate;
}
.sd-lights i:nth-child(4n+1) { --bulb: #ff5a5a; }
.sd-lights i:nth-child(4n+2) { --bulb: #ffd65a; }
.sd-lights i:nth-child(4n+3) { --bulb: #5ad17a; }
.sd-lights i:nth-child(4n)   { --bulb: #6fa8ff; }
.sd-lights i:nth-child(3n)::after { animation-delay: .7s; }
.sd-lights i:nth-child(5n)::after { animation-delay: 1.1s; }
html[data-season="newyear"] .sd-lights i:nth-child(odd) { --bulb: #f1d77f; }
html[data-season="newyear"] .sd-lights i:nth-child(even) { --bulb: #f4f6ff; }

.sd-bunting { height: 22px; background: linear-gradient(#2a2a2a, #2a2a2a) 0 1px / 100% 1px no-repeat; }
.sd-bunting i { flex: none; width: 22px; height: 18px; margin: 1px 5px 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--b1); }
.sd-bunting i:nth-child(3n+2) { background: var(--b2); }
.sd-bunting i:nth-child(3n)   { background: var(--b3); }
html[data-season="easter"]       { --b1: #f4c6d4; --b2: #f6e3a1; --b3: #bfe3cf; }
html[data-season="easter"] .sd-bunting i:nth-child(4n) { background: #cdbdf0; }
html[data-season="valentines"]   { --b1: #e05a7f; --b2: #fbe9ef; --b3: #c2185b; }
html[data-season="stpatricks"]   { --b1: #3f9a5a; --b2: #f4f1ea; --b3: #d9b45a; }
html[data-season="thanksgiving"] { --b1: #c4502a; --b2: #e0a23e; --b3: #8f3b1f; }
html[data-season="memorial"], html[data-season="july4"], html[data-season="labor"], html[data-season="veterans"] { --b1: #b8333a; --b2: #f4f1ea; --b3: #2f4a8a; }

/* Halloween spider dropping from the header */
.sd-spider { position: absolute; top: 100%; right: 14%; width: 26px; display: flex; flex-direction: column; align-items: center; }
.sd-thread { width: 1px; height: 30px; background: rgba(230,230,230,.7); animation: sd-dangle 6s ease-in-out infinite; }
.sd-spider svg { width: 26px; margin-top: -2px; animation: sd-sway 3s ease-in-out infinite; transform-origin: top center; }

/* Footer: things sitting on (or peeking over) its top edge */
.sd-on-edge, .sd-peek { position: absolute; bottom: 100%; height: 72px; display: flex; align-items: flex-end; gap: 4px; z-index: 2; }
.sd-on-edge > svg { height: 100%; width: auto; }
.sd-on-edge .sd-item { height: var(--h, 100%); }
.sd-on-edge--grass { padding: 0 4px 2px; }
.sd-left { left: clamp(12px, 6vw, 90px); }
.sd-right { right: clamp(12px, 6vw, 90px); }
.sd-peek { height: 66px; width: 116px; overflow: hidden; margin-bottom: 0; }
.sd-peek svg { width: 116px; animation: sd-peek 7s ease-in-out infinite; }
.sd-snowcap { position: absolute; left: 0; top: 0; width: 100%; height: 16px; }

@keyframes sd-fly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 340px)); } }
@keyframes sd-cross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 180px)); } }
@keyframes sd-bounce { from { transform: translateY(0); } to { transform: translateY(-26px) rotate(-6deg); } }
@keyframes sd-fall { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 8% { opacity: .9; } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift), 900px) rotate(var(--spin)); } }
@keyframes sd-rise { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 10% { opacity: .85; } 85% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--drift), -820px) rotate(calc(var(--spin) / 8)); } }
@keyframes sd-fly-gap { 0% { transform: translateX(0); } 48%, 100% { transform: translateX(calc(-100vw - 340px)); } }
@keyframes sd-swoop {
  0% { transform: translate(0, 0) rotate(-3deg); } 18% { transform: translate(0, -34px) rotate(7deg); } 31% { transform: translate(0, 6px) rotate(-9deg); }
  52% { transform: translate(0, -16px) rotate(4deg); } 70% { transform: translate(0, 24px) rotate(-6deg); } 86% { transform: translate(0, -8px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(-3deg); }
}
/* Five quick beats (down-stroke faster than up-stroke), then a short glide with wings level */
@keyframes sd-flap-l {
  0%, 12%, 24%, 36%, 48% { transform: rotate(28deg) scaleY(1); animation-timing-function: cubic-bezier(.5,0,.8,.6); }
  5%, 17%, 29%, 41%, 53% { transform: rotate(-32deg) scaleY(.7); animation-timing-function: cubic-bezier(.2,.4,.5,1); }
  60%, 100% { transform: rotate(4deg) scaleY(1); }
}
@keyframes sd-flap-r {
  0%, 12%, 24%, 36%, 48% { transform: rotate(-28deg) scaleY(1); animation-timing-function: cubic-bezier(.5,0,.8,.6); }
  5%, 17%, 29%, 41%, 53% { transform: rotate(32deg) scaleY(.7); animation-timing-function: cubic-bezier(.2,.4,.5,1); }
  60%, 100% { transform: rotate(-4deg) scaleY(1); }
}
/* Fireworks: rise 0–18%, burst at 18%, sparks out by ~40%, droop and crackle out by ~78% */
@keyframes fw-rise {
  0% { opacity: 0; transform: translateY(var(--rise)); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  2% { opacity: 1; } 17% { opacity: 1; transform: translateY(0); } 18.5%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes fw-flash { 0%, 17.9% { opacity: 0; transform: scale(.15); } 19% { opacity: .9; transform: scale(.7); } 30%, 100% { opacity: 0; transform: scale(1); } }
@keyframes fw-gravity { 0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(.45,0,.9,.7); } 80%, 100% { transform: translateY(calc(var(--size) * .6)); } }
@keyframes fw-spark {
  0%, 17.9% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.1); }
  18% { opacity: 1; transform: rotate(var(--a)) translateX(0) scaleX(.6); animation-timing-function: cubic-bezier(.05,.8,.2,1); }
  30% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--r) * .78)) scaleX(1.5); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  48% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--r) * .97)) scaleX(.55); }
  60% { opacity: .9; transform: rotate(var(--a)) translateX(var(--r)) scaleX(.18); }
  63% { opacity: .3; } 66% { opacity: 1; } 69% { opacity: .2; } 72% { opacity: .8; } 75% { opacity: .15; } 77% { opacity: .55; }
  80%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scaleX(.12); }
}
@keyframes sd-snow { from { background-position: 0 0; } to { background-position: 40px 840px; } }
@keyframes sd-twinkle { from { opacity: 1; } to { opacity: .45; } }
@keyframes sd-flicker { 0%, 100% { opacity: 1; } 45% { opacity: .93; } 50% { opacity: .82; } 55% { opacity: .96; } }
@keyframes sd-wave { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(4deg); } }
@keyframes sd-dangle { 0%, 100% { height: 26px; } 50% { height: 84px; } }
@keyframes sd-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes sd-peek { 0%, 30% { transform: translateY(70%); } 45%, 80% { transform: translateY(0); } 95%, 100% { transform: translateY(70%); } }

/* Phones: smaller, nothing crossing the text */
@media (max-width: 720px) {
  .sd-scene { height: 72px; right: 8px; max-width: 70vw; }
  .sd-spider { right: 4%; }
  .sd-fly, .sd-batfly { display: none; }
  .fw { scale: .6; opacity: .7; }
  .sd-fall, .sd-rise { max-width: 16px; }
  .sd-on-edge, .sd-peek { height: 50px; }
  .sd-peek svg { width: 84px; }
  .sd-peek { width: 84px; }
  .sd-hop svg { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-fly, .sd-batfly, .sd-hop, .sd-fall, .sd-rise, .fw { display: none; }
  .season-decor *, .season-decor *::before, .season-decor *::after,
  .sd-lights *, .sd-lights *::after, .sd-spider *, .sd-peek * { animation: none !important; }
  .sd-peek svg { transform: none; }
}