/* ============================================================
   Site theme — Halloween
   Loaded after style.css on every page while the theme is applied
   (or previewed by staff). Colours go through the variables of
   style.css; the animated scenery (moon, bats, fog, spider…) is
   built by js/themes/halloween.js in two fixed, click-through layers.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --bg: #0c0812;
    --bg-2: #110b18;
    --panel: #1a1022;
    --panel-2: #22152c;
    --border: #36213f;
    --border-soft: #27182f;
    --text: #f7efe6;
    --muted: #bba9b8;
    --faint: #7f6b80;
    --brand: #ff7518;
    --brand-2: #8b3dff;
    --brand-hi: #ffa24d;
    --accent: #8b3dff;
    --gold: #ffb22e;
    --gold-hi: #ffd88a;
    --brand-rgb: 255,117,24;
    --brand-2-rgb: 139,61,255;
    --gold-rgb: 255,178,46;
    --bg-rgb: 14,9,20;
    --slime: #9cff4a;
    --slime-rgb: 156,255,74;
    --grad: linear-gradient(135deg, #ff7518 0%, #ff4f1f 45%, #8b3dff 100%);
    --shadow: 0 12px 44px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--brand-2-rgb),.05);
    --hw-font: "Creepster", "Segoe UI", system-ui, cursive;
}

::selection { background: rgba(var(--brand-rgb),.45); color: #fff; }
html { scrollbar-color: #4a2a55 var(--bg); }

body {
    background:
        radial-gradient(38% 30% at 88% 4%, rgba(255,214,150,.10), transparent 70%),        /* moonlight */
        radial-gradient(70% 50% at 10% 110%, rgba(var(--brand-2-rgb),.16), transparent 70%), /* violet mist */
        radial-gradient(60% 45% at 95% 100%, rgba(var(--brand-rgb),.10), transparent 70%),   /* lantern glow */
        var(--bg);
    background-attachment: fixed;
}

a:hover { color: var(--brand-hi); }

/* ---------- Nav: slime-dripping edge, bobbing pumpkin ---------- */
.nav {
    background: rgba(14,9,20,.84);
    border-image: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), var(--brand), transparent) 1;
    border-image-slice: 1;
    animation: hw-nav-glow 6s ease-in-out infinite;
}
.nav::after {                 /* drips hanging under the bar */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14' viewBox='0 0 220 14'%3E%3Cpath fill='%239cff4a' fill-opacity='.55' d='M0 0h220v2c-6 0-7 3-9 3s-3-3-8-3-5 9-8 9-3-9-9-9-7 2-12 2-4-2-11-2-5 6-8 6-2-6-10-6-9 3-14 3-6-3-12-3-5 11-8 11-3-11-9-11-8 2-13 2-5-2-12-2-5 5-8 5-3-5-9-5-7 2-12 2-6-2-13-2-4 7-7 7-3-7-9-7-6 1-10 1-6-1-9-1z'/%3E%3C/svg%3E") repeat-x;
    background-size: 220px 14px;
    filter: drop-shadow(0 2px 4px rgba(var(--slime-rgb),.35));
}
.nav .brand::after {
    content: "🎃"; display: inline-block; margin-left: 6px; font-size: .95em;
    animation: hw-bob 2.8s ease-in-out infinite; transform-origin: 50% 90%;
}
.nav .brand .crown { filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),.8)); }
.nav-center a::after { background: var(--grad) !important; }

