/* Halloween theme (loaded by /public/js/holiday-theme.mjs while it's active).
   Template for other holidays: copy this file and swap the accent tokens, the bunting tile and
   the particle art. The layer's layout is shared in base.css. */

/* ---- Accent colors ---- */
/* Site brand (navbar, footer, general marketing pages). Category pages keep their own accent. */
html[data-holiday="halloween"] {
    --brand-primary: #c2410c;
    --brand-primary-dark: #7c2d12;
    --brand-primary-light: #fb923c;
    --brand-secondary: #6b21a8;
    --brand-secondary-light: #e9d5ff;
    --brand-primary-text: #ffffff;
}

/* Kiosk */
html[data-holiday="halloween"] .kiosk-body {
    --kiosk-accent: #c2410c;
    --kiosk-accent-soft: #ffedd5;
    --kiosk-bg: #fbf7f2;
}

/* ---- Decor: garland of black, amber and purple pennants (reads on the orange navbar and on light pages) ---- */
html[data-holiday="halloween"] .holiday-bunting {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 2.5 Q60 20.5 120 2.5' fill='none' stroke='%231c1917' stroke-width='1.4'/%3E%3Cpath d='M9 5.0 L31 9.4 L20 24.5 Z' fill='%231c1917' stroke='%231c1917' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M49 11.2 L71 11.2 L60 28.5 Z' fill='%23fbbf24' stroke='%23fbbf24' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M89 9.4 L111 5.0 L100 24.5 Z' fill='%237e22ce' stroke='%237e22ce' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Ambient: bats ---- */
/* Body on the art element, one wing on each pseudo-element. All three share the same 100x50
   viewBox, so they line up; the wings rotate at the shoulders with CSS. (SMIL inside a
   background-image SVG stalled on the kiosk until the screen was tapped.) */
html[data-holiday="halloween"] .holiday-art {
    aspect-ratio: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cg fill='%231c1917'%3E%3Cellipse cx='50' cy='27' rx='5.5' ry='8.5'/%3E%3Ccircle cx='50' cy='18' r='5'/%3E%3Cpath d='M46 16 L46.5 9 L49.2 14 Z M54 16 L53.5 9 L50.8 14 Z'/%3E%3C/g%3E%3Ccircle cx='48.2' cy='18' r='1' fill='%23fbbf24'/%3E%3Ccircle cx='51.8' cy='18' r='1' fill='%23fbbf24'/%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

html[data-holiday="halloween"] .holiday-art::before,
html[data-holiday="halloween"] .holiday-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: holiday-wing 0.21s ease-in-out infinite alternate;
}

html[data-holiday="halloween"] .holiday-art::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cg fill='%231c1917'%3E%3Cpath d='M47 21 C39 12 24 8 3 14 C9 18 11 23 11 29 C15 26 20 26 23 30 C26 26 31 26 34 30 C37 26 42 26 47 27 Z'/%3E%3C/g%3E%3C/svg%3E");
    transform-origin: 47% 44%;
    --wing-up: 18deg;
    --wing-down: -28deg;
}

html[data-holiday="halloween"] .holiday-art::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cg fill='%231c1917'%3E%3Cpath d='M53 21 C61 12 76 8 97 14 C91 18 89 23 89 29 C85 26 80 26 77 30 C74 26 69 26 66 30 C63 26 58 26 53 27 Z'/%3E%3C/g%3E%3C/svg%3E");
    transform-origin: 53% 44%;
    --wing-up: -18deg;
    --wing-down: 28deg;
}

@keyframes holiday-wing {
    from {
        transform: rotate(var(--wing-up));
    }
    to {
        transform: rotate(var(--wing-down));
    }
}

