/* Sneeze It home: Halloween.
   Everything here hangs off :root[data-halloween], which the <head> script sets only
   in October (Eastern time). On November 1 the attribute is not set and none of this
   applies. 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 Nov 1.
   The look follows Tesla's Halloween Mode: painted moonlit scenes, blue night, warm
   pumpkin light. The artwork lives in /halloween/. */

:root[data-halloween][data-halloween]{
  color-scheme:dark;
  --ink:#eef2f7;
  --ink-soft:#b3c0d4;
  --muted:#8190a8;
  --line:rgba(150,185,225,.16);
  --line-soft:rgba(150,185,225,.09);
  --paper:#070b14;
  --card:rgba(12,20,36,.66);
  --pink:#ff8a2a;            /* the page's highlight colour becomes pumpkin light */
  --green:#5ee8a0;
  --green-hover:#4fd590;
  --amber:#ffb24d;
  --focus:#8fd3ff;
  --on-ink:#070b14;
  --ink-hover:#fff;
  --faint:#4a5872;
  --fainter:#3f4b62;
  --live-text:#5ee8a0;
  --guide:#5ee8a0;
  --toast-action:#ff8a2a;
  --ring:rgba(238,242,247,.07);
  --glow-pink:transparent;
  --glow-green:transparent;
  --accent:#ff8a2a;
  --logo-light:none;
  --logo-dark:block;
  --sw-ring:rgba(255,255,255,.28);
}
:root[data-halloween] body{background:#070b14}
:root[data-halloween] .wrap{position:relative;z-index:1}

/* glass: the painted night shows through every surface */
:root[data-halloween] .tile,
:root[data-halloween] .panel,
:root[data-halloween] .news,
:root[data-halloween] .search,
:root[data-halloween] .btn{
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
:root[data-halloween] .btn,:root[data-halloween] .search{background:rgba(10,16,30,.78)}
/* main actions (the meeting Join button, Save) glow ghost-green, so dark text sits on light */
:root[data-halloween] .btn.primary{
  background:linear-gradient(180deg,#8dffc4,#3fd98c);border-color:#7dffb8;color:#03170c;font-weight:700;
  box-shadow:0 0 18px -2px rgba(94,232,160,.55), inset 0 1px 0 rgba(255,255,255,.45)}
:root[data-halloween] .btn.primary:hover{background:linear-gradient(180deg,#a6ffd2,#52e69a);box-shadow:0 0 26px 0 rgba(94,232,160,.7)}
:root[data-halloween] .greet h1{text-shadow:0 2px 24px rgba(0,0,0,.55)}
:root[data-halloween] .greet p{color:#c7d3e4;text-shadow:0 1px 12px rgba(0,0,0,.6)}
:root[data-halloween] footer{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ---------- the night: a painted sky, fixed behind the page ---------- */
.hx-sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,.15) 45%, rgba(7,11,20,.92) 88%, #070b14 100%),
    linear-gradient(90deg, rgba(7,11,20,.55) 0%, rgba(7,11,20,.1) 45%, rgba(7,11,20,0) 70%),
    url("/halloween/sky.webp") 78% 0/cover no-repeat;
}
/* slow drifting mist over the painting */
.hx-mist{position:absolute;left:-30%;right:-30%;top:30%;height:60%;opacity:.55;
  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%)}}

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

/* ---------- tiles glow green on hover, like Tesla's ghost-town traffic ---------- */
:root[data-halloween] .tile:hover img{filter:drop-shadow(0 0 10px rgba(94,232,160,.7))}
:root[data-halloween] .tile:hover{border-color:rgba(255,138,42,.45);box-shadow:0 14px 34px -10px rgba(255,138,42,.45)}

/* ---------- the trick-or-treat button ---------- */
.hx-trick{white-space:nowrap;border-color:rgba(255,138,42,.6)!important;color:#ffc48a!important;
  background:linear-gradient(180deg, rgba(58,30,12,.92), rgba(24,16,20,.9))!important;
  box-shadow:0 0 22px -6px rgba(255,138,42,.6)}
.hx-trick img{width:20px;height:20px;object-fit:cover;border-radius:50%;flex:0 0 auto}
.hx-trick:hover{box-shadow:0 0 30px -4px rgba(255,138,42,.85)}
.hx-foot{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hx-foot:hover{color:var(--accent)}

/* ---------- the graveyard, Tesla's parked scene ---------- */
.hx-yard{position:relative;z-index:1;height:clamp(200px,24vw,380px);margin-top:-70px;overflow:hidden;cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 38%);mask-image:linear-gradient(180deg, transparent 0, #000 38%)}
.hx-yard img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* candlelight: warm pools that breathe and flicker over the painted lanterns */
.hx-yard::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(9% 22% at 6% 84%, rgba(255,140,40,.55), transparent 70%),
    radial-gradient(7% 18% at 22% 88%, rgba(255,140,40,.4), transparent 70%),
    radial-gradient(6% 16% at 41% 78%, rgba(255,140,40,.3), transparent 70%),
    radial-gradient(7% 18% at 70% 80%, rgba(255,140,40,.35), transparent 70%),
    radial-gradient(9% 22% at 92% 84%, rgba(255,140,40,.55), 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}}

/* ---------- things that fly ---------- */
.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:46px;animation:hx-batfly var(--d,7s) linear forwards;filter:drop-shadow(0 0 1px rgba(150,200,255,.35))}
.hx-bat svg{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-ghost{width:170px;animation:hx-ghostfly 5s ease-in-out forwards;filter:drop-shadow(0 0 22px rgba(150,230,255,.55))}
@keyframes hx-ghostfly{
  0%{transform:translate(calc(100vw + 40px),38vh) rotate(-6deg);opacity:0}
  10%{opacity:.95}
  30%{transform:translate(70vw,20vh) rotate(4deg)}
  55%{transform:translate(42vw,50vh) rotate(-5deg)}
  80%{transform:translate(14vw,24vh) rotate(3deg);opacity:.95}
  100%{transform:translate(-220px,38vh) rotate(0);opacity:0}
}
.hx-rise{width:80px;animation:hx-rise 2.6s 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) + 34px),calc(var(--y) - 190px)) scale(1);opacity:0}}
.hx-ghosted{filter:drop-shadow(0 0 10px rgba(150,230,255,.7));animation:hx-hover 1.2s ease-in-out infinite alternate}
@keyframes hx-hover{from{transform:translateY(2px)}to{transform:translateY(-5px)}}

