/* ==========================================================================
   Halloween. Loaded by /seasonal/seasonal_head.cfm (via /site/site_head.cfm)
   only while the season is on, AFTER /site/site.css.

   A season does two things and nothing else:
     1. Overrides site tokens (the colors in /site/site.css :root).
     2. Decorates the named spots:
          .site-header         every page: witch's hat on the logo, edge glow
          .home-hero           front-page stage: moon and bats
          .site-band           a page's closing band: web and spider
          .site-band--lead     a dark block that opens the page (sign-in,
                               password reset): web low, spider beside it
          .site-band--plain    a dark block that only takes the colors
          .site-footer         every page: the footer's colour
          .site-ledge          every page: jack-o'-lanterns on the footer's ledge;
                               they open the game, Pumpkin Hop
   It never selects by page structure, so a new page is themed the moment it
   uses the site chrome and marks its dark band.

   Every decoration is a CSS background: screen readers never see it and it
   never catches a click, except the piece on the ledge, a real button that
   opens the season's game (/seasonal/sign-jump.js). Motion only runs for visitors who haven't asked
   for less. To add a season, copy this file as /seasonal/<name>.css, add it
   to the Season list in signdroid marketing/websiteAds/seasonalTheme.cfm, then
   pick it in signdroid > Marketing > Website > Seasonal Theme. Preview: ?season=<name>
   ========================================================================== */

:root {
    /* Site tokens: the night palette */
    --site-header-bg: #1a1226;
    --site-stage-bg: #1a1226;
    --site-video-bg: #140d1f;
    --site-hero-tint: rgba(26, 18, 38, 0.62);           /* the hero's one flat overlay, as dark as the normal 56% black, in the night's violet */
    --site-band-bg: #1a1226;
    --site-band-edge: transparent;                      /* the night bands carry glows, not the edge line */
    --site-band-glow-top: rgba(123, 63, 196, 0.35);     /* violet moonlight */
    --site-band-glow-bottom: rgba(242, 101, 32, 0.18);  /* a pumpkin glow */
    --site-footer-bg: #120b1c;
    --site-mist: #f2eef8;               /* light page grounds take a faint violet; white cards stay white */

    /* Halloween's own palette and art */
    --hw-night: #1a1226;
    --hw-violet: #7b3fc4;
    --hw-pumpkin: #f26520;
    --hw-moon: #fbefc8;
    --hw-edge: linear-gradient(90deg, var(--hw-pumpkin), var(--hw-violet) 50%, var(--hw-pumpkin));

    /* The logo's coin (three taps on the front page) lands on a jack-o'-lantern */
    --site-coin-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' fill='%23f26520'/%3E%3Cg fill='%23ffd36b' stroke='%236b2408' stroke-width='0.8' stroke-linejoin='round'%3E%3Cpath d='M8.5 17.5L13.5 10L18 17.5z'/%3E%3Cpath d='M22 17.5L26.5 10L31.5 17.5z'/%3E%3Cpath d='M18.4 22L20 19L21.6 22z'/%3E%3Cpath d='M7.5 24Q20 36 32.5 24Q20 29.5 7.5 24z'/%3E%3C/g%3E%3Crect x='14' y='25.6' width='3' height='3' fill='%23f26520'/%3E%3Crect x='23' y='25.6' width='3' height='3' fill='%23f26520'/%3E%3C/svg%3E");

    --hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%23120a1c' d='M32 9l1.6-4 1.2 4.4C40 5 52 3 63 7c-4 1.5-6 4-6.5 7.5-2.5-1.8-5.5-2-8-.5-1.8 2-2.3 4.5-2 7-2.4-2.2-5.6-3-8.5-2-1.6 2.4-3.4 5-6 7.5-2.6-2.5-4.4-5.1-6-7.5-2.9-1-6.1-.2-8.5 2 .3-2.5-.2-5-2-7-2.5-1.5-5.5-1.3-8 .5C7 11 5 8.5 1 7c11-4 23-2 28.2 2.4L30.4 5z'/%3E%3C/svg%3E");
    --hw-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M13 26C16.5 16 19 8 28 1c-2 8-1 16 1.5 25z' fill='%233a2160'/%3E%3Cpath d='M12.6 21.5h17v4.5h-17z' fill='%23f26520'/%3E%3Cellipse cx='21' cy='28.5' rx='19' ry='4.5' fill='%233a2160'/%3E%3C/svg%3E");
    --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.32)' stroke-width='0.8' d='M0 0L118 34M0 0L100 72M0 0L66 104M0 0L30 118M26.4 0Q22.5 3.2 26.0 7.5Q20.6 10.0 22.0 15.8Q15.7 16.6 14.5 22.9Q9.1 21.0 6.6 26.0Q2.8 22.5 0.0 26.4M50.4 0Q43.0 6.1 49.6 14.3Q39.4 19.1 42.0 30.2Q30.0 31.8 27.7 43.7Q17.3 40.1 12.6 49.6Q5.4 43.0 0.0 50.4M74.4 0Q63.5 9.1 73.2 21.1Q58.1 28.3 62.0 44.6Q44.3 46.9 40.9 64.5Q25.6 59.2 18.6 73.2Q8.0 63.5 0.0 74.4M98.4 0Q83.9 12.0 96.8 27.9Q76.9 37.4 82.0 59.0Q58.5 62.1 54.1 85.3Q33.8 78.3 24.6 96.8Q10.6 83.9 0.0 98.4'/%3E%3C/svg%3E");
    --hw-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120'%3E%3Cpath d='M15 0v96' stroke='rgba(255,255,255,0.45)' stroke-width='0.8'/%3E%3Cg stroke='%23120a1c' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 100l-6-5-3 2M12 103l-8-1-3 3M12 106l-7 3-2 4M13 108l-4 6-1 4M18 100l6-5 3 2M18 103l8-1 3 3M18 106l7 3 2 4M17 108l4 6 1 4'/%3E%3C/g%3E%3Cellipse cx='15' cy='105' rx='4.6' ry='6' fill='%23120a1c'/%3E%3Ccircle cx='15' cy='98' r='3.2' fill='%23120a1c'/%3E%3Ccircle cx='13.8' cy='97.6' r='0.8' fill='%23f26520'/%3E%3Ccircle cx='16.2' cy='97.6' r='0.8' fill='%23f26520'/%3E%3C/svg%3E");
    --hw-pumpkin-grin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M19 8c0-3 1-6 4-8l1.6 2C22.5 3.4 21.5 5.5 21.5 8z' fill='%234a7a2b'/%3E%3Cellipse cx='12' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='28' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='20' cy='22' rx='10' ry='14' fill='%23f26520'/%3E%3Cpath d='M10 18l4 4.5H8zM30 18l2 4.5h-6zM10 26q10 7 20 0l-2.5 1.5-2-2-2.5 2.5-2.5-2.5-2.5 2.5-2-2.5-2 2z' fill='%23ffd27a'/%3E%3C/svg%3E");
    --hw-pumpkin-plain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M19 8c0-3 1-6 4-8l1.6 2C22.5 3.4 21.5 5.5 21.5 8z' fill='%234a7a2b'/%3E%3Cellipse cx='12' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='28' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='20' cy='22' rx='10' ry='14' fill='%23f26520'/%3E%3C/svg%3E");
    --hw-pumpkin-fangs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M19 8c0-3 1-6 4-8l1.6 2C22.5 3.4 21.5 5.5 21.5 8z' fill='%234a7a2b'/%3E%3Cellipse cx='12' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='28' cy='22' rx='10' ry='13' fill='%23c94b0c'/%3E%3Cellipse cx='20' cy='22' rx='10' ry='14' fill='%23f26520'/%3E%3Cpath d='M12 17l3.5 4.5h-7zM28 17l3.5 4.5h-7zM14 26h12l-6 5z' fill='%23ffd27a'/%3E%3C/svg%3E");
}


