/*
 * Halloween theme: the navigation and the footer on every page, plus the shapes
 * and animations shared with halloween-pages.css.
 *
 * Only included while the "halloween_theme" flag is active. The decorations are
 * built by halloween.js and are purely visual: they never take part in the
 * layout, never receive focus and let pointer events through, except for the
 * spiders, which flee when clicked.
 */

/* Shared */

.hh-deco,
.hh-deco * {
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.hh-deco {
    display: block;
}

.hh-deco span,
.hh-deco div {
    display: block;
}

/* Witch hat on the logo */

.dashboard-sidebar .logo {
    position: relative;
    /* Room above the logo, so the tip of the hat stays inside the viewport. */
    margin-top: 18px;
}

.hh-hat {
    position: absolute;
    top: calc(50% - var(--hh-s));
    width: calc(var(--hh-s) * 0.82);
    height: calc(var(--hh-s) * 0.62);
    transform: rotate(16deg);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.hh-hat-sidebar {
    --hh-s: 50px;
    left: calc(0.5rem + 5px + var(--hh-s) * 0.42);
}

.hh-hat-header {
    --hh-s: 28px;
    left: calc(var(--hh-s) * 0.42);
}

.hh-hat-cone {
    position: absolute;
    left: 22%;
    bottom: 10%;
    width: 56%;
    height: 92%;
    background: #5b3f8f;
    clip-path: polygon(58% 0, 100% 100%, 0 100%);
}

.hh-hat-band {
    position: absolute;
    left: 27%;
    bottom: 20%;
    width: 46%;
    height: 14%;
    background: #f07c2a;
}

.hh-hat-brim {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 22%;
    background: #5b3f8f;
    border-radius: 50%;
}

/* Moon, witch and bats at the bottom of the sidebar */

@media (min-width: 1200px) {
    .dashboard-sidebar {
        position: relative;
    }
}

/*
 * The track runs from the end of the menu to the bottom of the sidebar, and the
 * scene sticks to the bottom of the viewport inside it, so it never covers the
 * menu.
 */
.hh-sidebar-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

@media (max-width: 1199.98px) {
    /* The off-canvas menu scrolls vertically only, also in browsers without
       overflow: clip. */
    .dashboard-sidebar {
        overflow-x: hidden;
    }

    /* Inside the scrollable off-canvas menu the scene follows the menu. */
    .hh-sidebar-track {
        min-height: 170px;
    }
}

.hh-moon-scene {
    position: sticky;
    bottom: 30px;
    flex: none;
    height: 140px;
    margin-top: auto;
}

.hh-sidebar-track.hh-is-cramped .hh-moon-scene {
    display: none;
}

.hh-moon {
    position: absolute;
    left: 34px;
    bottom: 20px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1ece0;
}

/* The glow cross-fades between two shadows, which is cheaper than animating
   the shadow itself. */
.hh-moon::before,
.hh-moon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    will-change: opacity;
}

.hh-moon::before {
    box-shadow:
        0 0 18px 4px rgba(255, 236, 200, 0.35),
        0 0 50px 14px rgba(240, 124, 42, 0.28),
        0 0 100px 30px rgba(240, 124, 42, 0.12);
    animation: hh-glow-out 6s ease-in-out infinite;
}

.hh-moon::after {
    opacity: 0;
    box-shadow:
        0 0 24px 6px rgba(255, 236, 200, 0.45),
        0 0 70px 20px rgba(240, 124, 42, 0.38),
        0 0 130px 40px rgba(240, 124, 42, 0.16);
    animation: hh-glow-in 6s ease-in-out infinite;
}

.hh-moon-crater {
    position: absolute;
    border-radius: 50%;
    background: #e3dccb;
}

.hh-moon-crater-1 {
    left: 14px;
    top: 18px;
    width: 12px;
    height: 12px;
}

.hh-moon-crater-2 {
    left: 36px;
    top: 36px;
    width: 8px;
    height: 8px;
}

.hh-moon-crater-3 {
    left: 38px;
    top: 14px;
    width: 5px;
    height: 5px;
}

/* Clips the flyers at the sidebar edges only, so they can leave the scene
   upwards. Clip-path only hides them, so overflow-x also keeps them from
   widening the scrollable off-canvas menu. */
.hh-moon-sky {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: clip;
    clip-path: inset(-100px 0);
}

.hh-witch {
    position: absolute;
    left: 0;
    top: 36px;
    z-index: 1;
    width: 76px;
    height: 54px;
    transform: translate(-90px, 30px);
    animation: hh-witch 14s ease-in-out 2s infinite;
}

.hh-witch-body {
    width: 76px;
    height: 54px;
    filter: drop-shadow(0 0 1.2px rgba(214, 208, 230, 0.85))
        drop-shadow(0 0 6px rgba(240, 124, 42, 0.25));
    animation: hh-wobble 1.8s ease-in-out infinite;
}

.hh-witch svg {
    display: block;
    overflow: visible;
}

.hh-witch-cape {
    transform-box: fill-box;
    transform-origin: right center;
    animation: hh-cape 0.5s ease-in-out infinite alternate;
}

.hh-sparkle-1 {
    animation: hh-flicker 1.1s infinite;
}

.hh-sparkle-2 {
    animation: hh-flicker 1.4s 0.3s infinite;
}

.hh-sparkle-3 {
    animation: hh-flicker 1.7s 0.6s infinite;
}

.hh-moon-bat-1 {
    --hh-s: 24px;
    --hh-bat-color: #c9c4d6;
    --hh-fly-duration: 16s;
    --hh-fly-delay: 1s;
}

.hh-moon-bat-2 {
    --hh-s: 16px;
    --hh-bat-color: #a9a3bd;
    --hh-fly-duration: 16s;
    --hh-fly-delay: 3.2s;
}

/* Bats */

/* The track carries the bat across its container and the bat itself moves up
   and down, so the flight only animates transforms. */
.hh-bat-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: hh-fly-across var(--hh-fly-duration) linear var(--hh-fly-delay)
        infinite;
}

