.hero {
  position: relative;
  background-image: linear-gradient(90deg, rgba(4,5,8,.75), rgba(4,5,8,.36) 48%, rgba(4,5,8,.08)), url('/assets/images/hero/vampire-castle-still.webp');
  background-position: center;
  background-size: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .hero.castle-animated { background-image: linear-gradient(90deg, rgba(4,5,8,.75), rgba(4,5,8,.36) 48%, rgba(4,5,8,.08)), url('/assets/images/hero/vampire-castle-mist-v2.gif'); }
}
.hero-motion-toggle { position: absolute; right: 1.5rem; bottom: 1.5rem; padding: .55rem .85rem; border: 1px solid #9099a8; border-radius: 4px; color: #eef0f4; background: #090e18d9; font-size: .8rem; }
.hero-motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media(max-width: 768px) { .hero { background-position: 65% center; } }