/* Spooky Mode — Halloween decorations. Only linked in October (see
   tracker/seasonal.py); static/js/spooky.js builds most of what this styles.
   Everything decorative carries .spooky-fx so one rule can hide it all. */

.spooky-off .spooky-fx { display: none !important; }

@media print {
    .spooky-fx, .spooky-toggle { display: none !important; }
}

/* ---------- Banner (server-rendered under the top nav) ---------- */
.spooky-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
    padding: 7px 16px;
    background: #2a1d38;
    color: #f4ecdc;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.spooky-banner strong { color: #f07f1a; font-weight: 800; }
.spooky-banner svg { width: 28px; height: 14px; flex: none; }

/* ---------- Footer switch (not .spooky-fx: it has to stay to turn back on) ---------- */
footer .spooky-toggle {
    display: inline;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #007bff;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
footer .spooky-toggle:hover { background: none; color: #0056b3; }

/* ---------- Cobwebs and spider ---------- */
.spooky-web {
    position: absolute;
    top: 0;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 5;
}
.spooky-web.left { left: 0; }
.spooky-web.right { right: 0; transform: scaleX(-1); }
.spooky-spider {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.spooky-spider .thread { width: 1px; height: 18px; background: #5f5670; opacity: .7; }
.spooky-spider svg { width: 24px; height: 24px; margin-top: -3px; }
.spooky-spider .legs { transform-box: view-box; transform-origin: 15px 16px; animation: spooky-wiggle .5s ease-in-out infinite alternate; }
@keyframes spooky-wiggle { from { transform: scaleX(1); } to { transform: scaleX(.86); } }

/* ---------- Pumpkins (in the footer) ---------- */
.spooky-pumpkins {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 6px;
}
footer .spooky-pumpkin {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    line-height: 0;
    cursor: pointer;
}
footer .spooky-pumpkin:hover { background: none; }
footer .spooky-pumpkin:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
.spooky-pumpkin svg { width: 100%; height: auto; overflow: visible; }
.spooky-pumpkin .face {
    fill: #ffd35a;
    stroke: #a6450f;
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px #ffb300);
    animation: spooky-flicker 2.4s steps(1, end) infinite;
}
@keyframes spooky-flicker {
    0% { opacity: 1; } 18% { opacity: .8; } 22% { opacity: .96; } 41% { opacity: .86; }
    58% { opacity: 1; } 63% { opacity: .74; } 67% { opacity: .95; } 84% { opacity: .9; }
}
.spooky-pumpkin.bop { animation: spooky-bop .5s ease-out; }
@keyframes spooky-bop {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-10px) scale(1.06, .96); }
    70% { transform: translateY(0) scale(.97, 1.03); }
    100% { transform: none; }
}
.spooky-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 4px 10px;
    border-radius: 10px;
    background: #1c1326;
    color: #f4ecdc;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.spooky-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #1c1326;
}
.spooky-bubble.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Things that fly and walk ---------- */
.spooky-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 40;
}
.spooky-bat { position: absolute; left: 0; top: 0; width: 64px; height: 32px; transform-origin: 0 0; will-change: transform; }
.spooky-bat svg { width: 100%; height: 100%; overflow: visible; }
.spooky-bat .wings { transform-box: view-box; transform-origin: 32px 14px; animation: spooky-flap var(--flap, .22s) ease-in-out infinite alternate; }
@keyframes spooky-flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }

.spooky-ghost { position: absolute; left: 0; top: 0; width: 54px; height: 66px; opacity: 0; will-change: transform, opacity; }
.spooky-ghost svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(60, 40, 90, .25)); }

.spooky-zombie { position: absolute; left: 0; bottom: 0; width: 78px; height: 122px; will-change: transform; }
.spooky-zombie .rig { display: block; width: 100%; height: 100%; overflow: visible; }
.spooky-zombie.left .rig { transform: scaleX(-1); }
.spooky-zombie .spooky-bubble {
    bottom: calc(100% - 4px);
    background: #fff;
    color: #1d1a22;
    font-weight: 400;
    border: 1px solid #e3e1e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.spooky-zombie .spooky-bubble::after { border-top-color: #fff; }
.spooky-zombie .z-bob { animation: spooky-zbob .65s ease-in-out infinite alternate; }
@keyframes spooky-zbob { from { transform: translateY(0); } to { transform: translateY(2.5px); } }
.spooky-zombie .z-part { transform-box: view-box; }
.spooky-zombie .leg-back { transform-origin: 30.5px 68px; animation: spooky-zstep 1.3s ease-in-out infinite; }
.spooky-zombie .leg-front { transform-origin: 37.5px 68px; animation: spooky-zstep 1.3s ease-in-out infinite -.65s; }
@keyframes spooky-zstep { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
.spooky-zombie .arm-back { transform-origin: 32px 44px; animation: spooky-zarm 1.3s ease-in-out infinite -.4s; }
.spooky-zombie .arm-front { transform-origin: 36px 45px; animation: spooky-zarm 1.3s ease-in-out infinite; }
@keyframes spooky-zarm { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
.spooky-zombie .z-head { transform-origin: 35px 34px; animation: spooky-ztilt 2.6s ease-in-out infinite; }
@keyframes spooky-ztilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }

.spooky-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* Reduced motion: decorations stay, nothing moves. spooky.js also never
   starts the bats, zombies, ghost, spider or candy corn. */
@media (prefers-reduced-motion: reduce) {
    .spooky-pumpkin .face,
    .spooky-spider .legs,
    .spooky-pumpkin.bop { animation: none; }
}

@media (max-width: 640px) {
    .spooky-web { width: 88px; height: 88px; }
    .spooky-spider { right: 2px; }
    .spooky-zombie { width: 56px; height: 88px; }
}

/* The login page centres everything in a flex column, so pin its banner to
   the top instead of letting it float in the middle with the form. base.html
   pages start with the nav, so this never matches them. */
body > .spooky-banner:first-child { position: absolute; top: 0; left: 0; right: 0; }