/* ==========================================================================
   Halloween layer. Elements are injected by js/halloween.js only while the
   seasonal theme is on; html.halloween covers the few existing-element tweaks.
   ========================================================================== */
:root {
  --pumpkin: #ff7a1a;
  --candle: #ffd25a;
}

/* ---------- blood moon ---------- */
.hw-moon {
  position: absolute; z-index: -3; pointer-events: none;
  top: calc(var(--nav-h) + 5vh); right: 9vw;
  width: clamp(110px, 16vw, 250px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 36%, rgba(80, 0, 14, .45) 0 7%, transparent 8%),
    radial-gradient(circle at 63% 58%, rgba(80, 0, 14, .4) 0 10%, transparent 11%),
    radial-gradient(circle at 56% 24%, rgba(80, 0, 14, .3) 0 5%, transparent 6%),
    radial-gradient(circle at 26% 68%, rgba(80, 0, 14, .3) 0 6%, transparent 7%),
    radial-gradient(circle at 74% 38%, rgba(80, 0, 14, .25) 0 4%, transparent 5%),
    radial-gradient(circle at 36% 30%, #ff9a7a 0%, #e0402e 34%, #a3101f 68%, #4f0510 100%);
  box-shadow: inset -18px -12px 40px rgba(0, 0, 0, .45), 0 0 60px 10px rgba(220, 20, 60, .35), 0 0 180px 50px rgba(220, 20, 60, .16);
  animation: hw-rise 3.2s cubic-bezier(.2, .7, .2, 1) both, hw-moonglow 6s ease-in-out 3.2s infinite alternate;
}
@keyframes hw-rise { from { transform: translateY(40vh) scale(.85); opacity: 0; } }
@keyframes hw-moonglow {
  to { box-shadow: inset -18px -12px 40px rgba(0, 0, 0, .45), 0 0 80px 16px rgba(220, 20, 60, .5), 0 0 240px 70px rgba(220, 20, 60, .22); }
}

.hw-clouds {
  position: absolute; z-index: -3; pointer-events: none; overflow: hidden;
  top: calc(var(--nav-h) + 2vh); right: 0; width: 55vw; height: clamp(160px, 26vw, 360px);
}
.hw-clouds i {
  position: absolute; left: 0; width: 60%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(14, 6, 9, .72) 0%, rgba(14, 6, 9, .45) 45%, transparent 70%);
  animation: hw-cloud 46s linear infinite;
}
.hw-clouds i:nth-child(1) { top: 22%; animation-delay: -10s; }
.hw-clouds i:nth-child(2) { top: 48%; width: 80%; animation-duration: 64s; animation-delay: -40s; }
.hw-clouds i:nth-child(3) { top: 8%; width: 45%; height: 18%; animation-duration: 38s; animation-delay: -25s; }
@keyframes hw-cloud { from { transform: translateX(170%); } to { transform: translateX(-110%); } }

