/* ─────────────────────────────────────────────────────────────────────────────
   Zinkly · Halloween 🎃  — "a bit spooky", never in the way.
   Everything here is decoration: pointer-events none, low opacity, and no motion
   for people who asked their device for reduced motion. Switch back to the
   Default theme in AdminCP > Themes to remove it all.
   ───────────────────────────────────────────────────────────────────────────── */

/* Brand gradient: pumpkin → blood orange → witch purple (members who picked their
   own colours in Appearance keep them). */
html:not([data-has-custom-bg="1"]) .bg-zinkly-gradient {
    background-image: linear-gradient(135deg, #ff7a18 0%, #d9480f 45%, #7c3aed 100%) !important;
}
html:not([data-has-custom-bg="1"]) .zinkly-btn-primary {
    box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.35), 0 8px 34px -8px rgba(255, 122, 24, 0.55) !important;
}
html:not([data-has-custom-bg="1"]) .zinkly-btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.5), 0 10px 40px -6px rgba(124, 58, 237, 0.6) !important;
}

/* Cards get a faint ember edge. */
html:not(.light) .zinkly-card {
    border-color: rgba(255, 122, 24, 0.14) !important;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06), 0 12px 40px -24px rgba(255, 122, 24, 0.25);
}

/* 🎃 next to the Zinkly wordmark. */
.zinkly-wordmark::after {
    content: " 🎃";
    font-size: 0.85em;
    display: inline-block;
    transform-origin: 50% 80%;
    animation: zk-hw-bob 3.2s ease-in-out infinite;
}
@keyframes zk-hw-bob {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-2px); }
}

/* Background: harvest-moon glow top-right, purple fog bottom-left (behind everything). */
html:not(.light) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 92% 6%, rgba(255, 214, 140, 0.20) 0, rgba(255, 150, 40, 0.10) 7%, transparent 18%),
        radial-gradient(ellipse at 8% 108%, rgba(124, 58, 237, 0.20), transparent 45%),
        radial-gradient(ellipse at 60% 120%, rgba(255, 122, 24, 0.08), transparent 50%);
}

/* Cobweb in the top-left corner. */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 70;
    pointer-events: none;
    opacity: 0.16;
    background: no-repeat top left / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%23e5e7eb' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 0 L150 0 M0 0 L0 150 M0 0 L140 60 M0 0 L100 100 M0 0 L60 140'/%3E%3Cpath d='M30 0 Q28 12 26 11 Q21 21 21 21 Q12 27 11 26 Q0 30 0 30'/%3E%3Cpath d='M62 0 Q58 26 55 24 Q44 44 44 44 Q26 56 24 55 Q0 62 0 62'/%3E%3Cpath d='M98 0 Q92 40 88 38 Q70 70 70 70 Q40 88 38 88 Q0 98 0 98'/%3E%3Cpath d='M135 0 Q126 56 121 53 Q96 96 96 96 Q56 121 53 121 Q0 135 0 135'/%3E%3Cpath d='M60 26 L60 34' /%3E%3Ccircle cx='60' cy='37' r='3' fill='%23e5e7eb'/%3E%3C/svg%3E");
}
html.light body::after { opacity: 0.22; filter: invert(0.8); }

/* A bat flits across the screen every so often. */
html::after {
    content: "";
    position: fixed;
    top: 18vh;
    left: -60px;
    width: 46px;
    height: 24px;
    z-index: 70;
    pointer-events: none;
    opacity: 0;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23140a1f' stroke='%23ff7a18' stroke-opacity='.35' stroke-width='.8' d='M32 10c1.5-3 3-4 3-4l1 4c2-1 4-1 5 0 3-5 11-7 23-3-6 2-9 6-9 10-3-2-7-2-9 1-2-2-5-2-7 1-2-1-4-1-7 2-3-3-5-3-7-2-2-3-5-3-7-1-2-3-6-3-9-1 0-4-3-8-9-10 12-4 20-2 23 3 1-1 3-1 5 0l1-4s1.5 1 3 4z'/%3E%3Ccircle cx='30' cy='11' r='.9' fill='%23ffb347'/%3E%3Ccircle cx='34' cy='11' r='.9' fill='%23ffb347'/%3E%3C/svg%3E");
    animation: zk-hw-bat 38s linear 6s infinite;
}
@keyframes zk-hw-bat {
    0%   { transform: translate(0, 0) scale(0.9); opacity: 0; }
    2%   { opacity: 0.85; }
    6%   { transform: translate(28vw, -6vh) scale(1) rotate(-6deg); }
    10%  { transform: translate(55vw, 4vh) scale(0.85) rotate(5deg); }
    14%  { transform: translate(80vw, -3vh) scale(0.95) rotate(-4deg); opacity: 0.85; }
    18%  { transform: translate(110vw, -8vh) scale(0.8); opacity: 0; }
    100% { transform: translate(110vw, -8vh); opacity: 0; }
}

/* Links & focus rings pick up the pumpkin glow in dark mode. */
html:not(.light) .text-zinkly-cyan { color: #ffa94d !important; }

/* Respect "reduce motion": keep the look, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    html::after { display: none; }
    .zinkly-wordmark::after { animation: none; }
}

/* Small screens: smaller cobweb so it never covers the header buttons. */
@media (max-width: 640px) {
    body::after { width: 96px; height: 96px; }
}