/* www.sneeze.it: the November season. Thanksgiving through Thanksgiving Day, 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 with no deploy. Like Halloween, only
   the hero and the closing call to action change, and the magenta buttons stay magenta. */

/* ---------- Thanksgiving: harvest farm at dusk ---------- */
:root[data-season="thanks"] .hero-panel{
  background:
    radial-gradient(42% 32% at 30% 34%, rgba(14,12,26,.42), transparent 75%),
    linear-gradient(180deg, rgba(20,16,30,0) 0%, rgba(20,16,30,0) 40%, rgba(24,16,22,.82) 60%, #1a1218 74%),
    url("/assets/season/thanks-sky.webp") 100% 0/max(100%,1500px) auto no-repeat, #1a1218;
}
:root[data-season="thanks"] .hero-panel::after{background:radial-gradient(60% 100% at 50% 100%,rgba(255,150,60,.26),transparent 70%)}
:root[data-season="thanks"] .hero .eyebrow{color:#ffc27a}
:root[data-season="thanks"] .stage .win{box-shadow:0 0 0 1px rgba(255,190,110,.18),0 30px 90px -20px rgba(255,150,60,.35),0 30px 60px -30px rgba(0,0,0,.6)}

/* ---------- Black Friday and Cyber Monday: the city at night ---------- */
:root:is([data-season="bf"],[data-season="cyber"]) .hero-panel{
  background:
    radial-gradient(46% 40% at 50% 40%, rgba(4,6,14,.78), rgba(4,6,14,.45) 60%, transparent 85%),
    linear-gradient(180deg, rgba(6,8,16,.15) 0%, rgba(6,8,16,.2) 40%, rgba(6,8,16,.86) 60%, #06080f 74%),
    url("/assets/season/bf-sky.webp") 100% 0/max(100%,1500px) auto no-repeat, #06080f;
}
:root:is([data-season="bf"],[data-season="cyber"]) .hero-panel::after{background:radial-gradient(60% 100% at 50% 100%,rgba(236,46,145,.28),transparent 70%)}
:root:is([data-season="bf"],[data-season="cyber"]) .hero .eyebrow{color:#ffd36b}
:root:is([data-season="bf"],[data-season="cyber"]) .stage .win{box-shadow:0 0 0 1px rgba(255,211,107,.2),0 30px 90px -20px rgba(236,46,145,.4),0 30px 60px -30px rgba(0,0,0,.6)}

/* ---------- shared: dark hero type ---------- */
:root[data-season] .hero h1{color:#f6f1ea;text-shadow:0 2px 30px rgba(0,0,0,.55)}
:root[data-season] .hero h1 .em{color:#ff5fb0}
:root[data-season] .hero .lede{color:#d9d4cc;text-shadow:0 1px 14px rgba(0,0,0,.6)}
:root[data-season] .hero .fine{color:#c4bdb3;text-shadow:0 1px 10px rgba(0,0,0,.8)}
:root[data-season] .hero .btn.ghost{color:#f6f1ea;box-shadow:inset 0 0 0 1.5px rgba(246,241,234,.35);background:rgba(10,10,18,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-season] .hero .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px #f6f1ea}
:root[data-season] .hero-panel > *:not(.sx-glow){position:relative;z-index:1}
:root[data-season] .hero-panel > .stage{z-index:1}

/* the greeting above the eyebrow: names the holiday so nobody wonders why the site changed */
.sx-greet{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;margin:0 auto 18px;padding:8px 18px 8px 8px;border-radius:999px;
  font:800 15px/1.2 var(--display);letter-spacing:-.01em;text-decoration:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sx-greet img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
:root[data-season="thanks"] .sx-greet{color:#ffe1bd;background:linear-gradient(180deg,rgba(70,36,14,.85),rgba(30,18,16,.8));
  border:1px solid rgba(255,160,70,.55);box-shadow:0 0 26px -6px rgba(255,150,60,.6)}
:root:is([data-season="bf"],[data-season="cyber"]) .sx-greet{color:#fff1c9;background:linear-gradient(180deg,rgba(20,14,24,.9),rgba(8,8,14,.85));
  border:1px solid rgba(255,211,107,.6);box-shadow:0 0 28px -6px rgba(236,46,145,.7)}
a.sx-greet:hover{border-color:#ffd36b}
a.sx-greet .go{color:#ff5fb0}

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

/* ---------- closing call to action ---------- */
:root[data-season] .cta-band{position:relative;overflow:hidden;color:#f6f1ea;padding-bottom:clamp(200px,22vw,300px)}
:root[data-season="thanks"] .cta-band{background:
    linear-gradient(180deg, #1a1218 0%, rgba(26,18,24,.88) 30%, rgba(26,18,24,.35) 62%, rgba(26,18,24,0) 80%),
    url("/assets/season/thanks-table.webp") 50% 100%/cover no-repeat, #1a1218}
:root[data-season="thanks"] .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 18% at 50% 92%, rgba(255,160,70,.32), transparent 70%);animation:sx-candle 3s infinite}
:root:is([data-season="bf"],[data-season="cyber"]) .cta-band{background:
    linear-gradient(180deg, #06080f 0%, rgba(6,8,15,.88) 30%, rgba(6,8,15,.35) 62%, rgba(6,8,15,0) 80%),
    url("/assets/season/cyber-band.webp") 50% 100%/cover no-repeat, #06080f}
@keyframes sx-candle{0%,100%{opacity:.8}20%{opacity:1}45%{opacity:.7}70%{opacity:.95}}
:root[data-season] .cta-band > *{position:relative;z-index:1}
:root[data-season] .cta-band h2{text-shadow:0 2px 24px rgba(0,0,0,.6)}
:root[data-season] .cta-band h2 .em{color:#ff5fb0}
:root[data-season] .cta-band p{color:#d9d4cc}
:root[data-season] .cta-band .scan-form label{color:#d9d4cc}
:root[data-season] .cta-band .btn.ghost{color:#f6f1ea;box-shadow:inset 0 0 0 1.5px rgba(246,241,234,.4);background:rgba(10,10,18,.5)}
.sx-note{margin-top:22px!important;font:600 13px/1.5 var(--mono)!important;letter-spacing:.02em;max-width:640px;margin-left:auto;margin-right:auto}
:root[data-season="thanks"] .sx-note{color:#ffc27a!important}
:root:is([data-season="bf"],[data-season="cyber"]) .sx-note{color:#ffd36b!important}

/* ---------- falling leaves (Thanksgiving) and gold confetti (Black Friday, Cyber Monday) ---------- */
.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)}}

/* the hover flurry: pieces pop up from the logo, then tumble down */
.sx-burst{animation:sx-burst var(--d,3s) cubic-bezier(.2,.6,.4,1) forwards}
.sx-burst svg{animation:sx-spin var(--s,2s) ease-in-out infinite alternate}
@keyframes sx-burst{
  0%{transform:translate(var(--x),var(--y)) scale(.4);opacity:0}
  12%{transform:translate(calc(var(--x) + var(--bx) * .4),calc(var(--y) + var(--by))) scale(1);opacity:1}
  100%{transform:translate(calc(var(--x) + var(--bx)),calc(var(--y) + 70vh)) scale(1);opacity:0}
}
p.sx-greet{cursor:pointer}

/* opt-out link in the footer */
.sx-foot{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sx-foot:hover{color:var(--mag-deep)}

@media (max-width:760px){
  :root[data-season="thanks"] .hero-panel{background:
    linear-gradient(180deg, rgba(14,10,18,.35) 0%, rgba(14,10,18,.55) 45%, rgba(14,10,18,.92) 85%, #1a1218 100%),
    url("/assets/season/thanks-sky.webp") 88% 0/auto 520px no-repeat, #1a1218}
  :root:is([data-season="bf"],[data-season="cyber"]) .hero-panel{background:
    linear-gradient(180deg, rgba(4,6,12,.35) 0%, rgba(4,6,12,.6) 45%, rgba(4,6,12,.94) 85%, #06080f 100%),
    url("/assets/season/bf-sky.webp") 88% 0/auto 520px no-repeat, #06080f}
  .sx-leaf{left:-12px;top:-13px;width:28px}
}
@media (prefers-reduced-motion: reduce){
  :root[data-season] .cta-band::after{animation:none}
}