.hh-bat {
    position: absolute;
    top: 0;
    left: -40px;
    width: var(--hh-s);
    height: calc(var(--hh-s) * 0.5);
    color: var(--hh-bat-color, #262833);
    animation: hh-fly-height var(--hh-fly-duration) linear var(--hh-fly-delay)
        infinite;
}

.hh-bat-wing {
    position: absolute;
    top: 0;
    width: calc(var(--hh-s) * 0.5);
    height: calc(var(--hh-s) * 0.42);
    background: currentColor;
    transform-origin: center top;
    animation: hh-flap 0.32s ease-in-out infinite;
}

.hh-bat-wing-left {
    left: 0;
    clip-path: polygon(
        100% 10%, 60% 0, 0 30%, 18% 55%, 34% 45%, 50% 75%, 66% 58%, 100% 90%
    );
}

.hh-bat-wing-right {
    right: 0;
    clip-path: polygon(
        0 10%, 40% 0, 100% 30%, 82% 55%, 66% 45%, 50% 75%, 34% 58%, 0 90%
    );
}

.hh-bat-body {
    position: absolute;
    left: 50%;
    top: 4%;
    width: calc(var(--hh-s) * 0.14);
    height: calc(var(--hh-s) * 0.3);
    margin-left: calc(var(--hh-s) * -0.07);
    border-radius: 50%;
    background: currentColor;
}

/* Spiders */

.hh-spider-clip {
    position: absolute;
    top: 0;
    overflow: hidden;
}

.hh-spider {
    position: absolute;
    top: 0;
    transform-origin: top center;
    animation: hh-sway 5s ease-in-out infinite;
}

.hh-spider-drop {
    transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hh-spider-drop.hh-is-fled {
    transform: translateY(calc(-1 * (var(--hh-thread) + 60px)));
    transition-duration: 0.7s;
}

.hh-spider-bob {
    animation: hh-bob 6s ease-in-out infinite;
}

/* The thread reaches above the top, so it stays attached while bobbing. */
.hh-spider-thread {
    width: 1px;
    height: calc(var(--hh-thread) + 400px);
    margin: -400px auto 0;
    background: var(--hh-thread-color);
}

.hh-deco .hh-spider-body {
    position: relative;
    width: 26px;
    height: 22px;
    margin-left: -12.5px;
    cursor: pointer;
    pointer-events: auto;
}

.hh-spider-leg {
    position: absolute;
    top: calc(5px + var(--hh-leg) * 2.3px);
    width: 9px;
    height: 1.4px;
    border-radius: 1px;
    background: var(--hh-spider-color);
}

.hh-spider-leg-left {
    right: calc(50% + 3px);
    transform-origin: right center;
    transform: rotate(calc(38deg - var(--hh-leg) * 25deg));
}

.hh-spider-leg-right {
    left: calc(50% + 3px);
    transform-origin: left center;
    transform: rotate(calc(var(--hh-leg) * 25deg - 38deg));
}

.hh-spider-head {
    position: absolute;
    left: 9.5px;
    top: 0;
    width: 7px;
    height: 6px;
    border-radius: 50%;
    background: var(--hh-spider-color);
}

.hh-spider-abdomen {
    position: absolute;
    left: 7px;
    top: 5px;
    width: 12px;
    height: 13px;
    border-radius: 50%;
    background: var(--hh-spider-color);
}

.hh-spider-eye {
    position: absolute;
    top: 2px;
    width: 1.6px;
    height: 1.6px;
    border-radius: 50%;
    background: #f07c2a;
    animation: hh-flicker 3s infinite;
}

.hh-spider-eye-left {
    left: 10.5px;
}

.hh-spider-eye-right {
    left: 13.8px;
}

.hh-spider-sidebar {
    --hh-thread: 210px;
    --hh-spider-color: #c9c4d6;
    --hh-thread-color: rgba(255, 255, 255, 0.28);
    left: 0;
    right: 0;
    z-index: 2;
    height: calc(var(--hh-thread) + 60px);
}

.hh-spider-sidebar .hh-spider {
    left: 238px;
}

@media (max-width: 1199.98px) {
    .hh-spider-sidebar {
        --hh-thread: 330px;
    }

    .hh-spider-sidebar .hh-spider {
        left: 82%;
    }
}

/* Pause the sidebar while the off-canvas menu is closed. */
@media (max-width: 1199.98px) {
    .row-offcanvas:not(.active) .hh-sidebar-deco *,
    .row-offcanvas:not(.active) .hh-sidebar-deco *::before,
    .row-offcanvas:not(.active) .hh-sidebar-deco *::after {
        animation-play-state: paused;
    }
}

/* Pumpkins */

.hh-pumpkin {
    position: relative;
    flex: none;
    width: var(--hh-s);
    height: calc(var(--hh-s) * 0.8);
}

.hh-pumpkin-stem {
    position: absolute;
    left: 44%;
    top: calc(var(--hh-s) * -0.16);
    width: calc(var(--hh-s) * 0.13);
    height: calc(var(--hh-s) * 0.24);
    border-radius: 2px;
    background: #5d7a3c;
    transform: rotate(14deg);
}

.hh-pumpkin-lobe {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 50%;
    background: #e06a22;
}

.hh-pumpkin-lobe-left {
    left: 0;
    width: 62%;
}

.hh-pumpkin-lobe-right {
    right: 0;
    width: 62%;
}

.hh-pumpkin-lobe-middle {
    left: 24%;
    width: 52%;
    background: #f08a38;
}

/* Footer pumpkins */

footer.bg-white {
    position: relative;
}

.hh-footer-pumpkins {
    position: absolute;
    right: 18px;
    top: -17px;
    display: flex;
    align-items: flex-end;
}

.hh-footer-pumpkins .hh-pumpkin + .hh-pumpkin {
    margin-left: 4px;
}

.hh-footer-pumpkin-1 {
    --hh-s: 18px;
}

.hh-footer-pumpkin-2 {
    --hh-s: 28px;
}

.hh-footer-pumpkin-3 {
    --hh-s: 15px;
}

@media (min-width: 768px) {
    .hh-footer-pumpkins {
        right: 40px;
        top: -21px;
    }

    .hh-footer-pumpkin-1 {
        --hh-s: 22px;
    }

    .hh-footer-pumpkin-2 {
        --hh-s: 34px;
    }

    .hh-footer-pumpkin-3 {
        --hh-s: 18px;
    }
}

/* Reduced motion: keep the still figures, drop everything that moves on its
   own. */

@media (prefers-reduced-motion: reduce) {
    .hh-deco,
    .hh-deco *,
    .hh-deco *::before,
    .hh-deco *::after {
        animation: none !important;
        transition: none !important;
    }

    .hh-witch,
    .hh-bat-track {
        display: none;
    }
}

/* Keyframes */

@keyframes hh-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes hh-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(22px); }
}

