/*
 * Halloween theme — "Spooky Night"
 * ------------------------------------------------------------------
 * A quiet, ambient Halloween treatment, built like Summer / Autumn: every rule
 * is namespaced under `.halloween-fx`, the fixed overlay HalloweenTheme.tsx
 * mounts on the public marketing pages (not the app). This keeps the whole
 * effect scoped even though `data-theme="halloween"` is on <body> site-wide.
 *
 * What's here: a glowing moon + drifting cloud, twinkling stars, flapping bats
 * gliding across, rising ghosts, an occasional abseiling spider, low purple fog
 * and corner cobwebs. No PNG assets — inline SVG + CSS. (Replaces the old
 * falling-PNG / clickable-sprite Halloween theme.)
 */

.halloween-fx {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;

    /* Palette — moonlit purple night with pumpkin-orange warmth */
    --hw-night: #1a1030;
    --hw-purple: #3a2b5e;
    --hw-orange: #ef7215;
    --hw-pumpkin: #ff7518;
    --hw-moon: #fdf6c9;
    --hw-ghost: #e2dcf5;

    /* Where the moon's centre sits, measured from the top-right corner. The
       stars are placed around this point rather than scattered over the whole
       page, so they read as the moon's own glow instead of confetti. Kept in
       sync with .halloween-moon-core below, including its mobile size. */
    --hw-moon-cx: 84px;
    --hw-moon-cy: 184px;
}

/* ── Halloween atmosphere: a big soft colour wash in the top-right corner
   (warm near the moon, fading through purple) to set a spooky mood on the
   otherwise-white page. Static — no motion. ───────────────────────────── */
.halloween-atmosphere {
    position: absolute;
    top: -220px;
    right: -220px;
    width: 900px;
    height: 720px;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 74% 40%, rgba(255, 150, 60, 0.22) 0%, rgba(255, 150, 60, 0) 68%),
        radial-gradient(closest-side at 66% 46%, rgba(126, 79, 178, 0.20) 0%, rgba(126, 79, 178, 0) 78%);
    filter: blur(4px);
}

/* ── Crescent moon (top-right), sitting below the site header/banner ─────── */
/* Soft, gradual glow halo (a bit bigger than the disc, fading out slowly) */
.halloween-moon {
    position: absolute;
    top: 20px;
    right: -110px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 196, 112, 0.5) 0%,
        rgba(255, 176, 96, 0.3) 32%,
        rgba(255, 168, 92, 0.14) 54%,
        rgba(255, 168, 92, 0) 76%
    );
    filter: blur(8px);
}

/* the crescent disc itself (SVG), static — no pulsing */
.halloween-moon-core {
    position: absolute;
    top: 118px;
    right: 18px;
    width: 132px;
    height: 132px;
    filter: drop-shadow(0 0 24px rgba(255, 184, 92, 0.6));
}
.halloween-moon-core svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
    .halloween-moon { width: 300px; height: 300px; top: 40px; right: -100px; }
    .halloween-moon-core { width: 108px; height: 108px; top: 104px; right: 12px; }
    .halloween-atmosphere { width: 620px; height: 520px; }
    .halloween-fx { --hw-moon-cx: 66px; --hw-moon-cy: 158px; }
}

/* ── Cobwebs in the two top corners ──────────────────────────────── */
.halloween-web {
    position: absolute;
    top: 0;
    width: 118px;
    height: 118px;
    opacity: 0.5;
}
.halloween-web svg { width: 100%; height: 100%; display: block; }
.halloween-web--left  { left: 0; }
.halloween-web--right { right: 0; transform: scaleX(-1); }

@media (max-width: 640px) {
    .halloween-web { width: 84px; height: 84px; }
}

/* ── Twinkling stars, scattered around the moon ──────────────────── */
/* --dx / --dy are px offsets from the moon's centre, handed over by the
   component. Anchoring to the corner keeps the cluster on the moon whatever
   the window width, which a percentage never would. */