/* ---- Cobwebs: hang in the top corners, just under the navbar (and move with it) ---- */
html[data-holiday="halloween"] .holiday-decor-cobweb-left,
html[data-holiday="halloween"] .holiday-decor-cobweb-right {
    top: var(--holiday-top);
    width: clamp(70px, 11vw, 140px);
    aspect-ratio: 1;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath d='M0 0 L140.0 0.0 M0 0 L133.9 40.9 M0 0 L114.7 80.3 M0 0 L80.3 114.7 M0 0 L40.9 133.9 M0 0 L0.0 140.0 M24.0 0.0 Q19.0 2.8 23.0 7.0 Q17.3 8.4 19.7 13.8 Q13.6 13.6 13.8 19.7 Q8.4 17.3 7.0 23.0 Q2.8 19.0 0.0 24.0 M46.0 0.0 Q36.4 5.4 44.0 13.4 Q33.1 16.1 37.7 26.4 Q26.0 26.0 26.4 37.7 Q16.1 33.1 13.4 44.0 Q5.4 36.4 0.0 46.0 M70.0 0.0 Q55.4 8.3 66.9 20.5 Q50.3 24.5 57.3 40.2 Q39.6 39.6 40.2 57.3 Q24.5 50.3 20.5 66.9 Q8.3 55.4 0.0 70.0 M96.0 0.0 Q76.0 11.4 91.8 28.1 Q69.0 33.7 78.6 55.1 Q54.3 54.3 55.1 78.6 Q33.7 69.0 28.1 91.8 Q11.4 76.0 0.0 96.0 M124.0 0.0 Q98.1 14.7 118.6 36.3 Q89.2 43.5 101.6 71.1 Q70.1 70.1 71.1 101.6 Q43.5 89.2 36.3 118.6 Q14.7 98.1 0.0 124.0' fill='none' stroke='%2378716c' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-holiday="halloween"] .holiday-decor-cobweb-left {
    left: 0;
}

html[data-holiday="halloween"] .holiday-decor-cobweb-right {
    right: 0;
    transform: scaleX(-1);
}

/* ---- Ghosts: two small ghosts drift up once as the page opens, then fade away ---- */
html[data-holiday="halloween"] .holiday-decor-ghost-left,
html[data-holiday="halloween"] .holiday-decor-ghost-right {
    bottom: 8vh;
    width: clamp(34px, 3.5vw, 48px);
    aspect-ratio: 60 / 72;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72'%3E%3Cpath d='M6 62 V32 C6 15 17 4 30 4 C43 4 54 15 54 32 V62 Q50.0 68 46 62 Q42.0 56 38 62 Q34.0 68 30 62 Q26.0 56 22 62 Q18.0 68 14 62 Q10.0 56 6 62 Z' fill='%23f8fafc' stroke='%23cbd5e1' stroke-width='1'/%3E%3Cellipse cx='23' cy='28' rx='3.2' ry='4.4' fill='%231c1917'/%3E%3Cellipse cx='37' cy='28' rx='3.2' ry='4.4' fill='%231c1917'/%3E%3Cellipse cx='30' cy='40' rx='3' ry='4' fill='%231c1917'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.9)) drop-shadow(0 3px 6px rgb(0 0 0 / 0.12));
    opacity: 0;
    animation:
        holiday-ghost-rise 4.5s ease-out 1 both,
        holiday-ghost-sway 1.8s ease-in-out infinite alternate;
}

html[data-holiday="halloween"] .holiday-decor-ghost-left {
    left: max(12px, 4vw);
    animation-delay: 0.4s, 0s;
}

html[data-holiday="halloween"] .holiday-decor-ghost-right {
    right: max(12px, 4vw);
    animation-delay: 1.2s, -0.9s;
}

/* Fade in low on the screen, drift up about a third of it, and fade out */
@keyframes holiday-ghost-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    25%,
    60% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-35vh);
        opacity: 0;
    }
}

/* Kiosk (open all day): the ghosts keep coming back, one at a time, like its bats */
html[data-holiday="halloween"] .kiosk-body .holiday-decor-ghost-left,
html[data-holiday="halloween"] .kiosk-body .holiday-decor-ghost-right {
    animation-name: holiday-ghost-rise-loop, holiday-ghost-sway;
    animation-duration: 20s, 1.8s;
    animation-iteration-count: infinite;
}

html[data-holiday="halloween"] .kiosk-body .holiday-decor-ghost-right {
    animation-delay: 10.4s, -0.9s;
}

/* The same rise as above in the first ~quarter of the loop, then wait out of sight */
@keyframes holiday-ghost-rise-loop {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    6%,
    13.5% {
        opacity: 0.7;
    }
    22.5%,
    100% {
        transform: translateY(-35vh);
        opacity: 0;
    }
}

@keyframes holiday-ghost-sway {
    from {
        translate: -8px 0;
        rotate: -5deg;
    }
    to {
        translate: 8px 0;
        rotate: 5deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-holiday="halloween"] .holiday-decor-ghost-left,
    html[data-holiday="halloween"] .holiday-decor-ghost-right {
        display: none;
    }
}