/* October in the moonlit room. Loaded only through October (see the
   seasonal_theme context processor), so nothing here needs its own date check.

   Bats cross the windows now and then rather than constantly: each one is off
   screen for most of its long cycle. Cobwebs gather in the top corners, the
   right-hand candle warms to pumpkin orange, and jack-o'-lanterns join the
   apothecary shelf. Motion follows the Sparkles control like the rest. */

.oct { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* Cobwebs over the painted window columns. */
.oct-web {
  position: absolute;
  top: 86px;
  width: clamp(90px, 9vw, 150px);
  height: auto;
  fill: none;
  stroke: rgb(var(--c-glass) / .6);
  stroke-width: 1.1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgb(var(--c-white) / .25));
}
.oct-web-left { left: 0; }
.oct-web-right { right: 0; transform: scaleX(-1); }

/* Bats. */
.oct-bat {
  position: absolute;
  left: 0;
  width: clamp(64px, 6vw, 82px);
  height: auto;
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgb(var(--c-neon) / .5));
  animation: oct-fly 26s linear infinite;
}
.oct-bat-body { fill: rgb(var(--c-night)); stroke: rgb(var(--c-neon) / .85); stroke-width: 1.1; }
.oct-wing { transform-box: fill-box; animation: oct-flap .32s ease-in-out infinite alternate; }
.oct-wing-l { transform-origin: 100% 50%; }
.oct-wing-r { transform-origin: 0% 50%; }
.oct-bat-a { top: 16vh; animation-delay: -4s; }
.oct-bat-b { top: 30vh; width: clamp(52px, 4.8vw, 66px); animation-duration: 33s; animation-delay: -17s; }
.oct-bat-c { top: max(110px, 12vh); width: clamp(44px, 4vw, 54px); animation-duration: 41s; animation-delay: -28s; }
.oct-bat-b .oct-wing { animation-duration: .27s; }
.oct-bat-c .oct-wing { animation-duration: .24s; }
@keyframes oct-fly {
  0%   { transform: translate3d(-100px, 0, 0) rotate(-4deg); opacity: 0; }
  1%   { opacity: 1; }
  12%  { transform: translate3d(28vw, -3vh, 0) rotate(3deg); }
  24%  { transform: translate3d(60vw, 2vh, 0) rotate(-3deg); }
  36%  { transform: translate3d(108vw, -4vh, 0) rotate(2deg); opacity: 1; }
  37%, 100% { transform: translate3d(108vw, -4vh, 0); opacity: 0; }
}
@keyframes oct-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }

/* The right-hand candle burns pumpkin orange. */
.season-october .atmo-candle-right { background: radial-gradient(closest-side, rgb(var(--c-pumpkin) / .38), rgb(var(--c-pumpkin) / 0)); }

/* Jack-o'-lanterns on the shelf. */
.oct-pumpkin-welcome {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: min(1240px, 85%);
  height: 90px;
  margin: 0 auto -1.5rem;
  pointer-events: none;
}
.oct-pumpkin-welcome .shelf-pumpkins { width: 176px; height: auto; max-width: 45%; }
.oct-pumpkin-welcome .shelf-pumpkins:last-child { transform: scaleX(-1); }
.shelf-pumpkins { align-self: flex-end; }
.shelf-pumpkin-body { fill: rgb(var(--c-pumpkin)); stroke: rgb(var(--c-pumpkin-deep)); stroke-width: 1.4; }
.shelf-pumpkin-front { fill: rgb(var(--c-pumpkin) / .95); }
.shelf-pumpkin-stem { fill: rgb(var(--c-pumpkin-stem)); }
.shelf-pumpkin-face { fill: rgb(var(--c-candle)); stroke: rgb(var(--c-candle-core)); stroke-width: .6; filter: drop-shadow(0 0 4px rgb(var(--c-candle))); animation: oct-face 3.1s ease-in-out infinite; }
.shelf-pumpkin-small .shelf-pumpkin-face { animation-delay: -1.3s; }
.shelf-pumpkin-glow { fill: rgb(var(--c-pumpkin) / .14); filter: blur(8px); animation: atmo-glow 3.1s ease-in-out infinite; }
@keyframes oct-face { 0%, 100% { opacity: .95; } 30% { opacity: .7; } 55% { opacity: 1; } 78% { opacity: .8; } }

@media (max-width: 1100px) { .oct-web { display: none; } }
@media (max-width: 760px) {
  .oct-pumpkin-welcome { height: 68px; width: 90%; }
  .oct-pumpkin-welcome .shelf-pumpkins { width: 130px; }
  .shelf-pumpkins { max-width: 30%; }
  .apothecary-shelf .shelf-left, .apothecary-shelf .shelf-right { max-width: 34%; }
  .oct-bat-c { display: none; }
}

html[data-sparkles='off'] .oct-bat { display: none; }
html[data-sparkles='off'] :is(.oct, .shelf-pumpkins) * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-sparkles='on']) .oct-bat { display: none; }
  html:not([data-sparkles='on']) :is(.oct, .shelf-pumpkins) * { animation: none !important; }
}
@media print { .oct, .oct-pumpkin-welcome, .shelf-pumpkins { display: none !important; } }