/* October 2026 event atmospheres (rough drafts) — see event-theme-october.js. */
/* The themed backdrop sits behind the page; body keeps a solid colour underneath it. */
body.event-theme-october { --oct-1: #ff4eb8; --oct-2: #7b4dff; --oct-3: #a7d91d; --oct-ink: #0b0910; background: var(--oct-ink); }
body.event-theme-october > main, body.event-theme-october > header, body.event-theme-october > footer { position: relative; z-index: 1; }
.oct-atmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.oct-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.event-theme-october .event-detail, .event-theme-october main { position: relative; z-index: 1; }

/* The flyer slot: every October page keeps a frame ready for the artwork. */
.event-theme-october .event-poster-placeholder { position: relative; display: grid; place-content: center; gap: 10px; aspect-ratio: 4 / 5; overflow: hidden; border: 2px dashed rgba(255,255,255,.35); border-radius: 14px; background: rgba(11,9,16,.6); color: #f3f0e8; font: 800 clamp(18px, 2.6vw, 28px)/1.1 Manrope, sans-serif; letter-spacing: -.02em; text-align: center; text-transform: uppercase; }
.event-theme-october .event-poster-placeholder::before { content: "Flyer"; display: block; color: var(--oct-1); font: 500 11px 'DM Mono', monospace; letter-spacing: .3em; }
.event-theme-october .event-poster-placeholder::after { content: "dropping soon"; display: block; color: #9d95a8; font: 400 12px/1.6 Manrope, sans-serif; letter-spacing: 0; text-transform: none; }
.event-theme-october .event-poster-placeholder { animation: oct-frame 3.4s ease-in-out infinite; }
@keyframes oct-frame { 50% { border-color: var(--oct-1); box-shadow: 0 0 40px -12px var(--oct-1); } }
.event-theme-october .event-poster-wrap img { border-radius: 14px; }

/* The page itself goes see-through so the scene shows behind it; text keeps a soft scrim. */
body.event-theme-october .event-hero, body.event-theme-october .event-body, body.event-theme-october .event-hero-modern, body.event-theme-october .event-body-modern { background: transparent; }
body.event-theme-october .event-intro, body.event-theme-october .event-description, body.event-theme-october .event-lineup { position: relative; }
body.event-theme-october .event-body { background: linear-gradient(180deg, transparent, rgba(11,9,16,.72) 18%, rgba(11,9,16,.86)); }
body.event-theme-october .archive-header { background: rgba(11,9,16,.82); backdrop-filter: blur(12px); }

/* Shared page accents */
.event-theme-october .event-kicker { color: var(--oct-1); }
.event-theme-october .event-kicker span { background: var(--oct-3); }
.event-theme-october .event-hero h1 { text-shadow: 0 0 60px rgba(0,0,0,.6); }
.event-theme-october .event-quick-facts strong { color: var(--oct-3); }

/* ---------- Disco Tekk: mirrorball over a lit floor ---------- */
.oct-disco { --oct-1: #ffd166; --oct-2: #ff4eb8; --oct-3: #b388ff; }
.oct-disco .oct-atmos { background: radial-gradient(circle at 50% -10%, #3a1d4f 0%, #150d22 45%, #0b0910 100%); }
.oct-disco .oct-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%; background: repeating-linear-gradient(90deg, rgba(255,209,102,.16) 0 2px, transparent 2px 64px), repeating-linear-gradient(0deg, rgba(255,78,184,.16) 0 2px, transparent 2px 64px); transform: perspective(500px) rotateX(74deg); animation: oct-floor-run 6s linear infinite; }
@keyframes oct-floor-run { to { background-position: 0 128px, 0 128px; } }
.oct-disco .oct-beams { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,209,102,.13) 9% 12%, transparent 13% 26%, rgba(255,78,184,.12) 27% 30%, transparent 31% 52%, rgba(179,136,255,.12) 53% 57%, transparent 58% 76%, rgba(255,209,102,.1) 77% 80%, transparent 81%); animation: oct-spin 18s linear infinite; }
@keyframes oct-spin { to { transform: rotate(360deg); } }
.oct-disco .oct-ball { position: absolute; left: 50%; top: 96px; width: 132px; margin-left: -66px; text-align: center; }
.oct-disco .oct-ball-cord { display: block; width: 2px; height: 70px; margin: 0 auto; background: linear-gradient(#f3f0e8, rgba(243,240,232,.2)); }
.oct-disco .oct-ball-body { display: block; width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #d8d2dd 0 6deg, #7b6f86 6deg 12deg), repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 6px, transparent 6px 12px); background-blend-mode: multiply; box-shadow: inset -14px -14px 34px rgba(0,0,0,.65), 0 0 40px rgba(255,209,102,.35); animation: oct-spin 9s linear infinite; }
.oct-disco .oct-ball-glow { position: absolute; left: 50%; top: 60px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,209,102,.22), transparent 62%); animation: oct-pulse 3s ease-in-out infinite; }
@keyframes oct-pulse { 50% { opacity: .55; transform: scale(1.12); } }

/* ---------- Heroes VS Villains: split comic page ---------- */
.oct-heroes { --oct-1: #4dd8ff; --oct-2: #ff3b5c; --oct-3: #ffd166; }
.oct-heroes .oct-atmos { background: #0b0910; }
.oct-heroes .oct-split { position: absolute; inset: 0; }
.oct-heroes .oct-side-hero, .oct-heroes .oct-side-villain { position: absolute; inset: 0; }
.oct-heroes .oct-side-hero { background: linear-gradient(140deg, #0a2a4d 0%, #06172c 60%, transparent 62%); }
.oct-heroes .oct-side-villain { background: linear-gradient(140deg, transparent 38%, #34061a 40%, #1b0410 100%); }
.oct-heroes .oct-split::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, transparent 49.4%, rgba(255,209,102,.85) 49.7%, rgba(255,209,102,.85) 50.3%, transparent 50.6%); box-shadow: 0 0 60px rgba(255,209,102,.3); animation: oct-seam 4s ease-in-out infinite; }
@keyframes oct-seam { 50% { opacity: .55; } }
.oct-heroes .oct-halftone { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.5px); background-size: 14px 14px; animation: oct-halftone 7s linear infinite; }
@keyframes oct-halftone { to { background-position: 28px 28px; } }
.oct-heroes .oct-bolt { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.5), transparent 45%); opacity: 0; animation: oct-flash 9s steps(1) infinite; }
@keyframes oct-flash { 0%, 92% { opacity: 0; } 93%, 94% { opacity: .35; } 95% { opacity: 0; } 96% { opacity: .22; } 97%, 100% { opacity: 0; } }
.oct-heroes .oct-pows b { position: absolute; left: var(--x); top: var(--y); color: var(--oct-3); font: 800 clamp(26px, 5vw, 58px)/1 Manrope, sans-serif; letter-spacing: -.04em; text-shadow: 3px 3px 0 #0b0910, 6px 6px 0 rgba(255,59,92,.65); transform: scale(0) rotate(-12deg); animation: oct-pow 7.5s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: var(--d); }
@keyframes oct-pow { 0%, 4% { transform: scale(0) rotate(-14deg); opacity: 0; } 8% { transform: scale(1.1) rotate(-8deg); opacity: 1; } 16% { transform: scale(1) rotate(-10deg); opacity: 1; } 24%, 100% { transform: scale(.7) rotate(-12deg); opacity: 0; } }

/* ---------- Graveyard: fog, stones and a moon ---------- */
.oct-graveyard { --oct-1: #9fe870; --oct-2: #6f8f5a; --oct-3: #cfd8c5; }
.oct-graveyard .oct-atmos { background: linear-gradient(180deg, #050a08 0%, #0a1410 55%, #070d0a 100%); }
.oct-graveyard .oct-moon { position: absolute; right: 12%; top: 8%; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f4ffe9, #b9cfa6 60%, #7d9470); box-shadow: 0 0 120px 30px rgba(159,232,112,.18); animation: oct-pulse 7s ease-in-out infinite; }
.oct-graveyard .oct-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 30%, rgba(0,0,0,.14) 0 12%, transparent 13%), radial-gradient(circle at 40% 66%, rgba(0,0,0,.12) 0 9%, transparent 10%); }
.oct-graveyard .oct-stones { position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; }
.oct-graveyard .oct-stones span { position: absolute; bottom: 0; left: var(--x); width: calc(90px * var(--s)); height: calc(130px * var(--s)); border-radius: 46px 46px 6px 6px; background: linear-gradient(180deg, #2b3630, #131b17); box-shadow: inset 0 6px 14px rgba(255,255,255,.06); }
.oct-graveyard .oct-stones span.is-cross::before, .oct-graveyard .oct-stones span.is-cross::after { content: ""; position: absolute; background: #2b3630; }
.oct-graveyard .oct-stones span.is-cross::before { left: 50%; top: -34px; width: 16px; height: 46px; margin-left: -8px; }
.oct-graveyard .oct-stones span.is-cross::after { left: 50%; top: -18px; width: 52px; height: 14px; margin-left: -26px; }
.oct-graveyard .oct-fog { position: absolute; left: -25%; right: -25%; height: 40vh; background: radial-gradient(60% 60% at 30% 60%, rgba(159,232,112,.1), transparent 70%), radial-gradient(50% 50% at 70% 40%, rgba(207,216,197,.12), transparent 70%); filter: blur(12px); }
.oct-graveyard .oct-fog-back { bottom: 18vh; animation: oct-drift 26s ease-in-out infinite alternate; }
.oct-graveyard .oct-fog-front { bottom: -8vh; opacity: .8; animation: oct-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes oct-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.oct-graveyard .oct-hand { position: absolute; left: 12%; bottom: 3vh; width: 42px; height: 90px; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #7d9470, #2b3630); box-shadow: -18px 12px 0 -6px #46543c, 18px 10px 0 -6px #46543c; transform-origin: bottom; animation: oct-rise 9s ease-in-out infinite; }
@keyframes oct-rise { 0%, 55% { transform: translateY(100%) rotate(-6deg); } 70% { transform: translateY(6%) rotate(4deg); } 85% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(100%) rotate(-6deg); } }
.oct-graveyard .oct-bat { position: absolute; top: 22%; left: -10%; width: 34px; height: 14px; background: radial-gradient(circle at 50% 120%, #0b0910 0 40%, transparent 41%), linear-gradient(#0b0910, #0b0910) center / 12px 12px no-repeat; clip-path: polygon(0 40%, 18% 0, 34% 46%, 50% 14%, 66% 46%, 82% 0, 100% 40%, 74% 100%, 26% 100%); animation: oct-bat 14s linear infinite; }
@keyframes oct-bat { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(60vw, -12vh) scale(1.1); } 90% { opacity: .8; } 100% { transform: translate(120vw, 6vh) scale(.7); opacity: 0; } }

/* ---------- Rave-or-Treat: neon candy ---------- */
.oct-treat { --oct-1: #ff7a1a; --oct-2: #ff4eb8; --oct-3: #a7d91d; }
.oct-treat .oct-atmos { background: radial-gradient(circle at 20% 10%, #3b1046 0%, #1a0722 45%, #0b0910 100%); }
.oct-treat .oct-treat-glow { position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 100%, rgba(255,122,26,.3), transparent 70%); animation: oct-pulse 4.5s ease-in-out infinite; }
.oct-treat .oct-pumpkins { position: absolute; left: 0; right: 0; bottom: 2vh; height: 140px; }
.oct-treat .oct-pumpkins span { position: absolute; bottom: 0; left: var(--x); width: 96px; height: 78px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #ff9a3c, #d1490a 70%); box-shadow: 0 0 45px rgba(255,122,26,.5); animation: oct-bob 3.4s ease-in-out infinite; animation-delay: var(--d); }
.oct-treat .oct-pumpkins span::before { content: ""; position: absolute; left: 50%; top: -14px; width: 12px; height: 18px; margin-left: -6px; border-radius: 4px; background: #4b7a1f; }
.oct-treat .oct-pumpkins span::after { content: ""; position: absolute; left: 18%; right: 18%; top: 34%; height: 30%; background: radial-gradient(circle at 22% 20%, #fff3b0 0 18%, transparent 19%), radial-gradient(circle at 78% 20%, #fff3b0 0 18%, transparent 19%), linear-gradient(#fff3b0, #fff3b0) center bottom / 60% 26% no-repeat; clip-path: polygon(0 20%, 22% 0, 40% 26%, 60% 0, 78% 22%, 100% 18%, 88% 100%, 12% 100%); filter: drop-shadow(0 0 10px #ffd166); animation: oct-flicker 2.2s steps(3) infinite; }
@keyframes oct-bob { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes oct-flicker { 40% { opacity: .55; } 70% { opacity: 1; } 85% { opacity: .7; } }
.oct-treat .oct-neon { position: absolute; left: 50%; top: clamp(118px, 15vh, 220px); transform: translateX(-50%); color: transparent; font: 800 clamp(34px, 7vw, 96px)/1 Manrope, sans-serif; letter-spacing: .04em; white-space: nowrap; -webkit-text-stroke: 2px rgba(255,122,26,.75); text-shadow: 0 0 22px rgba(255,122,26,.55), 0 0 60px rgba(255,78,184,.35); animation: oct-neon 5s steps(1) infinite; }
.oct-treat .oct-neon b { margin: 0 .2em; -webkit-text-stroke-color: rgba(167,217,29,.8); }
@keyframes oct-neon { 0%, 88% { opacity: 1; } 89% { opacity: .25; } 90% { opacity: 1; } 93% { opacity: .4; } 94%, 100% { opacity: 1; } }

/* ---------- House of Maddness: haunted house in a storm ---------- */
.oct-haunted { --oct-1: #ffb547; --oct-2: #9fb6d6; --oct-3: #ff3b5c; }
.oct-haunted .oct-atmos { background: linear-gradient(180deg, #060810 0%, #0b1020 55%, #05070d 100%); }
.oct-haunted .oct-storm { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(159,182,214,.16), transparent 70%); }
.oct-haunted .oct-lightning { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(220,235,255,.65), transparent 60%); opacity: 0; animation: oct-storm 11s steps(1) infinite; }
@keyframes oct-storm { 0%, 80% { opacity: 0; } 81% { opacity: .5; } 82% { opacity: 0; } 84% { opacity: .35; } 85%, 100% { opacity: 0; } }
.oct-haunted .oct-house { position: absolute; left: 50%; bottom: 0; width: min(760px, 92vw); height: min(420px, 48vh); margin-left: calc(min(760px, 92vw) / -2); }
.oct-haunted .oct-walls { position: absolute; left: 8%; right: 8%; bottom: 0; top: 34%; background: linear-gradient(180deg, #0d1018, #05070c); box-shadow: inset 0 0 60px rgba(0,0,0,.8); }
.oct-haunted .oct-roof { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: #0d1018; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.oct-haunted .oct-window { position: absolute; left: var(--x); top: var(--y); width: 52px; height: 68px; border-radius: 6px 6px 0 0; background: #ffb547; box-shadow: 0 0 34px rgba(255,181,71,.6); animation: oct-window 6s steps(2) infinite; animation-delay: var(--d); }
.oct-haunted .oct-window.is-wide { width: 74px; height: 56px; }
.oct-haunted .oct-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 46%, #05070c 46% 54%, transparent 54%), linear-gradient(180deg, transparent 46%, #05070c 46% 54%, transparent 54%); }
@keyframes oct-window { 0%, 40% { opacity: .9; } 45% { opacity: .15; } 50% { opacity: .85; } 70% { opacity: .35; } 100% { opacity: .9; } }
.oct-haunted .oct-door { position: absolute; left: 50%; bottom: 0; width: 86px; height: 120px; margin-left: -43px; border-radius: 43px 43px 0 0; background: radial-gradient(circle at 50% 100%, rgba(255,59,92,.75), rgba(255,181,71,.35) 60%, #05070c 75%); box-shadow: 0 0 50px rgba(255,59,92,.4); animation: oct-pulse 3.6s ease-in-out infinite; }

@media (max-width: 760px) {
  .oct-disco .oct-ball-body { width: 78px; height: 78px; }
  .oct-graveyard .oct-moon { width: 110px; height: 110px; right: 8%; }
  .oct-treat .oct-pumpkins span { width: 64px; height: 54px; }
  .oct-haunted .oct-window { width: 34px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .oct-atmos *, .event-theme-october .event-poster-placeholder { animation: none !important; }
}