/* SATURNBORNFILMS: Halloween takeover (js/halloween.js). Fixed-position UI only: no layout shift. */
.hw-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(8,1,4,.92);border-top:1px solid rgba(255,30,86,.6);
  font:400 clamp(17px,4.4vw,24px)/1.1 "VT323",monospace;letter-spacing:.12em;color:#ffe9d6;text-transform:uppercase;text-align:center;
  box-shadow:0 -8px 30px rgba(196,0,43,.35)}
.hw-has-bar body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
.hw-rec{color:#ff2a4d;animation:hwBlink 1s steps(2) infinite}
.hw-clock{color:#ffb347;font-size:1.25em;letter-spacing:.14em;text-shadow:0 0 8px rgba(255,138,31,.8),2px 0 rgba(255,0,80,.6),-2px 0 rgba(0,255,220,.35);font-variant-numeric:tabular-nums;display:inline-block;min-width:11ch}
@keyframes hwBlink{50%{opacity:0}}
/* ---- live ---- */
.hw-live{--mag:#ff3b1f;--cyan:#ff8a1f;--slime:#ff8a1f;--slime2:#c45200;--purple:#8a0010;--violet:#a3001a;--sun:#ffb347;--crimson:#ff1e1e;--blood:#9a0010}
.hw-live body{background:#0a0102}
.hw-live .hero-sky,.hw-live .divider .loop{filter:sepia(.35) saturate(1.5) hue-rotate(-18deg) contrast(1.05)}
.hw-here{position:relative;color:#ff2a1a;font:400 clamp(22px,5.4vw,30px)/1 "Creepster","Righteous",cursive;letter-spacing:.1em;text-shadow:0 0 12px rgba(255,40,0,.9)}
.hw-go{color:#ffb347;text-decoration:none;border:1px solid rgba(255,138,31,.6);padding:4px 10px;border-radius:6px}
.hw-go:hover{background:#ff8a1f;color:#0a0102}
.hw-flicker{pointer-events:none;position:fixed;inset:0;z-index:59;background:radial-gradient(ellipse at 50% 0%,rgba(255,150,40,.16),rgba(0,0,0,0) 60%);animation:hwFlicker 7s infinite steps(1)}
@keyframes hwFlicker{0%,100%{opacity:1}31%{opacity:.25}32%{opacity:1}33%{opacity:.1}34%{opacity:1}71%{opacity:.4}72%{opacity:1}88%{opacity:0;background-color:rgba(0,0,0,.35)}89%{opacity:1;background-color:transparent}}
.hw-glitch-in body{animation:hwGlitch .9s steps(6) 1}
@keyframes hwGlitch{0%{filter:blur(1px) contrast(1.6);transform:translateX(-6px) skewX(4deg);clip-path:inset(10% 0 30% 0)}
  30%{transform:translateX(5px) skewX(-3deg);clip-path:inset(40% 0 5% 0)}60%{transform:translateX(-2px);clip-path:inset(0 0 60% 0);filter:hue-rotate(40deg)}100%{transform:none;clip-path:none;filter:none}}
.hw-live .h2,.hw-live .wordmark-text{animation:hwTrack 9s infinite steps(1)}
@keyframes hwTrack{0%,96%,100%{transform:none}97%{transform:translateX(3px) skewX(-6deg)}98%{transform:translateX(-4px)}}
/* ---- Midnight Tape section ---- */
.midnight-tape{padding:70px 0;background:radial-gradient(ellipse at 50% 0%,rgba(255,60,0,.18),transparent 60%),#0a0102;border-top:1px solid rgba(255,30,30,.4);border-bottom:1px solid rgba(255,30,30,.4)}
.hw-copy{font:400 22px/1.3 "VT323",monospace;letter-spacing:.1em;color:#ffb347;margin:-10px 0 22px}
.hw-tape{margin:0}
.hw-screen{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 0 0 3px #2a0505,0 0 50px rgba(255,40,0,.35)}
.hw-screen>*,.hw-screen iframe,.hw-screen video,.hw-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hw-screen .yt-btn{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto}
.hw-screen>.btn{position:static;margin:auto}
.hw-tape figcaption{margin-top:10px;color:#ffe9d6;font-size:15px}
.hw-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:22px}
@media (prefers-reduced-motion:reduce){
  .hw-rec,.hw-flicker,.hw-live .h2,.hw-live .wordmark-text,.hw-glitch-in body{animation:none!important}
  .hw-flicker{opacity:.6}
}
@media print{.hw-bar,.hw-flicker{display:none!important}}
/* keep clear of Netlify's corner badge on phones */
@media (max-width:700px){
  .hw-bar{justify-content:flex-start;text-align:left;padding-right:205px;font-size:17px;letter-spacing:.06em;min-height:64px}
  .hw-countdown .hw-label{flex-basis:100%}
  .hw-countdown .hw-rec{display:none}
  .hw-has-bar body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}