/* Sneeze It home: the November season (Thanksgiving, then Black Friday through Cyber Monday).
   Everything hangs off :root[data-season], which the <head> script sets from the New York clock,
   so each phase starts and ends at midnight ET with no deploy. The doubled attribute out-ranks every
   theme block, so the season wins over whichever theme a person picked and their pick comes back
   untouched on December 1. Same painted approach as Halloween; the artwork lives in /season/. */

:root[data-season][data-season]{
  color-scheme:dark;
  --ink:#f6f1ea; --ink-soft:#d6cbbd; --muted:#a8998a;
  --line:rgba(255,210,160,.16); --line-soft:rgba(255,210,160,.09);
  --paper:#1a1218; --card:rgba(34,22,24,.66);
  --pink:#ff9a3c; --amber:#ffc27a; --focus:#ffd3a0; --on-ink:#1a1218; --ink-hover:#fff;
  --faint:#6e5c56; --fainter:#5c4c48; --ring:rgba(246,241,234,.07);
  --glow-pink:transparent; --glow-green:transparent; --accent:#ff9a3c;
  --logo-light:none; --logo-dark:block; --sw-ring:rgba(255,255,255,.28);
}
:root[data-season="bf"][data-season="bf"],:root[data-season="cyber"][data-season="cyber"]{
  --paper:#06080f; --card:rgba(14,14,26,.7); --line:rgba(255,211,107,.16); --line-soft:rgba(255,211,107,.09);
  --pink:#ff5fb0; --amber:#ffd36b; --accent:#ffd36b; --muted:#9a96a8; --ink-soft:#cfcadb;
}
:root[data-season] body{background:var(--paper)}
:root[data-season] .wrap{position:relative;z-index:2}  /* above the band, so the footer links stay clickable */
:root[data-season] .tile,:root[data-season] .panel,:root[data-season] .news,:root[data-season] .search,:root[data-season] .btn{
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
:root[data-season] .btn,:root[data-season] .search{background:rgba(20,14,18,.78)}
:root[data-season="thanks"] .btn.primary{background:linear-gradient(180deg,#ffc27a,#ff9a3c);border-color:#ffc27a;color:#2a1306;font-weight:700;
  box-shadow:0 0 18px -2px rgba(255,154,60,.55), inset 0 1px 0 rgba(255,255,255,.45)}
:root:is([data-season="bf"],[data-season="cyber"]) .btn.primary{background:linear-gradient(180deg,#ffe08a,#f5c242);border-color:#ffe08a;color:#1a1204;font-weight:700;
  box-shadow:0 0 18px -2px rgba(255,211,107,.55), inset 0 1px 0 rgba(255,255,255,.45)}
:root[data-season] .greet h1{text-shadow:0 2px 24px rgba(0,0,0,.55)}
:root[data-season] .greet p{color:var(--ink-soft);text-shadow:0 1px 12px rgba(0,0,0,.6)}
:root[data-season] footer{text-shadow:0 1px 8px rgba(0,0,0,.9)}
:root[data-season] .tile:hover{border-color:rgba(255,190,110,.45);box-shadow:0 14px 34px -10px rgba(255,154,60,.45)}

/* the painted sky, fixed behind the page */
.sx-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
:root[data-season="thanks"] .sx-sky{background:
    linear-gradient(180deg, rgba(26,18,24,0) 0%, rgba(26,18,24,.15) 45%, rgba(26,18,24,.92) 88%, #1a1218 100%),
    linear-gradient(90deg, rgba(26,18,24,.55) 0%, rgba(26,18,24,.1) 45%, rgba(26,18,24,0) 70%),
    url("/season/thanks-sky.webp") 78% 0/cover no-repeat}
:root:is([data-season="bf"],[data-season="cyber"]) .sx-sky{background:
    linear-gradient(180deg, rgba(6,8,15,0) 0%, rgba(6,8,15,.2) 45%, rgba(6,8,15,.94) 88%, #06080f 100%),
    linear-gradient(90deg, rgba(6,8,15,.6) 0%, rgba(6,8,15,.1) 45%, rgba(6,8,15,0) 70%),
    url("/season/bf-sky.webp") 78% 0/cover no-repeat}

/* a maple leaf on the logo */
:root[data-season] .logo{position:relative}
.sx-leaf{position:absolute;left:-18px;top:-20px;width:44px;pointer-events:none;transform:rotate(-18deg);transform-origin:70% 80%;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
:root[data-season] .logo:hover .sx-leaf{transform:rotate(-34deg) translateY(-4px)}

/* the band under the page: the harvest table, or the Cyber Monday grid */
.sx-band{position:relative;z-index:1;height:clamp(200px,24vw,380px);margin-top:-70px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 38%);mask-image:linear-gradient(180deg, transparent 0, #000 38%)}
.sx-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
:root[data-season="thanks"] .sx-band::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 22% at 50% 88%, rgba(255,160,70,.35), transparent 70%);animation:sx-candle 3s infinite}
@keyframes sx-candle{0%,100%{opacity:.8}20%{opacity:1}45%{opacity:.7}70%{opacity:.95}}

/* falling leaves and gold confetti */
.sx-fly{position:fixed;z-index:40;pointer-events:none;left:0;top:0;will-change:transform}
.sx-fly svg{display:block;width:100%;height:auto}
.sx-fall{animation:sx-fall var(--d,8s) linear forwards}
.sx-fall svg{animation:sx-spin var(--s,3s) ease-in-out infinite alternate}
@keyframes sx-fall{
  0%{transform:translate(var(--x0),-60px)}
  33%{transform:translate(calc(var(--x0) + var(--dx)),30vh)}
  66%{transform:translate(calc(var(--x0) - var(--dx)),60vh)}
  100%{transform:translate(calc(var(--x0) + var(--dx)),95vh);opacity:0}
}
@keyframes sx-spin{from{transform:rotate(-35deg) rotateY(0)}to{transform:rotate(35deg) rotateY(160deg)}}

.sx-foot{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sx-foot:hover{color:var(--accent)}

@media (max-width:640px){
  .sx-leaf{left:-14px;top:-15px;width:34px}
  .sx-band{height:180px}
}
@media (prefers-reduced-motion: reduce){ .sx-band::after{animation:none} }

/* ============================================================
   the play: Pass the pie / Doorbuster, the show, and the pokes
   ============================================================ */
.sx-band{cursor:pointer}
.sx-play{white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
:root[data-season="thanks"] .sx-play{border-color:rgba(255,160,70,.6)!important;color:#ffe1bd!important;
  background:linear-gradient(180deg,rgba(70,36,14,.92),rgba(30,18,16,.9))!important;box-shadow:0 0 22px -6px rgba(255,150,60,.6)}
:root:is([data-season="bf"],[data-season="cyber"]) .sx-play{border-color:rgba(255,211,107,.65)!important;color:#fff1c9!important;
  background:linear-gradient(180deg,rgba(22,16,28,.95),rgba(8,8,14,.92))!important;box-shadow:0 0 22px -6px rgba(236,46,145,.7)}
.sx-play img{width:20px;height:20px;object-fit:cover;border-radius:50%;flex:0 0 auto}
.sx-play:hover{filter:brightness(1.12)}

.sx-fly img{display:block;width:100%;height:auto}
/* a pie or a gift rises out of the band */
.sx-rise{width:80px;animation:sx-rise 2.6s ease-out forwards;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
@keyframes sx-rise{0%{transform:translate(var(--x),var(--y)) scale(.3) rotate(-10deg);opacity:0}20%{opacity:1}100%{transform:translate(calc(var(--x) + 34px),calc(var(--y) - 190px)) scale(1) rotate(8deg);opacity:0}}
/* the turkey trot along the bottom of the window */
.sx-trot{width:150px;animation:sx-trot 4.2s linear forwards;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.sx-trot img{animation:sx-bob .28s ease-in-out infinite alternate}
@keyframes sx-trot{from{transform:translate(-180px,calc(100vh - 190px))}to{transform:translate(calc(100vw + 40px),calc(100vh - 190px))}}
@keyframes sx-bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-10px) rotate(3deg)}}
.sx-cart{width:90px}
/* a pie thrown at a tile */
.sx-pie{width:90px;animation:sx-throw .85s cubic-bezier(.3,.1,.6,1) forwards}
@keyframes sx-throw{from{transform:translate(-120px,60vh) rotate(-200deg) scale(.6)}to{transform:translate(var(--tx),var(--ty)) rotate(20deg) scale(1)}}
.sx-creamed{position:relative;animation:sx-splat .5s ease-out}
.sx-creamed::after{content:"";position:absolute;inset:8%;border-radius:40% 55% 45% 60%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,#fffaf0 0 35%,#f6e8d0 55%,transparent 72%);opacity:.92}
@keyframes sx-splat{0%{transform:scale(1)}30%{transform:scale(.94) rotate(-1.5deg)}100%{transform:none}}
.sx-pied{filter:drop-shadow(0 0 10px rgba(255,190,110,.7));animation:sx-hover 1.2s ease-in-out infinite alternate}
@keyframes sx-hover{from{transform:translateY(2px)}to{transform:translateY(-5px)}}
/* food coma */
.sx-coma .wrap{animation:sx-doze 4.2s ease-in-out}
@keyframes sx-doze{0%,100%{filter:none;transform:none}25%{filter:blur(2px) sepia(.5) brightness(.8)}50%{filter:blur(3px) sepia(.6) brightness(.7);transform:rotate(-.6deg) translateY(6px)}75%{filter:blur(1px) sepia(.3);transform:rotate(.4deg)}}
/* gift rain */
.sx-gift{animation:sx-giftfall var(--d,4s) cubic-bezier(.4,0,.8,1) forwards;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
@keyframes sx-giftfall{from{transform:translate(var(--x0),-90px) rotate(0)}to{transform:translate(var(--x0),105vh) rotate(var(--r))}}
/* sale tags on every tile */
.tile{position:relative}
.sx-tag{position:absolute;top:8px;right:-6px;z-index:3;padding:4px 9px;border-radius:4px;font:800 11px/1 var(--mono,monospace);letter-spacing:.04em;
  color:#1a1204;background:linear-gradient(180deg,#ffe08a,#f5c242);box-shadow:0 4px 12px rgba(0,0,0,.4);transform:rotate(8deg);animation:sx-tagin .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes sx-tagin{from{transform:rotate(30deg) scale(.2);opacity:0}to{transform:rotate(8deg) scale(1);opacity:1}}
/* the doorbuster countdown */
.sx-count{position:fixed;left:50%;top:45%;z-index:66;transform:translate(-50%,-50%);pointer-events:none;
  font:900 clamp(90px,16vw,220px)/1 var(--display,system-ui);color:#ffd36b;text-shadow:0 0 40px rgba(236,46,145,.8),0 8px 30px rgba(0,0,0,.6)}
.sx-count.go{animation:sx-pulse .65s ease-out}
@keyframes sx-pulse{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
/* Cyber Monday glitch */
.sx-glitch .wrap{animation:sx-glitch 1.4s steps(2) 1}
@keyframes sx-glitch{
  0%,100%{transform:none;filter:none}
  10%{transform:translate(-6px,2px);filter:drop-shadow(4px 0 #ff2bd6) drop-shadow(-4px 0 #2bf0ff)}
  25%{transform:translate(5px,-3px) skewX(4deg);filter:hue-rotate(90deg) drop-shadow(-5px 0 #ff2bd6)}
  40%{transform:translate(-3px,0);filter:drop-shadow(5px 0 #2bf0ff) contrast(1.4)}
  60%{transform:translate(4px,3px) skewX(-3deg);filter:hue-rotate(-60deg)}
  80%{transform:translate(-2px,-2px);filter:drop-shadow(3px 0 #ff2bd6) drop-shadow(-3px 0 #2bf0ff)}
}
/* title card */
.sx-card{position:fixed;left:50%;top:50%;z-index:65;width:min(620px,88vw);aspect-ratio:16/9;transform:translate(-50%,-50%) scale(.85);
  background:center/cover no-repeat;border-radius:16px;box-shadow:0 24px 90px rgba(0,0,0,.65);pointer-events:none;
  animation:sx-card 3.4s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes sx-card{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
/* the show */
.sx-stage{position:fixed;inset:0;z-index:70;background:#0b0810;display:grid;place-items:center;overflow:hidden;cursor:pointer;animation:sx-fadein .8s ease-out}
.sx-stage.out{animation:sx-fadeout .9s ease-in forwards}
@keyframes sx-fadein{from{opacity:0}to{opacity:1}}
@keyframes sx-fadeout{to{opacity:0}}
.sx-stage .bg{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(.7);animation:sx-kenburns 10s ease-out forwards}
@keyframes sx-kenburns{from{transform:scale(1.18)}to{transform:scale(1)}}
.sx-stage .title{position:relative;width:min(1100px,94vw);aspect-ratio:16/9;background:center/cover no-repeat;border-radius:18px;
  box-shadow:0 30px 120px rgba(0,0,0,.7),0 0 80px rgba(255,190,90,.25);opacity:0;transform:scale(.92)}
.sx-stage .title.in{animation:sx-titlein 1.1s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes sx-titlein{to{opacity:1;transform:scale(1)}}
.sx-stage .hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;color:rgba(246,241,234,.6);letter-spacing:.04em}
@media (max-width:640px){ .sx-trot{width:110px} .sx-card{width:90vw} }
@media (prefers-reduced-motion: reduce){ .sx-stage .bg,.sx-pied{animation:none} }