/* Halloween - tokens and decor. Accent: pumpkin orange (dark text on it, AA). */

.proto-l[data-season='halloween'],
.proto-l[data-season='halloween'] .la {
  --l-accent: #f28c28;
  --l-accent-deep: #c4620f;
  --l-accent-hi: #ffb36b;
  --l-accent-lite: #ffb36b;
  --l-accent-soft: rgba(242, 140, 40, 0.15);
  --l-accent-glow: rgba(242, 140, 40, 0.38);
  --la-glow: rgba(242, 140, 40, 0.14);
  --ls-on-accent: #1d0d02;
  --ls-accent-hover: #ff9d45;
  --hw-far: #1e1231;
  --hw-hills: #140b20;
  --hw-front: #0c0713;
  --ls-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6C11.6 4 12.4 2.6 14 2' stroke='%237d8a45' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='8' cy='14' rx='6' ry='7.5' fill='%23e2701c'/%3E%3Cellipse cx='16' cy='14' rx='6' ry='7.5' fill='%23e2701c'/%3E%3Cellipse cx='12' cy='14' rx='5' ry='8' fill='%23f28c28'/%3E%3Cpath d='M8 12L10.4 10.6L10.2 13.2ZM16 12L13.6 10.6L13.8 13.2ZM7.6 16Q12 19.6 16.4 16L15.2 17.8L13.6 16.9L12 18.4L10.4 16.9L8.8 17.8Z' fill='%23ffd36b'/%3E%3C/svg%3E");
}
html[data-theme='light'] .proto-l .ls-scene-band .ls-hw-clouds { display: none; }
html[data-theme='light'] .proto-l[data-season='halloween'] .la {
  --l-accent-hi: #a8520c;
  --l-accent-soft: rgba(242, 140, 40, 0.14);
  --hw-far: #e6dcef;
  --hw-hills: #d5c6e4;
  --hw-front: #2a1b38;
}

.proto-l .ls-hw-far { fill: var(--hw-far); }
.proto-l .ls-hw-hills { fill: var(--hw-hills); }
.proto-l .ls-hw-front { fill: var(--hw-front); color: var(--hw-front); }
.proto-l .ls-hw-tree { color: var(--hw-front); transform-origin: 50% 97.6%; animation: ls-hw-sway 7s ease-in-out infinite alternate; }
@keyframes ls-hw-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }

/* Clouds sliding across the moon. */
.proto-l .ls-hw-clouds { animation: ls-hw-clouds 60s ease-in-out infinite alternate; }
@keyframes ls-hw-clouds { from { transform: translate3d(-14%, 0, 0); } to { transform: translate3d(20%, -6%, 0); } }
.proto-l .ls-hw-rim { fill: none; stroke: rgba(205, 175, 255, 0.16); stroke-width: 1.2; }

.proto-l .ls-hw-fog {
  background: radial-gradient(50% 50% at 50% 50%, rgba(150, 110, 190, 0.2), rgba(150, 110, 190, 0.08) 55%, transparent 75%);
  animation: ls-hw-fog 28s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -9s);
}
@keyframes ls-hw-fog { from { transform: translate3d(-8%, 0, 0); opacity: 0.7; } to { transform: translate3d(9%, -4%, 0); opacity: 1; } }

/* Bats: a slow loop around their spot, wings flapping. */
.proto-l .ls-hw-bat { fill: #08050d; animation: ls-hw-fly 9s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
.proto-l .ls-hw-bat path { transform-box: fill-box; transform-origin: 50% 40%; animation: ls-hw-flap 260ms ease-in-out infinite alternate; }
@keyframes ls-hw-fly {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(28%, -40%, 0); }
  50% { transform: translate3d(60%, 10%, 0); }
  75% { transform: translate3d(20%, 50%, 0); }
}
@keyframes ls-hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }

/* Ghost: a faint shape drifting along the hills (never over the copy), seen through the fog;
   10 s out, 7 s gone. */
.proto-l .ls-hw-ghost { opacity: 0.5; animation: ls-hw-cross 17s ease-in-out -3s infinite; filter: blur(0.4px) drop-shadow(0 0 8px rgba(210, 200, 255, 0.35)); }
.proto-l .ls-hw-ghost svg { animation: ls-hw-bob 2.4s ease-in-out infinite alternate; }
@keyframes ls-hw-cross {
  0% { transform: translate3d(0, 1cqh, 0); opacity: 0; }
  10% { opacity: 0.5; }
  50% { opacity: 0.5; }
  60% { transform: translate3d(var(--gx), -2cqh, 0); opacity: 0; }
  100% { transform: translate3d(var(--gx), -2cqh, 0); opacity: 0; }
}
@keyframes ls-hw-bob { from { transform: translateY(-5%) rotate(-3deg); } to { transform: translateY(5%) rotate(3deg); } }

/* Jack-o'-lantern: the candle flickers; its light pools on the ground. */
.proto-l .ls-hw-grass { fill: var(--hw-front); }
/* Its light pools on the ground and the graves around it. */
.proto-l .ls-hw-pumpkin::before {
  content: '';
  position: absolute;
  inset: 40% -110% -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 50, 0.3), rgba(255, 120, 40, 0.08) 60%, transparent);
  animation: ls-hw-flicker 3.1s steps(1, end) infinite;
}
.proto-l .ls-hw-face { filter: drop-shadow(0 0 2.5px #ffb347); animation: ls-hw-flicker 3.1s steps(1, end) infinite; }
@keyframes ls-hw-flicker {
  0% { opacity: 1; } 8% { opacity: 0.78; } 11% { opacity: 1; } 34% { opacity: 0.9; } 37% { opacity: 0.68; }
  40% { opacity: 1; } 63% { opacity: 0.86; } 71% { opacity: 1; } 88% { opacity: 0.74; } 91% { opacity: 1; }
}

/* Logo: witch hat drops on the e, a faint orange glow behind the letters. */
.proto-l .ls-hw-hat { animation: ls-hw-hat 700ms var(--l-ease-out) 300ms backwards; }
@keyframes ls-hw-hat { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* App top bar: a cobweb in the right corner with a small spider. */
.proto-l[data-season='halloween'] .la-top[data-scrolled]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 86px;
  height: 86px;
  pointer-events: none;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cg fill='none' stroke='%23b9a8d6' stroke-width='0.7'%3E%3Cpath d='M86 0L10 0M86 0L20 46M86 0L50 72M86 0L86 80'/%3E%3Cpath d='M70 0Q72 10 82 12Q84 14 86 14'/%3E%3Cpath d='M54 0Q58 18 76 24Q82 26 86 30'/%3E%3Cpath d='M38 0Q44 26 70 36Q80 40 86 46'/%3E%3Cpath d='M24 0Q30 34 62 48Q78 56 86 62'/%3E%3C/g%3E%3Cpath d='M63 52V70' stroke='%23b9a8d6' stroke-width='0.6'/%3E%3Ccircle cx='63' cy='73' r='3.4' fill='%23e8e0f6'/%3E%3Cpath d='M58 70L60 72M58 74L60 74M58 77L60 75M68 70L66 72M68 74L66 74M68 77L66 75' stroke='%23e8e0f6' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center / contain;
}