/* ---------- Typography ---------- */
.hero h1 .grad, .admin-head h1, .page-head h1 {
    font-family: var(--hw-font); font-weight: 400; letter-spacing: .02em;
}
.hero h1 .grad {
    background: linear-gradient(180deg, #ffd27a 0%, #ff7518 45%, #c2410c 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px rgba(var(--brand-rgb),.45));
    animation: hw-flicker 5s infinite;
}
.admin-head h1, .page-head h1 { color: var(--brand-hi); text-shadow: 0 0 22px rgba(var(--brand-rgb),.35); }
.kicker {
    color: var(--slime); background: rgba(var(--slime-rgb),.08); border-color: rgba(var(--slime-rgb),.3);
    text-shadow: 0 0 8px rgba(var(--slime-rgb),.5);
}

/* ---------- Hero: a giant carved lantern glowing behind the title ---------- */
.hero::before {
    background:
        radial-gradient(45% 65% at 50% 0%, rgba(var(--brand-rgb),.22), transparent 65%),
        radial-gradient(60% 80% at 50% 0%, rgba(var(--brand-2-rgb),.20), transparent 60%);
    animation: hw-breathe 7s ease-in-out infinite;
}
.hero::after {
    content: "🎃"; position: absolute; z-index: -1; left: 50%; top: 18px; transform: translateX(-50%);
    font-size: 210px; line-height: 1; opacity: .07; filter: blur(1px) saturate(1.4);
    animation: hw-lantern 4s ease-in-out infinite; pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
    background: var(--grad); background-size: 180% 180%;
    box-shadow: 0 8px 26px -8px rgba(var(--brand-rgb),.75), inset 0 1px 0 rgba(255,255,255,.18);
    animation: hw-grad 8s ease infinite;
}
.btn:hover { box-shadow: 0 12px 34px -6px rgba(var(--brand-rgb),.9), 0 0 0 1px rgba(var(--slime-rgb),.35); }
.btn.ghost { background: transparent; animation: none; }
.btn.ghost:hover { border-color: var(--slime); background: rgba(var(--slime-rgb),.06); }

/* ---------- Surfaces: candle-lit edges ---------- */
.card, .panel, .feature, .th-card {
    border-color: var(--border);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card:hover, .panel:hover, .feature:hover {
    border-color: rgba(var(--brand-rgb),.55);
    box-shadow: 0 0 0 1px rgba(var(--brand-rgb),.15), 0 14px 40px -18px rgba(var(--brand-rgb),.55);
}
.feature .ico { filter: drop-shadow(0 0 10px rgba(var(--brand-rgb),.45)); }
.card.highlight { box-shadow: 0 0 40px -16px rgba(var(--slime-rgb),.55); }
.card.highlight .card-value { color: var(--slime); text-shadow: 0 0 14px rgba(var(--slime-rgb),.5); }

/* ---------- Admin / member sidebars ---------- */
.admin-side, .member-side { background: linear-gradient(180deg, rgba(var(--brand-2-rgb),.08), transparent 45%), var(--bg-2); }
.admin-nav a.on, .member-nav a.on {
    color: #fff;
    background: linear-gradient(90deg, rgba(var(--brand-rgb),.24), rgba(var(--brand-2-rgb),.08));
    border-color: rgba(var(--brand-rgb),.45);
    box-shadow: inset 3px 0 0 var(--brand), 0 0 18px -8px rgba(var(--brand-rgb),.7);
}

/* ---------- Footer: a graveyard on the horizon ---------- */
.site-footer {
    position: relative; margin-top: auto; padding-top: 46px;
    background: linear-gradient(180deg, transparent, rgba(var(--brand-2-rgb),.07));
}
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 48px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='48' viewBox='0 0 480 48'%3E%3Cg fill='%23130b1a'%3E%3Cpath d='M0 48V40c40-6 80-8 120-4s90 6 140 0 120-8 220 0v12z'/%3E%3Cpath d='M38 40V24a10 10 0 0 1 20 0v16z'/%3E%3Cpath d='M104 40V30h4v-8h4v8h4v10z' /%3E%3Cpath d='M176 40V18a13 13 0 0 1 26 0v22z'/%3E%3Cpath d='M268 40V27a8 8 0 0 1 16 0v13z'/%3E%3Cpath d='M330 40V26h5v-9h4v9h5v14z'/%3E%3Cpath d='M404 40V21a11 11 0 0 1 22 0v19z'/%3E%3C/g%3E%3Cg stroke='%23130b1a' stroke-width='2'%3E%3Cpath d='M220 40V28M228 40V28M236 40V28M244 40V28M216 31h32'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom;
    background-size: 480px 48px; opacity: .95;
}
.site-footer .brand-logo { filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),.6)); }

/* ---------- Forms ---------- */
input:focus, select:focus, textarea:focus { outline-color: var(--brand); border-color: var(--brand) !important; }

/* ---------- Scenery layers (js/themes/halloween.js) ---------- */
.hw-back, .hw-front { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.hw-back { z-index: -1; }
.hw-front { z-index: 45; }                /* above content, under the sticky nav (50) */

.hw-moon {
    position: absolute; top: 70px; right: 7vw; width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6dc, #f3d89a 55%, #c9a65e 100%);
    box-shadow: 0 0 60px 20px rgba(255,220,150,.18), 0 0 160px 60px rgba(255,200,120,.08);
    opacity: .55; animation: hw-moon 9s ease-in-out infinite;
}
.hw-moon::before, .hw-moon::after {      /* craters */
    content: ""; position: absolute; border-radius: 50%; background: rgba(160,120,60,.25);
}
.hw-moon::before { width: 22px; height: 22px; left: 56%; top: 24%; }
.hw-moon::after { width: 14px; height: 14px; left: 28%; top: 60%; }
.hw-cloud {
    position: absolute; top: 120px; right: -40vw; width: 320px; height: 60px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(60,40,80,.55), transparent);
    filter: blur(6px); animation: hw-cloud 70s linear infinite;
}
.hw-cloud.c2 { top: 60px; width: 220px; animation-duration: 95s; animation-delay: -40s; opacity: .7; }

