/* Halloween theme for L. Knight book bingo, switched on with GeneralConfig:BingoTheme = "halloween".
   Its decorations are in Views/LKnight/BingoThemes/_halloween.cshtml.

   To make another theme (e.g. "christmas"): copy this file and the decorations file, rename both
   to the new name, change the colours and pictures, and set GeneralConfig:BingoTheme to it.
   Decorations go in .bingo-deco__side (beside the card, wide screens) and .bingo-deco__strip
   (a row above the card, smaller screens) so they never cover the card or the page text. */

.bingo--halloween {
    --bingo-board-from: #ff7a1a;
    --bingo-board-to: #4a1766;
    --bingo-board-shadow: rgba(74, 23, 102, 0.4);
    --bingo-line-glow: #9dff4f;
    --bingo-confetti: #ff7a1a, #4a1766, #1d1230, #9dff4f, #ffcf3f, #ffffff;
}

/* ---- Beside the card ---- */

.bingo--halloween .bingo-deco__side {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    /* Everything left (or right) of the card, less a gap. The card is at most 520px wide. */
    width: calc(50% - 284px);
}

.bingo--halloween .bingo-deco__side--left {
    left: 0;
}

.bingo--halloween .bingo-deco__side--right {
    right: 0;
}

.bingo--halloween .bingo-deco__side > svg {
    position: absolute;
}

.hw-web {
    top: 40px;
    width: 130px;
    height: 130px;
}

.hw-web--left {
    left: 8%;
}

.hw-web--right {
    right: 10%;
    transform: rotate(14deg);
}

/* Hangs from the bottom of the right-hand web. */
.hw-spider {
    top: 150px;
    right: calc(10% + 54px);
    width: 22px;
    height: 66px;
    animation: hw-dangle 5s ease-in-out infinite;
}

.hw-witch {
    top: 34%;
    left: 50%;
    width: min(200px, 90%);
    margin-left: calc(min(200px, 90%) / -2);
    animation: hw-fly 7s ease-in-out infinite;
}

.hw-witch--far {
    top: 52%;
    width: min(120px, 60%);
    margin-left: calc(min(120px, 60%) / -2);
    opacity: 0.85;
    transform: scaleX(-1);
    animation: hw-fly-back 9s ease-in-out infinite;
}

.hw-bat {
    width: 40px;
    animation: hw-flutter 3.4s ease-in-out infinite;
}

.hw-bat--a { top: 9%; right: 10%; }
.hw-bat--b { top: 62%; left: 14%; width: 30px; animation-delay: -1.2s; }
.hw-bat--c { top: 6%; left: 14%; width: 34px; animation-delay: -0.6s; }
.hw-bat--d { top: 42%; right: 24%; width: 26px; animation-delay: -2s; }

.hw-pumpkin {
    filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.55));
    animation: hw-glow 2.6s ease-in-out infinite;
}

.bingo-deco__side .hw-pumpkin--big {
    bottom: 4%;
    left: 14%;
    width: min(120px, 55%);
}

.bingo-deco__side .hw-pumpkin--small {
    bottom: 3%;
    left: calc(14% + min(120px, 55%) - 6px);
    width: min(72px, 32%);
    animation-delay: -1.3s;
}

.bingo-deco__side--right .hw-pumpkin--big {
    left: auto;
    right: 16%;
}

/* ---- Above the card, when there's no room beside it ---- */

.bingo--halloween .bingo-deco__strip {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    height: 54px;
    margin: 0 auto 10px;
}

.bingo-deco__strip svg {
    flex: 0 0 auto;
}

.bingo-deco__strip .hw-bat {
    width: 36px;
    height: 17px;
    align-self: center;
}

.bingo-deco__strip .hw-pumpkin {
    width: 44px;
    height: 40px;
}

.bingo-deco__strip .hw-witch {
    width: 68px;
    height: 54px;
    margin: 0;
    animation: none;
}

@media (min-width: 992px) {
    .bingo--halloween .bingo-deco__side {
        display: block;
    }

    .bingo--halloween .bingo-deco__strip {
        display: none;
    }
}

/* ---- Movement ---- */

@keyframes hw-fly {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    50% { transform: translate(8px, -12px) rotate(2deg); }
}

@keyframes hw-fly-back {
    0%, 100% { transform: scaleX(-1) translate(0, 0); }
    50% { transform: scaleX(-1) translate(10px, 8px); }
}

@keyframes hw-flutter {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25% { transform: translateY(-6px) scaleY(0.7); }
    50% { transform: translateY(-2px) scaleY(1); }
    75% { transform: translateY(-8px) scaleY(0.75); }
}

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

@keyframes hw-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.45)); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 170, 0, 0.8)); }
}

@media (prefers-reduced-motion: reduce) {
    .bingo-deco * {
        animation: none !important;
    }
}