/* Seasonal art stays outside the interactive content. */
.halloween-corner,
.halloween-bats,
.pumpkin-garland,
.halloween-friend { pointer-events:none; user-select:none; }

.halloween-corner { position:absolute; z-index:2; top:0; left:0; width:clamp(6rem,16vw,11rem); height:16rem; overflow:hidden; }
.halloween-web { display:block; width:100%; height:auto; color:#c7bda1; opacity:.76; }
.halloween-spider-drop { position:absolute; top:4.4rem; left:48%; width:1.6rem; height:7rem; animation:spider-visit 9s ease-in-out infinite; }
.halloween-spider-drop::before { content:""; position:absolute; left:50%; bottom:1.25rem; width:1px; height:13rem; background:#c7bda1; opacity:.6; }
.halloween-spider { position:absolute; bottom:0; width:100%; height:1.3rem; }
@keyframes spider-visit { 0%,100% { transform:translateY(-2.5rem); } 45%,60% { transform:translateY(1.2rem); } }

.pumpkin-garland { display:block; width:min(100%,34rem); height:auto; margin:0 auto -.25rem; overflow:visible; }
.garland-wire { fill:none; stroke:#7e8063; stroke-width:1.5; }
.pumpkin-bulb { animation:pumpkin-glimmer 5.5s ease-in-out infinite alternate; filter:drop-shadow(0 0 2px #bf854657); }
.pumpkin-bulb:nth-of-type(2n) { animation-delay:-3s; }
.pumpkin-bulb:nth-of-type(3n) { animation-delay:-1.4s; }
@keyframes pumpkin-glimmer { from { filter:brightness(.92) drop-shadow(0 0 2px #bf85463d); } to { filter:brightness(1.12) drop-shadow(0 0 4px #d99a5875); } }

.halloween-bats { position:absolute; z-index:2; top:5.4rem; left:0; width:100%; height:18rem; overflow:hidden; }
.halloween-bat { position:absolute; width:2.6rem; height:1.55rem; animation:bat-roam-left 17s ease-in-out infinite; }
.halloween-bat svg { display:block; width:100%; height:100%; animation:bat-flutter .75s ease-in-out infinite alternate; }
.halloween-bat:nth-child(1) { left:5%; top:23%; }
.halloween-bat:nth-child(2) { right:5%; top:8%; width:2.2rem; animation-name:bat-roam-right; animation-duration:21s; animation-delay:-7s; }
.halloween-bat:nth-child(3) { right:12%; top:62%; width:1.7rem; animation-name:bat-roam-right; animation-duration:19s; animation-delay:-11s; opacity:.8; }
.halloween-bat:nth-child(2) svg { animation-delay:-.35s; }
.halloween-bat:nth-child(3) svg { animation-delay:-.6s; }
@keyframes bat-flutter { from { transform:scaleY(.68) rotate(-4deg); } to { transform:scaleY(1) rotate(4deg); } }
@keyframes bat-roam-left { 0%,100% { transform:translate(0,0) rotate(-12deg); } 28% { transform:translate(1.4rem,-2rem) rotate(10deg); } 56% { transform:translate(.2rem,2.1rem) rotate(-8deg); } 78% { transform:translate(1.8rem,3.2rem) rotate(7deg); } }
@keyframes bat-roam-right { 0%,100% { transform:translate(0,0) rotate(9deg); } 30% { transform:translate(-1.8rem,2rem) rotate(-9deg); } 62% { transform:translate(-.3rem,3.4rem) rotate(10deg); } 82% { transform:translate(-1.2rem,-1rem) rotate(-5deg); } }

.halloween-order-wrap { position:relative; }
.halloween-friend { position:absolute; z-index:2; display:block; }
.halloween-ghost { left:3%; top:-.4rem; width:clamp(2.4rem,9vw,3.4rem); height:4rem; animation:ghost-float 5s ease-in-out infinite; }
.halloween-cat { right:2.8%; top:-.6rem; width:clamp(2.5rem,9vw,3.6rem); height:4rem; }
.halloween-pumpkin { right:.3%; top:2.3rem; width:1.55rem; height:1.55rem; }
@keyframes ghost-float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-.45rem) rotate(3deg); } }

.halloween-motion-toggle { display:block; margin:.8rem auto 0; padding:.25rem .55rem; border:1px dotted #728080; border-radius:4px; background:#0c1a2099; color:#b8b9cf; font:inherit; font-size:.72rem; cursor:pointer; }
.halloween-motion-toggle:hover { color:#e1e1f3; border-color:#a3a6d4; }
.halloween-motion-toggle:focus-visible { outline:2px solid #a3a6d4; outline-offset:3px; }
[data-decorations-paused="true"] .halloween-motion { animation-play-state:paused; }

@media (max-width:31rem) {
  .pumpkin-garland { width:88%; margin-top:.1rem; margin-bottom:.2rem; }
  .halloween-corner { width:5.8rem; height:11rem; }
  .halloween-spider-drop { top:2rem; left:40%; width:1.2rem; height:5.5rem; }
  .halloween-bats { top:4.7rem; height:16rem; }
  .halloween-bat { width:1.8rem; }
  .halloween-bat:nth-child(1) { left:3%; top:27%; }
  .halloween-bat:nth-child(2) { right:4%; width:1.65rem; }
  .halloween-bat:nth-child(3) { right:3%; width:1.35rem; }
  .halloween-ghost { left:1%; }
  .halloween-cat { right:1%; }
  .halloween-pumpkin { right:0; width:1.2rem; height:1.2rem; }
  @keyframes spider-visit { 0%,100% { transform:translateY(-1.7rem); } 45%,60% { transform:translateY(.5rem); } }
}

@media (max-width:22rem) {
  .halloween-ghost { left:0; width:2.15rem; }
  .halloween-cat { right:0; width:2.2rem; }
  .halloween-pumpkin { top:2.5rem; width:1rem; height:1rem; }
}

@media (prefers-reduced-motion:reduce) {
  .halloween-motion { animation:none !important; }
  .halloween-motion-toggle { display:none; }
}