/* ---------- .site-header: an edge glow and a witch's hat on the logo ---------- */

/* site.css draws the line under the header; Halloween colours it pumpkin to violet */
.site-header::after { background: var(--hw-edge); }

.site-header__logo::before {
    content: "";
    position: absolute;
    /* A share of the logo, so it sits on the "sm" circle at every logo size */
    top: -14%;
    left: -2%;
    height: 52%;
    aspect-ratio: 42 / 36;
    pointer-events: none;
    transform: rotate(-18deg);
    background: no-repeat center / contain var(--hw-hat);
    filter: drop-shadow(0 0 2px rgba(242, 101, 32, 0.6));
}

/* Orange buttons glow like a jack-o'-lantern */
.site-btn--brand:hover,
.site-btn--brand:focus-visible {
    box-shadow: 0 0 0 3px rgba(242, 101, 32, 0.25), 0 0 26px rgba(242, 101, 32, 0.55);
}


/* ---------- .home-hero: a moon and a few bats ---------- */

.home-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--home-hero-top-inset) + 9%);
    right: 9vw;
    width: clamp(64px, 10vw, 150px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 64% 30%, rgba(214, 190, 130, 0.55) 0 7%, transparent 8%),
        radial-gradient(circle at 34% 58%, rgba(214, 190, 130, 0.45) 0 10%, transparent 11%),
        radial-gradient(circle at 70% 70%, rgba(214, 190, 130, 0.40) 0 5%, transparent 6%),
        radial-gradient(circle at 38% 34%, #fffaf0 0%, var(--hw-moon) 48%, #e6c983 100%);
    box-shadow: 0 0 50px 14px rgba(251, 239, 200, 0.22), 0 0 160px 60px rgba(242, 101, 32, 0.14);
}

.home-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--home-hero-top-inset) + 6%);
    right: 0;
    width: 60%;
    height: 40%;
    pointer-events: none;
    background-image: var(--hw-bat), var(--hw-bat), var(--hw-bat), var(--hw-bat);
    background-repeat: no-repeat;
    background-size: 64px auto, 44px auto, 30px auto, 52px auto;
    background-position: 62% 18%, 78% 56%, 44% 70%, 12% 34%;
    filter: drop-shadow(0 0 3px rgba(242, 101, 32, 0.55));
}

