/* ===== Halloween Effect — halloween.css ===== */
:root {
  --hw-orange: #ff7a18;
  --hw-purple: #6a2c91;
  --hw-night: rgba(12, 4, 24, 0.55);
}

.hw-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

/* Dark vignette that breathes like candlelight */
.hw-vignette {
  background: radial-gradient(ellipse at center, transparent 45%, var(--hw-night) 100%);
  animation: hw-flicker 5s infinite;
}
@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: .85; }
  50% { opacity: .65; }
  55% { opacity: .9; }
  80% { opacity: .78; }
}

/* Drifting fog */
.hw-fog {
  background:
    radial-gradient(ellipse 60% 25% at 20% 100%, rgba(200,190,230,.22), transparent 70%),
    radial-gradient(ellipse 70% 22% at 75% 100%, rgba(200,190,230,.18), transparent 70%);
  animation: hw-fog 28s ease-in-out infinite alternate;
}
@keyframes hw-fog {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

/* Lightning flash */
.hw-flash {
  background: #fff;
  opacity: 0;
}
.hw-flash.hw-strike { animation: hw-strike .9s ease-out; }
@keyframes hw-strike {
  0%   { opacity: 0; }
  8%   { opacity: .55; }
  16%  { opacity: .05; }
  26%  { opacity: .4; }
  100% { opacity: 0; }
}

/* Falling items (pumpkins, ghosts, leaves) */
.hw-fall {
  position: absolute;
  top: -10%;
  will-change: transform;
  animation: hw-fall linear forwards;
  filter: drop-shadow(0 0 6px rgba(255,122,24,.5));
}
@keyframes hw-fall {
  to { transform: translate3d(var(--hw-drift, 40px), 115vh, 0) rotate(var(--hw-spin, 360deg)); }
}

/* Bats flying across the screen */
.hw-bat {
  position: absolute;
  left: -60px;
  will-change: transform;
  animation: hw-bat linear forwards;
}
.hw-bat svg { display: block; animation: hw-flap .25s ease-in-out infinite alternate; transform-origin: center; }
@keyframes hw-bat {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(55vw, var(--hw-bob, -60px), 0); }
  100% { transform: translate3d(115vw, 0, 0); }
}
@keyframes hw-flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.55); }
}

/* Cursor trail */
.hw-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 18px;
  animation: hw-trail .9s ease-out forwards;
}
@keyframes hw-trail {
  to { opacity: 0; transform: translateY(-26px) scale(.4); }
}

/* Optional: add class "hw-spooky" to any heading */
.hw-spooky {
  color: var(--hw-orange);
  text-shadow: 0 0 6px rgba(255,122,24,.7), 0 0 18px rgba(255,122,24,.45);
  animation: hw-glow 3.5s infinite;
}
@keyframes hw-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,122,24,.7), 0 0 18px rgba(255,122,24,.45); }
  50%      { text-shadow: 0 0 2px rgba(255,122,24,.4), 0 0 8px rgba(255,122,24,.2); }
  62%      { text-shadow: 0 0 10px rgba(255,122,24,.9), 0 0 28px rgba(255,122,24,.6); }
}

/* On/off button */
.hw-toggle {
  /* Ensure emoji font is available */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Arial", sans-serif;
  /* Center the emoji */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10000;
  width: 48px;
  height: 48px;
  border: 2px solid var(--hw-orange);
  border-radius: 50%;
  background: #1a0b2b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255,122,24,.55);
}
.hw-toggle:hover { transform: scale(1.08); }
.hw-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Effects off */
html:not(.hw-on) .hw-layer,
html:not(.hw-on) .hw-trail { display: none; }

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .hw-fog, .hw-vignette, .hw-spooky { animation: none; }
  .hw-fall, .hw-bat, .hw-flash { display: none; }
}