.halloween-star {
    position: absolute;
    top: calc(var(--hw-moon-cy) + var(--dy, 0px));
    right: calc(var(--hw-moon-cx) + var(--dx, 0px));
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background: #fffdf0;
    box-shadow: 0 0 6px rgba(255, 253, 240, 0.9);
    opacity: 0.2;
    animation: hw-twinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ── Flapping bats gliding across (signature motion) ─────────────── */
.halloween-bat {
    position: absolute;
    top: var(--top, 20%);
    left: 0;
    width: var(--size, 40px);
    height: calc(var(--size, 40px) * 0.58);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-bat-cross var(--dur, 20s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.halloween-bat--rtl { animation-name: hw-bat-cross-rtl; }

/* the wave layer bobs the bat up and down as it crosses */
.halloween-bat__wave {
    width: 100%;
    height: 100%;
    animation: hw-bat-wave calc(var(--dur, 20s) / 7) ease-in-out infinite;
}
/* the flap layer squashes the wings vertically = wing beat */
.halloween-bat__flap {
    width: 100%;
    height: 100%;
    transform-origin: 50% 45%;
    animation: hw-bat-flap var(--flap, 0.4s) ease-in-out infinite;
}
.halloween-bat svg { width: 100%; height: 100%; display: block; }
/* bats flying right→left face the other way */
.halloween-bat--rtl svg { transform: scaleX(-1); }

/* ── Rising, fading ghosts ───────────────────────────────────────── */
/* Ghosts drift the full height of the page on purpose. It is the little bubbles
   rising out of the fog that are pinned to hand level, further down. */
.halloween-ghost {
    position: absolute;
    bottom: -14vh;
    left: var(--left, 50%);
    width: var(--size, 44px);
    height: calc(var(--size, 44px) * 1.4);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-ghost-rise var(--dur, 20s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
/* gentle squash-stretch bob so the ghost feels weightless */
.halloween-ghost__inner {
    width: 100%;
    height: 100%;
    animation: hw-ghost-bob 3.4s ease-in-out infinite;
}
.halloween-ghost svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 10px rgba(226, 220, 245, 0.5));
}

/* ── Occasional spider abseiling on a silk thread ────────────────── */
.halloween-spider {
    position: absolute;
    top: 0;
    left: var(--left, 50%);
    width: var(--size, 40px);
    will-change: transform;
    animation: hw-spider-drop var(--dur, 26s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
/* The thread and the spider swing TOGETHER, as one pendulum hinged at the top
   of the thread. Swaying the spider on its own left it drifting sideways off a
   thread that stayed put: a 4deg tilt on a 100vh arm moves the spider more than
   60px, so it read as floating beside the web rather than hanging from it. */
.halloween-spider__swing {
    position: relative;
    width: 100%;
    transform-origin: 50% -100vh;
    animation: hw-spider-sway 4.5s ease-in-out infinite;
}
/* the silk thread runs from the top of the page down INTO the spider's head,
   so there is no gap between the end of the thread and the body */
.halloween-spider__thread {
    position: absolute;
    top: calc(-100vh + 26%);
    left: 50%;
    width: 1px;
    height: 100vh;
    background: rgba(226, 220, 245, 0.4);
}
.halloween-spider__body {
    width: 100%;
}
.halloween-spider__body svg { width: 100%; height: auto; display: block; }

/* ── Low purple fog (thicker + more intense) ─────────────────────── */
.halloween-fog {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 140px;
    pointer-events: none;
}
.halloween-fog__band {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    filter: blur(26px);
    will-change: transform;
}
.halloween-fog__band--a {
    background: radial-gradient(62% 95% at 28% 100%, rgba(120, 78, 185, 0.75) 0%, rgba(120, 78, 185, 0) 72%),
                radial-gradient(58% 88% at 74% 100%, rgba(92, 56, 150, 0.7) 0%, rgba(92, 56, 150, 0) 72%);
    opacity: 0.92;
    animation: hw-fog-a 28s ease-in-out infinite;
}
.halloween-fog__band--b {
    background: radial-gradient(60% 92% at 52% 100%, rgba(158, 110, 214, 0.62) 0%, rgba(158, 110, 214, 0) 74%),
                radial-gradient(46% 80% at 90% 100%, rgba(108, 66, 168, 0.55) 0%, rgba(108, 66, 168, 0) 74%);
    opacity: 0.8;
    animation: hw-fog-b 36s ease-in-out infinite;
}
/* a denser base line so the fog reads solid where it meets the page edge */
.halloween-fog::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(102, 62, 158, 0.5) 0%, rgba(102, 62, 158, 0) 100%);
    filter: blur(10px);
}

/* ── Bubbles rising out of the fog ───────────────────────────────── */
.halloween-bubble {
    position: absolute;
    left: var(--left, 50%);
    bottom: 8px;
    width: var(--size, 14px);
    height: var(--size, 14px);
    border-radius: 50%;
    background: var(--bcolor, rgba(150, 110, 200, 0.32));
    box-shadow: inset -1px -1px 3px rgba(60, 30, 90, 0.22),
                inset 2px 2px 4px rgba(255, 255, 255, 0.28);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-bubble-rise var(--dur, 8s) ease-in infinite;
    animation-delay: var(--delay, 0s);
}

/* ── Skeleton hand clawing up out of the fog (bottom-left) ────────── */
.halloween-skeleton-hand {
    position: absolute;
    left: 4%;
    bottom: -6px;
    width: 128px;
    z-index: 2;
    transform-origin: 50% 100%;
    animation: hw-hand-rise 7s ease-in-out infinite;
    filter: drop-shadow(0 -2px 6px rgba(60, 30, 90, 0.4));
}
.halloween-skeleton-hand svg { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
    .halloween-skeleton-hand { width: 92px; left: 2%; }
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes hw-bubble-rise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    14%  { opacity: 0.7; }
    80%  { opacity: 0.6; }
    100% { transform: translate(var(--drift, 0px), calc(var(--rise, 90px) * -1)) scale(1); opacity: 0; }
}

/* hand slowly emerges and sinks back, with a faint claw-clench sway */
@keyframes hw-hand-rise {
    0%, 100% { transform: translateY(14px) rotate(-3deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

@keyframes hw-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    50%      { opacity: 0.95; transform: scale(1.15); }
}

/* bat crosses the full width; opacity fades in/out at the edges */
@keyframes hw-bat-cross {
    0%   { transform: translateX(-14vw); opacity: 0; }
    6%   { opacity: var(--op, 0.8); }
    94%  { opacity: var(--op, 0.8); }
    100% { transform: translateX(114vw); opacity: 0; }
}
@keyframes hw-bat-cross-rtl {
    0%   { transform: translateX(114vw); opacity: 0; }
    6%   { opacity: var(--op, 0.8); }
    94%  { opacity: var(--op, 0.8); }
    100% { transform: translateX(-14vw); opacity: 0; }
}

@keyframes hw-bat-wave {
    0%, 100% { transform: translateY(calc(var(--amp, 6) * -0.5vh)); }
    50%      { transform: translateY(calc(var(--amp, 6) * 0.5vh)); }
}

@keyframes hw-bat-flap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.62); }
}

@keyframes hw-ghost-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: var(--op, 0.35); }
    30%  { transform: translate(calc(var(--drift, 3) * 1vw), -30vh); }
    55%  { transform: translate(calc(var(--drift, 3) * -1vw), -58vh); }
    80%  { transform: translate(calc(var(--drift, 3) * 1vw), -86vh); opacity: var(--op, 0.35); }
    100% { transform: translate(0, -112vh); opacity: 0; }
}

