/* Halloween theme. Loaded only when "Halloween" is chosen in /admin/.
   Recolors the site with purple + pumpkin orange and styles the decorations from files/js/season.js. */

/* ---------- Colors ---------- */
body.theme-halloween #bg {
    background: linear-gradient(145deg, #2c1239 0%, #150a1c 45%, #060407 80%, #3b1906 120%);
}

/* No gray header background (and no gray-to-transparent fade): the themed background shows through */
body.theme-halloween .heading,
body.theme-halloween .heading-menu {
    animation: none;
    background: transparent;
}

/* The gray smoke wave right under the header only matches the standard header color:
   make it invisible but keep its space, so the page below stays where it is */
body.theme-halloween header + .wave-divider {
    visibility: hidden;
}

/* The big red smoke behind the logo is only decoration: clicks go through it,
   and the page content stays above it */
body.theme-halloween .background-smoke,
body.theme-halloween .background-smoke-mobile {
    pointer-events: none;
}

body.theme-halloween .menu-container {
    position: relative;
    z-index: 2;
}

body.theme-halloween .right-zone h1,
body.theme-halloween .flavours-container h2,
body.theme-halloween .gallery-photos h2,
body.theme-halloween .menu-container h2,
body.theme-halloween .hours-container h2 {
    text-shadow: 0 0 18px rgba(255, 115, 20, .55), 2px 2px 4px rgba(0, 0, 0, .8);
}

body.theme-halloween .left-links a:hover,
body.theme-halloween .right-links a:hover,
body.theme-halloween .social-icons a:hover {
    color: #ff8c1a;
}

/* Menu category tiles (/meniu/) and flavours (home) glow orange */
body.theme-halloween .menu-item img:hover,
body.theme-halloween .flavour-item img:hover {
    filter: drop-shadow(0 0 16px rgba(255, 120, 20, .55));
}

/* Category buttons */
body.theme-halloween .category {
    border-color: #ff8c1a;
}

body.theme-halloween .category.active {
    background-color: #ff8c1a;
    color: #1a0b02;
}

/* Product cards */
body.theme-halloween .menu-shi-item {
    border-color: #ff8c1a;
    box-shadow: 0 0 16px rgba(255, 110, 20, .16);
}

body.theme-halloween .menu-shi-item .item-details h3 {
    color: #ffa53a;
}

body.theme-halloween .menu-shi-item .item-descript .price {
    color: #ffc14d;
}

/* Small spider web in the bottom-left corner of every product card */
body.theme-halloween .menu-shi-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 56px;
    height: 56px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='white' stroke-width='.8'%3E%3Cpath d='M0 60H60M0 60L55.4 37M0 60L42.4 17.6M0 60L23 4.6M0 60V0'/%3E%3Cpath d='M16 60L14.8 53.9L11.3 48.7L6.1 45.2L0 44M30 60L27.7 48.5L21.2 38.8L11.5 32.3L0 30M44 60L40.7 43.2L31.1 28.9L16.8 19.4L0 16'/%3E%3C/svg%3E") no-repeat left bottom / contain;
    opacity: .28;
    pointer-events: none;
}

body.theme-halloween .item-divider,
body.theme-halloween .item-subdivider {
    text-shadow: 0 0 14px rgba(255, 115, 20, .5), -3px 2px #4e0705;
}

/* ---------- Corner spider webs ---------- */
.shs-web {
    position: absolute;
    top: 0;
    z-index: 3;
    width: clamp(110px, 15vw, 220px);
    pointer-events: none;
    opacity: .5;
}

.shs-web svg {
    display: block;
    width: 100%;
    height: auto;
    stroke: #e9e2f0;
    stroke-width: 1;
}

.shs-web-left {
    left: 0;
}

.shs-web-right {
    right: 0;
    transform: scaleX(-1);
}

/* ---------- Hanging spider ---------- */
/* The thread is tied to the web at the top of the page and only gets longer / shorter:
   the spider lowers itself on its silk, bounces, climbs back, and swings from the tie point. */
