/* ---- Halloween --------------------------------------------------------------
   Art for bin/php/seasonal/halloween/*.php, built on the shared pieces in
   seasonal.css (corner webs, dangling spiders, flying bats, candles). Silk,
   wax, stone, ghost, eyes and glows take their colours from the --vh-*
   client-theme tokens, so they follow any theme change; only the pumpkins,
   stems and moss carry colours of their own (the --hw-* tokens below). */

.vh-season--halloween {
    --hw-pumpkin-light: #f6a548;
    --hw-pumpkin: #e07a22;
    --hw-pumpkin-dark: #a84a10;
    --hw-pumpkin-deep: #74300a;
    --hw-rib: rgba(84, 30, 4, 0.55);
    --hw-stem: #5a4a26;
    --hw-vine: #5f7a33;
    --hw-ink: #0e0b0a;                  /* spider and bat bodies */
    --hw-silk: var(--vh-muted);
    --hw-eye: var(--vh-option);
    --hw-mark: var(--vh-bad);
    --hw-glow-mid: #ffd65c;
    --hw-hollow: #2c1004;
    --hw-dusk: rgba(40, 10, 0, 0.5);
    --hw-ghost: #f4f0e6;
    --glow-core: #fffbe2;
    --glow: var(--vh-option);
    --wax: var(--vh-text);
    --thread: var(--hw-silk);
    --corner: clamp(120px, 10vw, 230px); /* corner webs grow with wide and stretched screens */
}

/* ---- Symbol paint (sprite.php) ---- */

.vh-hw-stop-pumpkin-light { stop-color: var(--hw-pumpkin-light); }
.vh-hw-stop-pumpkin { stop-color: var(--hw-pumpkin); }
.vh-hw-stop-pumpkin-dark { stop-color: var(--hw-pumpkin-dark); }
.vh-hw-stop-pumpkin-deep { stop-color: var(--hw-pumpkin-deep); }
.vh-hw-stop-glow-core { stop-color: var(--glow-core); }
.vh-hw-stop-glow-mid { stop-color: var(--hw-glow-mid); }
.vh-hw-stop-glow { stop-color: var(--glow); }
.vh-hw-stop-dusk-clear { stop-color: var(--hw-dusk); stop-opacity: 0; }
.vh-hw-stop-dusk { stop-color: var(--hw-dusk); }
.vh-hw-stop-stone-light { stop-color: var(--vh-button-hover); }
.vh-hw-stop-stone { stop-color: var(--vh-button); }
.vh-hw-stop-stone-dark { stop-color: var(--vh-track); }
.vh-hw-stop-ghost-top { stop-color: var(--hw-ghost); }
.vh-hw-stop-ghost-bottom { stop-color: var(--hw-ghost); stop-opacity: 0.45; }

.vh-hw-web-silk {
    fill: none;
    stroke: var(--hw-silk);
    stroke-width: 0.8;
    stroke-linecap: round;
}

.vh-hw-silk {
    stroke: var(--hw-silk);
    stroke-width: 0.8;
}