.hw-fog {
    position: absolute; left: -50%; bottom: -30px; width: 200%; height: 220px;
    background:
        radial-gradient(35% 60% at 20% 70%, rgba(170,140,200,.10), transparent 70%),
        radial-gradient(30% 50% at 55% 80%, rgba(170,140,200,.09), transparent 70%),
        radial-gradient(35% 55% at 85% 75%, rgba(170,140,200,.10), transparent 70%);
    animation: hw-fog 40s linear infinite alternate;
}
.hw-fog.f2 { bottom: -60px; height: 260px; opacity: .8; animation-duration: 60s; animation-direction: alternate-reverse; }

.hw-ember {
    position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand-hi); box-shadow: 0 0 8px 2px rgba(var(--brand-rgb),.7);
    animation: hw-rise linear infinite;
}
.hw-ember.g { background: var(--slime); box-shadow: 0 0 8px 2px rgba(var(--slime-rgb),.6); }

.hw-bat { position: absolute; left: 0; top: 0; width: 46px; height: 24px; color: #07040a; offset-rotate: 0deg; }
.hw-bat svg { width: 100%; height: 100%; animation: hw-flap .22s ease-in-out infinite alternate; transform-origin: 50% 40%;
    filter: drop-shadow(0 0 4px rgba(var(--brand-rgb),.35)); }

.hw-web { position: absolute; top: 56px; width: 150px; height: 150px; opacity: .32; color: #d9cfe6; }
.hw-web.l { left: 0; }
.hw-web.r { right: 0; transform: scaleX(-1); }

.hw-spider { position: absolute; top: 56px; right: 64px; width: 2px; animation: hw-spider 11s ease-in-out infinite; }
.hw-spider::before {                     /* the thread */
    content: ""; position: absolute; left: 0; bottom: 100%; width: 1px; height: 400px; background: rgba(230,220,240,.35);
}
.hw-spider svg { position: absolute; left: -11px; top: 0; width: 24px; height: 24px; color: #0a060e;
    filter: drop-shadow(0 0 3px rgba(var(--brand-rgb),.6)); animation: hw-wiggle 1.6s ease-in-out infinite; }

.hw-ghost {
    position: absolute; left: -90px; top: 40%; font-size: 46px; opacity: 0;
    filter: drop-shadow(0 0 12px rgba(220,220,255,.5)); animation: hw-ghost 16s ease-in-out forwards;
}

.hw-flash { position: absolute; inset: 0; background: rgba(200,180,255,.0); animation: hw-flash 1.1s ease-out forwards; }

/* ---------- Keyframes ---------- */
@keyframes hw-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
@keyframes hw-flicker {
    0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; }
}
@keyframes hw-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes hw-lantern { 0%, 100% { opacity: .06; } 45% { opacity: .09; } 50% { opacity: .05; } 55% { opacity: .1; } }
@keyframes hw-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hw-nav-glow { 0%, 100% { box-shadow: 0 1px 18px -6px rgba(var(--brand-rgb),.35); } 50% { box-shadow: 0 1px 24px -6px rgba(var(--brand-2-rgb),.45); } }
@keyframes hw-moon { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: .62; } }
@keyframes hw-cloud { from { transform: translateX(0); } to { transform: translateX(-180vw); } }
@keyframes hw-fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes hw-rise {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: .9; }
    100% { transform: translate(var(--dx, 30px), -75vh) scale(.3); opacity: 0; }
}
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes hw-spider { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(150px); } }
@keyframes hw-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes hw-ghost {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: .55; }
    50% { transform: translate(55vw, -60px); opacity: .45; }
    90% { opacity: .5; }
    100% { transform: translate(calc(100vw + 180px), 20px); opacity: 0; }
}
@keyframes hw-flash { 0% { background: rgba(200,180,255,0); } 8% { background: rgba(200,180,255,.10); } 14% { background: rgba(200,180,255,.02); } 20% { background: rgba(200,180,255,.08); } 100% { background: rgba(200,180,255,0); } }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .hw-moon { width: 70px; height: 70px; top: 64px; right: 18px; }
    .hw-web { width: 90px; height: 90px; top: 52px; }
    .hw-spider { right: 34px; top: 52px; }
    .hero::after { font-size: 140px; }
    .nav::after { height: 10px; background-size: 160px 10px; }
}

/* ---------- Motion off: keep the colours, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
    .hw-front, .hw-cloud, .hw-fog, .hw-ember { display: none; }
    .nav, .nav .brand::after, .hero h1 .grad, .hero::before, .hero::after, .btn, .hw-moon { animation: none; }
}