.shs-spider {
    --drop-short: 34px;
    --drop-long: 130px;
    position: absolute;
    top: 0;
    right: clamp(54px, 7.5vw, 120px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform-origin: top center;
    animation: shsSpiderSwing 5s ease-in-out infinite;
}

.shs-thread {
    position: relative;
    width: 1px;
    height: var(--drop-long);
    background: linear-gradient(rgba(233, 226, 240, .75), rgba(233, 226, 240, .45));
    animation: shsSpiderDrop 10s ease-in-out infinite;
}

/* Small knot where the thread is tied to the web */
.shs-thread::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(233, 226, 240, .8);
}

.shs-spider svg {
    display: block;
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 6px rgba(255, 120, 20, .5));
    transform-origin: 50% 0;
    animation: shsSpiderWiggle 10s ease-in-out infinite;
}

@keyframes shsSpiderDrop {
    0%,
    8% {
        height: var(--drop-short);
    }
    42% {
        height: var(--drop-long);
    }
    48% {
        height: calc(var(--drop-long) - 12px);
    }
    54%,
    70% {
        height: var(--drop-long);
    }
    100% {
        height: var(--drop-short);
    }
}

@keyframes shsSpiderSwing {
    0%,
    100% {
        transform: rotate(-2.5deg);
    }
    50% {
        transform: rotate(2.5deg);
    }
}

/* Legs kick a little while it waits at the bottom */
@keyframes shsSpiderWiggle {
    0%,
    54%,
    70%,
    100% {
        transform: rotate(0deg);
    }
    58% {
        transform: rotate(8deg);
    }
    62% {
        transform: rotate(-8deg);
    }
    66% {
        transform: rotate(5deg);
    }
}

/* ---------- Flying bats (top part of the page) ---------- */
.shs-bats {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.shs-bat {
    position: absolute;
    left: 0;
    animation: shsBatFly 14s linear infinite;
}

.shs-bat-body {
    display: block;
    animation: shsBatFlap .24s ease-in-out infinite alternate;
}

.shs-bat svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #3a1d4d;
    filter: drop-shadow(0 0 2px rgba(255, 150, 50, .9)) drop-shadow(0 0 9px rgba(255, 110, 20, .6));
}

@keyframes shsBatFly {
    0% {
        transform: translate(-12vw, 0);
    }
    25% {
        transform: translate(22vw, -36px);
    }
    50% {
        transform: translate(50vw, 14px);
    }
    75% {
        transform: translate(80vw, -26px);
    }
    100% {
        transform: translate(112vw, 0);
    }
}

@keyframes shsBatFlap {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(.45);
    }
}

/* ---------- Pumpkins on top of the footer ---------- */
.shs-footer-deco {
    position: relative;
    height: 0;
    pointer-events: none;
}

.shs-pumpkin {
    position: absolute;
    bottom: -6px;
    z-index: 2;
}

.shs-pumpkin svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}

.shs-pumpkin-big {
    left: 4%;
    width: clamp(64px, 8vw, 116px);
}

.shs-pumpkin-small {
    left: calc(4% + clamp(56px, 7vw, 100px));
    width: clamp(40px, 5vw, 70px);
}

.shs-pumpkin-right {
    right: 5%;
    width: clamp(56px, 6.5vw, 96px);
    transform: scaleX(-1);
}

.shs-face {
    filter: drop-shadow(0 0 4px #ffb02e);
    animation: shsFlicker 3s ease-in-out infinite;
}

.shs-pumpkin-small .shs-face {
    animation-delay: -1.2s;
}

.shs-pumpkin-right .shs-face {
    animation-delay: -2.1s;
}

@keyframes shsFlicker {
    0%,
    100% {
        opacity: 1;
    }
    18% {
        opacity: .75;
    }
    22% {
        opacity: .95;
    }
    48% {
        opacity: .65;
    }
    52% {
        opacity: 1;
    }
    80% {
        opacity: .8;
    }
}

@media (max-width: 768px) {
    .shs-web {
        opacity: .38;
    }

    .shs-spider {
        --drop-short: 26px;
        --drop-long: 90px;
    }

    .shs-spider svg {
        width: 26px;
        height: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shs-spider,
    .shs-spider svg,
    .shs-thread,
    .shs-face {
        animation: none;
    }
}