@keyframes hw-ghost-bob {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50%      { transform: scaleY(1.05) scaleX(0.97); }
}

/* spider spends most of the long cycle parked above the viewport, drops in
   briefly, dangles, then retracts → it reads as an occasional visitor */
@keyframes hw-spider-drop {
    0%   { transform: translateY(-60vh); }
    10%  { transform: translateY(var(--drop, 30vh)); }
    24%  { transform: translateY(calc(var(--drop, 30vh) - 3vh)); }
    38%  { transform: translateY(var(--drop, 30vh)); }
    52%  { transform: translateY(-60vh); }
    100% { transform: translateY(-60vh); }
}

@keyframes hw-spider-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50%      { transform: rotate(1.1deg); }
}

@keyframes hw-fog-a {
    0%, 100% { transform: translateX(-6%); }
    50%      { transform: translateX(6%); }
}
@keyframes hw-fog-b {
    0%, 100% { transform: translateX(7%); }
    50%      { transform: translateX(-7%); }
}

/* ── Page accents (rendered inline by pages, gated on the active theme) ──
   These sit INSIDE page content (hero cat), not the .halloween-fx overlay. */

/* Witch hat on the cat's head. Percentages map to the cat illustration box.
   Rendered at full opacity (no opacity entrance animation — that could stick
   faint if the tab loads throttled in the background). */
.halloween-cat-hat {
    position: absolute;
    top: 20%;
    left: 21%;
    width: 30%;
    z-index: 21;
    pointer-events: none;
    transform: rotate(10deg);
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22));
}

/* Carved jack-o'-lantern on the ground next to the cat, with a flickering glow. */
.halloween-cat-pumpkin {
    position: absolute;
    top: 62%;
    left: -3%;
    width: 30%;
    z-index: 14;
    pointer-events: none;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.55));
    animation: hw-jack-flicker 2.6s ease-in-out infinite;
}
/* candle flicker: nudge the warm glow strength up and down */
@keyframes hw-jack-flicker {
    0%, 100% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 12px rgba(255, 170, 60, 0.45)); }
    45%      { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 20px rgba(255, 190, 80, 0.75)); }
    70%      { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.5)); }
}

/* Small bat tucked onto a card's top-right corner (kept for reuse) */
.halloween-card-bat {
    position: absolute;
    top: -13px;
    right: -8px;
    width: 46px;
    height: 29px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
    animation: hw-card-bat-flap 0.5s ease-in-out infinite;
}
@keyframes hw-card-bat-flap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.72); }
}

@media (max-width: 640px) {
    .halloween-card-bat { width: 38px; height: 24px; }
}

/* ── Visitor toggle: turn the effects off (low-end machines) ─────── */
.halloween-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: rgba(26, 16, 48, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226, 220, 245, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #f0e9ff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.halloween-toggle:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.halloween-toggle__icon {
    font-size: 14px;
    line-height: 1;
}

@media (max-width: 640px) {
    .halloween-toggle { left: 10px; bottom: 10px; padding: 7px; }
    .halloween-toggle__label { display: none; }
}

/* ── Respect reduced-motion: keep the look, drop the movement ───── */
@media (prefers-reduced-motion: reduce) {
    .halloween-fx *,
    .halloween-moon,
    .halloween-moon-core,
    .halloween-cat-hat,
    .halloween-cat-pumpkin,
    .halloween-skeleton-hand,
    .halloween-card-bat {
        animation: none !important;
    }

    /* keep a few bats visible, just static and parked mid-screen; hide spiders
       and the rising bubbles */
    .halloween-bat { opacity: var(--op, 0.5); left: auto; right: 30vw; }
    .halloween-spider { display: none; }
    .halloween-bubble { display: none; }
    .halloween-ghost { opacity: var(--op, 0.3); bottom: auto; top: 40vh; }
}