/* Halloween edition: The 408 decorated for Halloween. Loaded after styles.css. The scene is illustration; the interface keeps the tokens. */
:root:root { /* doubled to beat styles.css's day block: Halloween is always night */
  --bg: #0b1527; --bg-2: #0e1a30; --s1: #162238; --s2: #1c2941; --line: rgba(194, 208, 239, 0.14);
  --ink: #f6f3fc; --ink-2: #b8c3d9; --ink-3: #8e9db9;
  --brand: #d6bbff; --brand-soft: rgba(214, 187, 255, 0.16); --light: #ffd080; --light-soft: rgba(255, 208, 128, 0.16);
  color-scheme: dark;
}

header.night {
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 22%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 26%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 6%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 40%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 36%, #fff6 50%, transparent 51%),
    linear-gradient(180deg, #120a26 0%, #1d1240 48%, var(--bg) 100%);
}
.night .hero { padding-block: 2.5rem 1.5rem; }
@media (min-width: 40rem) { .night .hero { grid-template-columns: 1fr; padding-block: 4rem 2rem; } }

/* the scene: house logo centred on a wider lawn, props in % of the box. The mark itself is never tinted or glowed. */
.stage { max-width: 58rem; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.scene { position: relative; width: 100%; margin: 0; aspect-ratio: 1240 / 880; }
.scene > * { position: absolute; }
.house { left: 9.7%; top: 0; width: 80.6%; height: auto; z-index: 2; }
.uplight { bottom: 2%; width: 34%; height: 70%; z-index: 1; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(123, 92, 214, 0.55), transparent 70%); }
.uplight.l { left: 6%; } .uplight.r { right: 6%; }
.ground { left: 0; right: 0; bottom: 0; height: 5%; z-index: 3; background: linear-gradient(180deg, #0e1a12, #070d0a); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.moon {
  right: 1.5%; top: 2%; width: 13%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 40%, #e8dcae 0 9%, transparent 10%), radial-gradient(circle at 62% 64%, #e8dcae 0 7%, transparent 8%),
              radial-gradient(circle at 42% 42%, #fff8de, #f3e6b4 70%);
  box-shadow: 0 0 2rem 0.6rem rgba(255, 240, 190, 0.28);
}
.bat { width: 8%; z-index: 4; fill: #0a0612; animation: flap 0.35s ease-in-out infinite alternate, drift 9s ease-in-out infinite alternate; }
.bat.b1 { right: 18%; top: 4%; }
.bat.b2 { right: 4%; top: 24%; width: 6%; animation-delay: 0.1s, -3s; }
.bat.b3 { left: 6%; top: 12%; width: 6.5%; animation-delay: 0.2s, -6s; }
@keyframes flap { to { transform: scaleY(0.62); } }
@keyframes drift { from { translate: 0 0; } to { translate: -1.2rem 0.8rem; } }

.spider { left: 37.9%; top: 49%; width: 4.2%; z-index: 4; animation: dangle 3.2s ease-in-out infinite alternate; }
@keyframes dangle { from { translate: 0 0; } to { translate: 0 1.1rem; } }

.pumpkin { z-index: 4; filter: drop-shadow(0 0 0.6rem rgba(242, 140, 40, 0.45)); }
.pumpkin .carve { fill: #ffd27a; animation: flicker 2.4s steps(1) infinite; }
.pumpkin.p1 { left: 35.5%; bottom: 3%; width: 5.2%; }
.pumpkin.p2 { left: 59.5%; bottom: 3%; width: 6.4%; }
.pumpkin.p3 { left: 88.5%; bottom: 3.5%; width: 9%; }
.pumpkin.p4 { left: 85%; bottom: 2.5%; width: 5%; }
@keyframes flicker { 0%, 100% { opacity: 1 } 12% { opacity: 0.7 } 14% { opacity: 1 } 61% { opacity: 0.82 } 63% { opacity: 1 } }

.fog { left: -10%; right: -10%; bottom: 0; height: 22%; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 35% 60% at 25% 80%, rgba(220, 210, 255, 0.16), transparent 70%),
              radial-gradient(ellipse 40% 55% at 75% 85%, rgba(220, 210, 255, 0.13), transparent 70%);
  animation: fog 14s ease-in-out infinite alternate; }
@keyframes fog { to { translate: 6% 0; } }

/* Fred on the lawn by the steps: a button, so a tap changes the costume. Presses scale to 0.97; nothing bounces. */
.fred-btn { left: 0; bottom: 1.5%; width: 21%; min-width: 44px; min-height: 44px; z-index: 6; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; transition: transform 120ms var(--ease); }
.fred-btn:active { transform: scale(0.97); }
.fred-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.fred-btn svg { display: block; width: 100%; height: auto; }
.fred-btn .jack { filter: drop-shadow(0 0 0.8rem rgba(242, 140, 40, 0.4)); }
.fred-btn .vampire { display: none; filter: drop-shadow(0 0 0.8rem rgba(255, 90, 90, 0.3)); }
.scene[data-costume="vampire"] .fred-btn .vampire { display: block; animation: appear 240ms var(--ease); }
.scene[data-costume="vampire"] .fred-btn .jack { display: none; }
.scene[data-costume="jack"] .fred-btn .jack { animation: appear 240ms var(--ease); }
@keyframes appear { from { opacity: 0; } }

.caption { text-align: center; margin: 0.75rem 0 2.5rem; font-size: var(--t-call); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .bat, .spider, .fog, .pumpkin .carve, .fred-btn svg { animation: none !important; }
  .fred-btn { transition: none; }
}