@keyframes hh-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

@keyframes hh-flap {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.25); }
}

/* Moves from left: -40px to left: calc(100% + 40px) in the first 36%. */
@keyframes hh-fly-across {
    0% { transform: translateX(0); }
    36%, 100% { transform: translateX(calc(100% + 80px)); }
}

@keyframes hh-fly-height {
    0% { transform: translateY(40px); }
    12% { transform: translateY(12px); }
    24% { transform: translateY(34px); }
    36%, 100% { transform: translateY(16px); }
}

@keyframes hh-glow-out {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes hh-glow-in {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes hh-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes hh-flame {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(0.9, 1.08) rotate(3deg); }
}

@keyframes hh-witch {
    0% { transform: translate(-90px, 30px); }
    40% { transform: translate(60px, -6px); }
    55% { transform: translate(150px, -14px); }
    75%, 100% { transform: translate(330px, -40px); }
}

@keyframes hh-cape {
    from { transform: skewY(0) scaleX(1); }
    to { transform: skewY(-4deg) scaleX(1.06); }
}

@keyframes hh-wobble {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-4px); }
}

@keyframes hh-peek {
    0%, 58% { transform: translateY(62px); }
    64%, 71% { transform: translateY(30px); }
    75%, 84% { transform: translateY(6px); }
    90%, 100% { transform: translateY(62px); }
}

@keyframes hh-eyes {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes hh-flicker {
    0%, 100% { opacity: 0.9; }
    45% { opacity: 0.6; }
    50% { opacity: 1; }
    55% { opacity: 0.75; }
}