.vh-hw-spider-legs path {
    fill: none;
    stroke: var(--hw-ink);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vh-hw-spider-body,
.vh-hw-bat-body {
    fill: var(--hw-ink);
    stroke: var(--vh-border);
    stroke-width: 0.5;
}

.vh-hw-spider-mark { fill: var(--hw-mark); }
.vh-hw-eye { fill: var(--hw-eye); }

.vh-hw-sheen {
    fill: #ffffff;
    opacity: 0.16;
}

.vh-hw-lobe {
    stroke: var(--hw-rib);
    stroke-width: 0.8;
}

.vh-hw-stem { fill: var(--hw-stem); }
.vh-hw-leaf { fill: var(--hw-vine); }

.vh-hw-vine,
.vh-hw-grass {
    fill: none;
    stroke: var(--hw-vine);
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* The hollow is the carved hole; its stroke is the cut rim around the glow. */
.vh-hw-face-hollow {
    fill: var(--hw-hollow);
    stroke: var(--hw-hollow);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.vh-hw-face {
    fill: url(#vh-hw-grad-glow);
    animation: vh-hw-face 2.8s ease-in-out var(--hw-delay, 0s) infinite;
}

.vh-hw-ghost-eye { fill: var(--vh-track); }

.vh-hw-stone {
    stroke: #000000;
    stroke-opacity: 0.55;
    stroke-width: 0.8;
}

.vh-hw-stone-crack,
.vh-hw-stone-line {
    fill: none;
    stroke: var(--vh-track);
    stroke-width: 1;
    stroke-linecap: round;
}

.vh-hw-stone-text {
    font: bold 10px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    letter-spacing: 0.5px;
    fill: var(--vh-track);
}

.vh-hw-stone-text--light {
    fill: var(--vh-muted);
    opacity: 0.35;
}

.vh-hw-mound { fill: var(--vh-track); }

/* ---- Backdrop: cobwebs, spiders, bats (top.php) ---- */

.vh-hw-web { opacity: 0.5; }

.vh-hw-spider {
    width: var(--size, 30px);
    height: var(--size, 30px);
    transform-origin: 50% 0;
    animation: vh-hw-wiggle 2.2s ease-in-out infinite alternate;
}

/* The two big spiders hang from the webs, so their anchors scale with them. */
.vh-hw-dangle--1 { left: calc(var(--corner) * 0.45); --rest: 16px; --drop: 150px; --cycle: 15s; --delay: -3s; }
.vh-hw-dangle--2 { right: calc(var(--corner) * 0.6); --rest: 34px; --drop: 190px; --cycle: 19s; --delay: -11s; --sway: 6.5s; }
.vh-hw-dangle--3 { left: 23%; --size: 22px; --rest: 4px; --drop: 64px; --cycle: 11s; --delay: -6s; --sway: 4s; }

.vh-hw-bat svg {
    width: var(--size);
    height: calc(var(--size) * 0.47);
    transform-origin: 50% 55%;
    animation: vh-hw-flap 0.24s ease-in-out infinite alternate;
}

.vh-hw-bat--1 { --y: 96px; --size: 40px; --cycle: 24s; --delay: -2s; }
.vh-hw-bat--2 { --y: 176px; --size: 30px; --cycle: 31s; --delay: -14s; animation-direction: reverse; }
.vh-hw-bat--3 { --y: 58px; --size: 26px; --cycle: 27s; --delay: -21s; }
.vh-hw-bat--3 svg { animation-duration: 0.2s; }

/* ---- Ledge pieces: lanterns, pumpkins, tombstone, ghost (candles are shared) ---- */

.vh-hw-lantern {
    position: relative;
    display: block;
    isolation: isolate;
}

.vh-hw-lantern svg {
    width: 60px;
    height: 51px;
}

.vh-hw-lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 55%;
    z-index: -1;
    width: 170%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 48%, transparent), transparent);
    animation: vh-season-glow 2.8s ease-in-out var(--hw-delay, 0s) infinite;
}

.vh-hw-lantern--small svg {
    width: 44px;
    height: 37px;
}

.vh-season-ledge__end--right .vh-hw-lantern { --hw-delay: -1.3s; }

.vh-hw-pumpkin {
    width: 40px;
    height: 34px;
}

.vh-hw-pumpkin--small {
    width: 30px;
    height: 25px;
}

.vh-hw-tombstone {
    width: 40px;
    height: 51px;
}

.vh-hw-ghost {
    display: block;
    margin: 0 8px 20px 0;
    animation: vh-season-float 4.5s ease-in-out infinite;
}

.vh-hw-ghost svg {
    width: 38px;
    height: 48px;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hw-ghost) 35%, transparent));
}

/* ---- Motion of its own (sway, descent, flight, flicker, glow and float are shared) ---- */

@keyframes vh-hw-wiggle {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes vh-hw-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.35); }
}

@keyframes vh-hw-face {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.78; }
    45% { opacity: 0.95; }
    60% { opacity: 0.7; }
    80% { opacity: 0.92; }
}

/* Phones: smaller webs, two spiders, the big bat only. */
@media (max-width: 767px) {
    .vh-season--halloween {
        --corner: 96px;
    }

    /* Shorter silk keeps both spiders beside the logo, above the hero text. */
    .vh-hw-dangle--1 { --drop: 96px; }
    .vh-hw-dangle--2 { --drop: 92px; }

    .vh-hw-dangle--3,
    .vh-hw-bat--2,
    .vh-hw-bat--3 {
        display: none;
    }
}

/* Small phones: the footer's Agreements list becomes its own centred row, so
   only a narrow nook fits beside it. */
@media (max-width: 389px) {
    .vh-season-nook .vh-hw-ghost,
    .vh-season-nook .vh-hw-tombstone,
    .vh-season-nook .vh-season-candle--short {
        display: none;
    }
}