/* www.sneeze.it: Halloween. The same painted night as home.sneeze.it, used lightly.
   Everything hangs off :root[data-halloween], which the <head> script sets only in
   October (New York time). On November 1 the attribute is not set and none of this
   applies, with no deploy. The rest of the page stays the brand: only the hero and the
   closing call to action go to night, and the magenta buttons stay magenta. */

/* ---------- hero: the haunted house under the moon ---------- */
:root[data-halloween] .hero-panel{
  background:
    radial-gradient(42% 30% at 50% 30%, rgba(6,10,20,.45), transparent 75%),
    linear-gradient(180deg, rgba(10,15,29,0) 0%, rgba(10,15,29,0) 38%, rgba(10,15,29,.85) 58%, #0a0f1d 72%),
    url("/assets/halloween/sky.webp") 100% 0/max(100%,1500px) auto no-repeat, #0a0f1d;
}
/* the pink floor glow turns to pumpkin light under the product window */
:root[data-halloween] .hero-panel::after{background:radial-gradient(60% 100% at 50% 100%,rgba(255,138,42,.28),transparent 70%)}
:root[data-halloween] .hero .eyebrow{color:#ffb36b}
:root[data-halloween] .hero h1{color:#f4f1ec;text-shadow:0 2px 30px rgba(0,0,0,.55)}
:root[data-halloween] .hero h1 .em{color:#ff5fb0}
:root[data-halloween] .hero .lede{color:#cfd7e4;text-shadow:0 1px 14px rgba(0,0,0,.6)}
:root[data-halloween] .hero .fine{color:#b8c3d4;text-shadow:0 1px 10px rgba(0,0,0,.8)}
:root[data-halloween] .hero .btn.ghost{color:#f4f1ec;box-shadow:inset 0 0 0 1.5px rgba(244,241,236,.35);background:rgba(10,15,29,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-halloween] .hero .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px #f4f1ec}
/* the product window glows like a lit window in the house */
:root[data-halloween] .stage .win{box-shadow:0 0 0 1px rgba(255,180,90,.18),0 30px 90px -20px rgba(255,138,42,.35),0 30px 60px -30px rgba(0,0,0,.6)}
:root[data-halloween] .stage .fan{box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}

/* the greeting above the eyebrow */
.hx-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);color:#ffd9b0;letter-spacing:-.01em;
  background:linear-gradient(180deg, rgba(58,30,12,.85), rgba(24,16,20,.8));border:1px solid rgba(255,138,42,.55);
  box-shadow:0 0 26px -6px rgba(255,138,42,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-greet img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* slow mist across the hero */
.hx-mist{position:absolute;left:-30%;right:-30%;top:22%;height:50%;pointer-events:none;opacity:.6;z-index:0;
  background:
    radial-gradient(38% 30% at 25% 55%, rgba(150,200,230,.10), transparent 70%),
    radial-gradient(30% 26% at 62% 48%, rgba(150,200,230,.08), transparent 70%),
    radial-gradient(34% 30% at 88% 62%, rgba(150,200,230,.09), transparent 70%);
  animation:hx-mist 40s ease-in-out infinite alternate}
@keyframes hx-mist{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
:root[data-halloween] .hero-panel > *:not(.hx-mist){position:relative;z-index:1}
:root[data-halloween] .hero-panel > .stage{z-index:1}

/* ---------- the logo wears the hat ---------- */
:root[data-halloween] .nav-logo{position:relative}
.hx-hat{position:absolute;left:-15px;top:-21px;width:40px;pointer-events:none;transform:rotate(-14deg);transform-origin:50% 90%;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
:root[data-halloween] .nav-logo:hover .hx-hat{transform:rotate(-24deg) translateY(-4px)}

/* ---------- closing call to action: the graveyard ---------- */
:root[data-halloween] .cta-band{position:relative;overflow:hidden;color:#f4f1ec;padding-bottom:clamp(200px,22vw,300px);
  background:
    linear-gradient(180deg, #0a0f1d 0%, rgba(10,15,29,.88) 30%, rgba(10,15,29,.35) 62%, rgba(10,15,29,0) 80%),
    url("/assets/halloween/graveyard.webp") 50% 100%/cover no-repeat, #0a0f1d}
:root[data-halloween] .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(8% 14% at 21% 88%, rgba(255,140,40,.5), transparent 70%),
    radial-gradient(6% 10% at 41% 76%, rgba(255,140,40,.35), transparent 70%),
    radial-gradient(6% 10% at 62% 72%, rgba(255,140,40,.3), transparent 70%),
    radial-gradient(9% 15% at 79% 88%, rgba(255,140,40,.5), transparent 70%);
  animation:hx-candle 2.6s infinite}
@keyframes hx-candle{0%,100%{opacity:.75}18%{opacity:1}22%{opacity:.6}40%{opacity:.95}63%{opacity:.7}66%{opacity:1}85%{opacity:.8}}
:root[data-halloween] .cta-band > *{position:relative;z-index:1}
:root[data-halloween] .cta-band h2{text-shadow:0 2px 24px rgba(0,0,0,.6)}
:root[data-halloween] .cta-band h2 .em{color:#ff5fb0}
:root[data-halloween] .cta-band p{color:#cfd7e4}
:root[data-halloween] .cta-band .scan-form label{color:#cfd7e4}
:root[data-halloween] .cta-band .btn.ghost{color:#f4f1ec;box-shadow:inset 0 0 0 1.5px rgba(244,241,236,.4);background:rgba(10,15,29,.5)}
.hx-note{margin-top:22px!important;font:600 13px/1.4 var(--mono)!important;color:#ffb36b!important;letter-spacing:.02em}

/* ---------- bats, and the ghost the hat lets out ---------- */
.hx-fly{position:fixed;z-index:40;pointer-events:none;left:0;top:0;will-change:transform}
.hx-fly img{display:block;width:100%;height:auto}
.hx-bat{width:40px;animation:hx-batfly var(--d,7s) linear forwards}
.hx-bat svg{display:block;animation:hx-flap .2s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes hx-flap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
@keyframes hx-batfly{
  0%{transform:translate(-80px,var(--y0))}
  25%{transform:translate(25vw,calc(var(--y0) - 40px))}
  50%{transform:translate(50vw,calc(var(--y0) + 30px))}
  75%{transform:translate(75vw,calc(var(--y0) - 30px))}
  100%{transform:translate(calc(100vw + 80px),calc(var(--y0) + 10px))}
}
.hx-rise{width:90px;animation:hx-rise 2.8s ease-out forwards;filter:drop-shadow(0 0 16px rgba(150,230,255,.6))}
@keyframes hx-rise{0%{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}20%{opacity:.95}100%{transform:translate(calc(var(--x) + 60px),calc(var(--y) + 140px)) scale(1);opacity:0}}

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

@media (max-width:760px){
  :root[data-halloween] .hero-panel{background:
    linear-gradient(180deg, rgba(6,10,20,.35) 0%, rgba(6,10,20,.55) 45%, rgba(6,10,20,.92) 85%, #0a0f1d 100%),
    url("/assets/halloween/sky.webp") 88% 0/auto 520px no-repeat, #0a0f1d}
  .hx-hat{left:-12px;top:-18px;width:34px}
}
@media (prefers-reduced-motion: reduce){
  .hx-mist,:root[data-halloween] .cta-band::after{animation:none}
}