.halloween-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('./halloween-pattern.svg') repeat;
  background-size: 720px 720px;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .22) 30%, rgba(0, 0, 0, .22) 70%, #000);
  opacity: 0;
}

:root[data-halloween='true'] .halloween-pattern { opacity: .36; }

@media (prefers-reduced-motion: no-preference) {
  :root[data-halloween-animated] .halloween-pattern { transition: opacity .3s ease; }
}

.halloween-toggle {
  position: fixed;
  left: 16px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s ease;
}

.halloween-toggle svg { display: block; width: 60px; height: 60px; overflow: visible; }
.halloween-toggle:hover { transform: translateY(-2px); }
.halloween-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.halloween-flame { color: #fff04d; fill: currentColor; filter: drop-shadow(0 0 2px #ffac1c); animation: jack-candle 4.6s ease-in-out infinite; }
:root[data-halloween='true'] .halloween-flame { color: #fff49c; filter: drop-shadow(0 0 3px #ffbb38); }

@keyframes jack-candle {
  0%, 100% { opacity: .9; }
  24% { opacity: 1; }
  40% { opacity: .92; }
  68% { opacity: 1; }
  82% { opacity: .94; }
}

@media (max-width: 600px) {
  .halloween-toggle { left: 10px; width: 48px; height: 48px; }
  .halloween-toggle svg { width: 46px; height: 46px; }
  .halloween-pattern { background-size: 560px 560px; mask-image: none; }
  :root[data-halloween='true'] .halloween-pattern { opacity: .16; }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-flame { animation: none; }
  .halloween-pattern, .halloween-toggle { transition: none; }
}