/* ---------- bats ---------- */
.hw-bats { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hw-sky { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.hw-bat {
  position: absolute; top: 0; left: 0; width: 64px;
  opacity: 0;
  animation: hw-fly var(--dur) linear var(--delay) infinite;
}
.hw-bat.hw-once { animation-iteration-count: 1; }
.hw-bat.hw-swarm { animation: hw-swarm var(--dur) cubic-bezier(.35, .1, .7, 1) var(--delay) 1 both; }
.hw-bat-svg { display: block; width: 100%; overflow: visible; fill: #050304; animation: hw-bob 1.3s ease-in-out infinite alternate; }
.hw-wing { transform-box: view-box; animation: hw-flap var(--flap) ease-in-out infinite alternate; }
.hw-wing-l { transform-origin: 30px 14px; }
.hw-wing-r { transform-origin: 34px 14px; }
.hw-red { fill: #ff2a4a; }
@keyframes hw-flap { to { transform: scaleY(-.55); } }
@keyframes hw-bob { to { transform: translateY(8px); } }
@keyframes hw-fly {
  0% { transform: translate(var(--x0), var(--y0)) scale(var(--s)); opacity: 0; }
  6%, 94% { opacity: 1; }
  50% { transform: translate(calc((var(--x0) + var(--x1)) / 2), var(--ym)) scale(var(--s)); }
  100% { transform: translate(var(--x1), var(--y1)) scale(var(--s)); opacity: 0; }
}
@keyframes hw-swarm {
  0% { transform: translate(var(--x0), var(--y0)) scale(var(--s0)); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(var(--s1)); opacity: 1; }
}

/* ---------- eyes in the dark ---------- */
.hw-eyes { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hw-eyes span {
  position: absolute; display: flex; gap: calc(var(--size) * 1.4);
  opacity: 0;
  animation: hw-peek var(--dur) ease-in-out var(--delay) infinite;
}
.hw-eyes span::before, .hw-eyes span::after {
  content: ''; width: var(--size); height: calc(var(--size) * .7);
  border-radius: 50% 50% 45% 45%;
  background: var(--c); box-shadow: 0 0 6px 1px var(--c);
}
.hw-eyes span::before { rotate: 14deg; }
.hw-eyes span::after { rotate: -14deg; }
@keyframes hw-peek {
  0%, 50%, 100% { opacity: 0; transform: scaleY(1); }
  58%, 90% { opacity: 1; }
  70%, 74% { transform: scaleY(1); }
  72% { transform: scaleY(.1); }
}

/* ---------- fog + lightning ---------- */
.hw-fog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
.hw-fog i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: hw-fog 70s linear infinite;
}
.hw-fog-a {
  background-image:
    radial-gradient(ellipse 28% 55% at 18% 75%, rgba(150, 118, 165, .24), transparent 70%),
    radial-gradient(ellipse 22% 45% at 52% 86%, rgba(140, 104, 150, .2), transparent 70%),
    radial-gradient(ellipse 30% 60% at 84% 72%, rgba(156, 118, 160, .22), transparent 70%);
}
.hw-fog-b {
  background-image:
    radial-gradient(ellipse 34% 50% at 30% 90%, rgba(170, 130, 175, .2), transparent 70%),
    radial-gradient(ellipse 26% 40% at 72% 95%, rgba(150, 110, 160, .18), transparent 70%);
  animation-duration: 110s; animation-direction: reverse;
}
@keyframes hw-fog { to { transform: translateX(-50%); } }

.hw-flash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 78% 18%, rgba(255, 226, 236, .55), rgba(200, 160, 205, .14) 45%, transparent 75%);
  animation: hw-flash 15s linear 5s infinite;
}
@keyframes hw-flash {
  0%, 88%, 91%, 100% { opacity: 0; }
  88.5% { opacity: .9; }
  89.1% { opacity: .1; }
  89.7% { opacity: .6; }
}

/* ---------- jack-o'-lanterns ---------- */
.hw-patch {
  position: absolute; z-index: 1; bottom: 6px;
  left: max(16px, calc((100% - var(--wrap)) / 2));
  display: flex; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.hw-patch::before {
  content: ''; position: absolute; left: -50px; right: -50px; bottom: -30px; height: 90px; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 122, 26, .32), transparent 70%);
  animation: hw-candle 3.1s ease-in-out infinite;
}
.hw-pumpkin { width: var(--w); overflow: visible; animation: hw-sit 5s ease-in-out var(--delay) infinite alternate; transform-origin: 50% 100%; }
.hw-pk-body ellipse { fill: #df5d0c; stroke: #5c1d07; stroke-width: 1.6; }
.hw-pk-body ellipse:last-child { fill: #f47216; }
.hw-pk-stem { fill: #3d5419; }
.hw-pk-face {
  fill: var(--candle);
  filter: drop-shadow(0 0 3px #ffb020) drop-shadow(0 0 9px var(--pumpkin));
  animation: hw-candle 2.3s linear var(--delay) infinite;
}
@keyframes hw-candle {
  0%, 100% { opacity: 1; }
  18% { opacity: .72; }
  21% { opacity: .95; }
  46% { opacity: .62; }
  49% { opacity: .9; }
  72% { opacity: .8; }
}
@keyframes hw-sit { to { transform: rotate(-2deg); } }

/* ---------- spider + cobwebs ---------- */
.hw-spider {
  position: absolute; top: var(--nav-h); right: 31vw; z-index: 40;
  width: 56px; height: 300px; overflow: hidden; pointer-events: none;
}
.hw-climb { transition: transform 1.1s cubic-bezier(.5, 0, .3, 1); }
.hw-spider.hw-up .hw-climb { transform: translateY(-280px); }
.hw-drop { position: relative; animation: hw-dangle 10s ease-in-out infinite; }
.hw-drop::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% - 17px); width: 1px; height: 420px;
  background: linear-gradient(rgba(235, 225, 230, .08), rgba(235, 225, 230, .5));
}
.hw-drop svg {
  display: block; width: 56px; pointer-events: auto; cursor: pointer;
  fill: #1a0a0d; stroke: #3a1a20; stroke-width: 1.3; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, .45));
}
.hw-drop .hw-legs { fill: none; stroke: #2e1519; transform-box: view-box; transform-origin: 20px 22px; animation: hw-legs .5s ease-in-out infinite alternate; }
.hw-drop .hw-red { stroke: none; }
@keyframes hw-dangle {
  0%, 100% { transform: translateY(10px) rotate(-3deg); }
  38% { transform: translateY(170px) rotate(2deg); }
  50% { transform: translateY(150px) rotate(-1deg); }
  64% { transform: translateY(176px) rotate(1deg); }
}
@keyframes hw-dangle-sm {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  40% { transform: translateY(52px) rotate(2deg); }
  60% { transform: translateY(40px) rotate(-1deg); }
}
@keyframes hw-legs { to { transform: scaleX(.9); } }

.hw-web {
  position: absolute; top: var(--nav-h); z-index: 40; pointer-events: none;
  width: clamp(80px, 11vw, 160px);
  fill: none; stroke: rgba(235, 225, 230, .2); stroke-width: .6;
  transform-origin: 0 0;
  animation: hw-sway 7s ease-in-out infinite alternate;
}
.hw-web-l { left: 0; }
.hw-web-r { right: 0; scale: -1 1; transform-origin: 50% 0; }
@keyframes hw-sway { to { transform: rotate(1.5deg) scale(1.02); } }

/* ---------- type ---------- */
.hw-badge {
  width: fit-content; margin-bottom: 1rem;
  font: 400 clamp(1.5rem, 3.2vw, 2.4rem)/1 'Creepster', var(--f-head);
  letter-spacing: .06em; color: var(--pumpkin);
  text-shadow: 0 0 12px rgba(255, 122, 26, .55), 0 0 32px rgba(220, 20, 60, .5);
  transform-origin: 50% 0;
  animation: hw-swing 3.6s ease-in-out infinite alternate;
}
@keyframes hw-swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

html.halloween .hero-title .ember-text { position: relative; width: fit-content; animation: hw-flicker 9s linear infinite; }
@keyframes hw-flicker {
  0%, 89%, 90.6%, 92.6%, 100% { opacity: 1; }
  90% { opacity: .3; }
  92% { opacity: .55; }
  96% { opacity: .85; }
}
.hw-drips { position: absolute; left: 0; right: 0; top: 84%; height: 0; pointer-events: none; }
.hw-drips i {
  position: absolute; top: 0; left: var(--x); width: var(--w); height: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#7a0a1c, #dc143c);
  animation: hw-drip var(--dur) ease-in var(--delay) infinite;
}
.hw-drips i::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; translate: -50% 0;
  width: calc(var(--w) + 3px); height: calc(var(--w) + 4px);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #dc143c;
}
@keyframes hw-drip {
  0% { height: 0; opacity: 1; }
  60%, 86% { height: var(--len); opacity: 1; }
  100% { height: var(--len); opacity: 0; }
}

.ticker-track .hw-tick { color: #ffa45a; }
.ticker-track .hw-tick::before { content: '☾ '; color: var(--pumpkin); }

/* pause the hero layer when it's scrolled away */
.hero.hw-idle :is(.hw-bat, .hw-bat *, .hw-fog i, .hw-eyes span, .hw-clouds i, .hw-flash, .hw-moon) { animation-play-state: paused; }

@media (max-width: 900px) {
  .hw-moon { right: 7vw; top: calc(var(--nav-h) + 3vh); }
  .hw-clouds { width: 80vw; }
  .hw-spider { right: 24vw; height: 130px; }
  .hw-drop { animation-name: hw-dangle-sm; }
  .hw-pumpkin { width: calc(var(--w) * .62); }
  .hw-patch { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-sky, .hw-flash, .hw-drips, .hw-clouds { display: none; }
  .hw-eyes span { opacity: 1; }
}