/* lightning: one flash, then a dimmer echo */
.hx-flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:#dfe9ff;animation:hx-flash 1.1s ease-out forwards}
@keyframes hx-flash{0%{opacity:0}4%{opacity:.8}12%{opacity:0}22%{opacity:.45}34%,100%{opacity:0}}
.hx-shiver .tile{animation:hx-shiver .5s ease-in-out 2}
@keyframes hx-shiver{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}

/* lights out: everything goes black but the carved face, and your cursor is the flashlight */
.hx-dark{position:fixed;inset:0;z-index:55;pointer-events:none;animation:hx-fadein .6s ease-out}
.hx-dark .beam{position:absolute;inset:0;background:radial-gradient(circle 150px at var(--mx,50%) var(--my,40%), transparent 0, transparent 105px, rgba(2,3,6,.985) 165px)}
.hx-dark img{position:absolute;left:50%;top:50%;width:min(560px,80vw);transform:translate(-50%,-50%);opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 52%, #000 55%, transparent 100%);mask-image:radial-gradient(ellipse 50% 46% at 50% 52%, #000 55%, transparent 100%);
  animation:hx-lantern 6.4s ease-in-out .5s forwards}
@keyframes hx-lantern{0%{opacity:0}15%{opacity:1}22%{opacity:.7}28%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes hx-fadein{from{opacity:0}to{opacity:1}}

/* full-screen moments: the light show and the title card */
.hx-stage{position:fixed;inset:0;z-index:70;background:#05070d;display:grid;place-items:center;overflow:hidden;cursor:pointer;animation:hx-fadein .8s ease-out}
.hx-stage.out{animation:hx-fadeout .9s ease-in forwards}
@keyframes hx-fadeout{to{opacity:0}}
.hx-stage .moon{position:absolute;inset:0;background:url("/halloween/witch-moon.webp") center/cover;animation:hx-kenburns 9s ease-out forwards}
@keyframes hx-kenburns{from{transform:scale(1.18)}to{transform:scale(1)}}
.hx-stage .title{position:relative;width:min(1100px,94vw);aspect-ratio:1600/861;background:url("/halloween/title.webp") center/cover;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)}
.hx-stage .title.in{animation:hx-titlein 1.1s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes hx-titlein{to{opacity:1;transform:scale(1)}}
.hx-stage .hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;color:rgba(238,242,247,.55);letter-spacing:.04em}
.hx-card{position:fixed;left:50%;top:50%;z-index:65;width:min(620px,88vw);aspect-ratio:1600/861;transform:translate(-50%,-50%) scale(.85);
  background:url("/halloween/title.webp") center/cover;border-radius:16px;box-shadow:0 24px 90px rgba(0,0,0,.65);pointer-events:none;
  animation:hx-card 3.4s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes hx-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)}}

@media (max-width:640px){
  .hx-sky{background:
    linear-gradient(180deg, rgba(7,11,20,.25) 0%, rgba(7,11,20,.35) 40%, rgba(7,11,20,.94) 80%, #070b14 100%),
    url("/halloween/sky.webp") 82% 0/auto 62vh no-repeat, #070b14}
  .hx-hat{left:-14px;top:-19px;width:42px}
  .hx-ghost{width:120px}
  .hx-yard{margin-top:-40px}
}
@media (prefers-reduced-motion: reduce){
  .hx-mist,.hx-yard::after,.hx-stage .moon,.hx-ghosted{animation:none}
}