/*!
 * SP Seasonal — Thanksgiving (Heritage Labs), photoreal harvest.
 * Assets: thanksgiving-garland.webp (3000x220 alpha, seamless-x) · thanksgiving-scene.webp
 * (3000x600 alpha, seamless-x, fallen-leaf bank base) · thanksgiving-footer.webp (2880x900) ·
 * thanksgiving-leaves.webp (1024x1024 alpha, seamless tile). Rendered by Codex; QA'd and
 * converted by tools/qa.py. Written by tools/gen-thanksgiving.py — edit the generator.
 * The russet top bar is set through SP Promo Bar's colours by the season registry (PHP).
 */

/* SP Promo Bar's edge fades live in its stylesheet (not inline), so they follow the season here */
html body .sp-promo-bar::before{background:linear-gradient(90deg,#7E341A,rgba(126,52,26,0))!important}
html body .sp-promo-bar::after{background:linear-gradient(270deg,#7E341A,rgba(126,52,26,0))!important}

/* A real autumn garland with lit micro-lights, hung across the top of the page.
   In-flow at the top of <main> (not on the sticky header), so it scrolls away with the page. */
main::before{content:"";display:block;height:70px;margin-bottom:-12px;pointer-events:none;
  background:url(thanksgiving-garland.webp) repeat-x 50% 0/auto 64px}
@media (max-width:900px){
  main::before{height:50px;margin-bottom:-8px;background-size:auto 46px}
}

/* Deliberately NO overlay on the hero: falling leaves over product photography read as
   smudges (tested tg1). The falling leaves live in the footer, where they read against dusk. */

/* The harvest tableau: heirloom pumpkins, crates and lit lanterns rising behind the bottom
   of the page, slightly translucent, standing in fallen leaves that run into the footer. */
main:has(+ footer.ft)::after{content:"";display:block;height:440px;pointer-events:none;opacity:.5;
  background:url(thanksgiving-scene.webp) repeat-x 50% 100%/auto 440px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px);
          mask-image:linear-gradient(180deg,transparent 0,#000 150px)}
html body footer.ft,html body footer#sf.ft{margin-top:0!important;border-top:0!important}
@media (max-width:900px){main:has(+ footer.ft)::after{height:280px;background-size:auto 280px}}

/* The footer becomes a late-autumn forest at dusk, graded into the site navy */
html body footer.ft,html body footer#sf.ft{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,23,42,.30) 0,rgba(15,23,42,.84) 30%,rgba(15,23,42,.96) 60%,#0F172A 100%),
  url(thanksgiving-footer.webp) 50% 20%/cover no-repeat #0F172A!important}
footer.ft::after{content:"";position:absolute;z-index:0;left:0;right:0;top:-512px;height:calc(100% + 512px);
  pointer-events:none;opacity:.45;background:url(thanksgiving-leaves.webp) repeat 0 0/512px 512px;
  will-change:transform;animation:sp-tg-fall-ft 46s linear infinite}
footer.ft > *{position:relative;z-index:2}

/* Leaves fall with a gentle sideways sway; start and end states match, so the loop is seamless */
@keyframes sp-tg-fall-ft{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(30px,256px,0)}100%{transform:translate3d(0,512px,0)}}

@media (prefers-reduced-motion:reduce){
  footer.ft::after{animation:none}
}