/* Phones: a narrow stage, so the moon and bats shrink into its top right (the pause button is top left) */
@media (max-width: 719px) {
    .home-hero::before { top: calc(var(--home-hero-top-inset) + 14px); right: 18px; width: 54px; }
    .home-hero::after { top: calc(var(--home-hero-top-inset) + 8px); height: 140px; background-size: 40px auto, 28px auto, 20px auto, 32px auto; }
}

@keyframes hw-bats-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-1.5vw, -1.2vh); }
    50%  { transform: translate(-3vw, 0.8vh); }
    75%  { transform: translate(-1vw, -0.6vh); }
    100% { transform: translate(1.5vw, 1vh); }
}


/* ---------- .site-band: night colors on every dark band ----------
   The colour and the two glows come from site.css; the tokens above make them night ones. */

.site-band {
    position: relative;
    overflow: hidden;
}

.site-band .call-action-content,
.site-band .home-closing__inner {
    position: relative;
    z-index: 1;
}

/* A closing band: a web in the top corner, a spider on its thread */
.site-band:not(.site-band--lead, .site-band--plain)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(120px, 18vw, 230px);
    aspect-ratio: 1;
    pointer-events: none;
    background: no-repeat top left / contain var(--hw-web);
}

.site-band:not(.site-band--lead, .site-band--plain)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    width: 48px;
    height: 190px;
    pointer-events: none;
    transform-origin: top center;
    filter: drop-shadow(0 0 3px rgba(242, 101, 32, 0.55));
    background: no-repeat top center / contain var(--hw-spider);
}

/* Phones: a shorter thread keeps the spider clear of the buttons */
@media (max-width: 767px) {
    .site-band:not(.site-band--lead, .site-band--plain)::after {
        right: 6%;
        width: 34px;
        height: 110px;
    }
}

/* A block that opens the page (sign-in, password reset): a web low on the
   left, and on wide screens a spider beside the form. (site.css splits the
   glows when a plain block continues it, so the two read as one page.) */

.site-band--lead::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(140px, 18vw, 240px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: scaleY(-1);
    background: no-repeat top left / contain var(--hw-web);
}

/* When a plain block continues the page (login's "Don't have an account?"),
   the web moves down to that block's bottom corner, so it hangs where the
   dark area really ends instead of floating mid-page */
.site-band--lead:has(+ .site-band--plain)::before { content: none; }

.site-band--lead + .site-band--plain::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(140px, 18vw, 240px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: scaleY(-1);
    background: no-repeat top left / contain var(--hw-web);
}

/* Phones: the follow-on block is short, so a smaller web stays clear of its button */
@media (max-width: 719px) {
    .site-band--lead + .site-band--plain::before { width: 96px; }
}

@media (min-width: 992px) {
    .site-band--lead::after {
        content: "";
        position: absolute;
        top: 0;
        right: 5%;
        width: 48px;
        height: 300px;
        pointer-events: none;
        transform-origin: top center;
        filter: drop-shadow(0 0 3px rgba(242, 101, 32, 0.55));
        /* The spider art carries its own thread; the line runs it up to the top */
        background:
            var(--hw-spider) no-repeat bottom center / 48px auto,
            linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)) no-repeat top center / 1px calc(100% - 190px);
    }
}

@keyframes hw-spider-bob {
    0%, 100% { transform: translateY(-14px); }
    50%      { transform: translateY(6px); }
}


/* ---------- .site-ledge: jack-o'-lanterns on the footer's ledge (they open Pumpkin Hop) ---------- */

.site-ledge {
    display: block;
    top: -38px;
    right: 6%;
    width: 150px;
    height: 42px;
    background-image: var(--hw-pumpkin-grin), var(--hw-pumpkin-plain), var(--hw-pumpkin-fangs);
    background-repeat: no-repeat;
    background-size: 46px auto, 30px auto, 38px auto;
    background-position: left bottom, 50% bottom, right bottom;
    filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.35));
}


/* ---------- Motion: only for visitors who haven't asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {
    .home-hero::after {
        animation: hw-bats-drift 16s ease-in-out infinite alternate;
    }

    .site-band:not(.site-band--lead, .site-band--plain)::after,
    .site-band--lead::after {
        animation: hw-spider-bob 4.5s ease-in-out infinite;
    }

    /* The hidden surprise (halloween.js): tap the spider and it runs up its thread, then lets itself back down */
    .site-band.hw-scurry:not(.site-band--lead, .site-band--plain)::after,
    .site-band--lead.hw-scurry::after {
        animation: hw-spider-scurry 3.4s both;
    }
}

/* Asked for less motion: the spider just hides for a moment */
@media (prefers-reduced-motion: reduce) {
    .site-band.hw-scurry:not(.site-band--lead, .site-band--plain)::after,
    .site-band--lead.hw-scurry::after {
        animation: hw-spider-hide 2s steps(1, end) both;
    }
}

@keyframes hw-spider-scurry {
    0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    16%  { transform: translateY(-100%); }
    55%  { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
    100% { transform: translateY(0); }
}

@keyframes hw-spider-hide {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}