/* Seasonal effects (see static/js/festive.js). Everything here is decorative and ignores the pointer. */
.festive-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;               /* above the navbar (1030), below modals (1055) and the loading overlay (3000) */
    pointer-events: none;
}

.festive-walker {
    position: fixed;
    left: 0;
    bottom: 10px;
    width: 76px;
    z-index: 1041;
    pointer-events: none;
    transform: translateX(-120px);
    animation: festiveWalk var(--festive-walk, 22s) linear forwards;
    filter: drop-shadow(0 4px 6px rgba(20, 40, 90, .28));
}
.festive-walker svg { display: block; width: 100%; height: auto; overflow: visible; }
.festive-sm .sm-body {
    transform-origin: 50% 100%;
    animation: festiveWaddle .7s ease-in-out infinite;
}
.festive-sm .sm-foot-a { animation: festiveStepA .7s ease-in-out infinite; }
.festive-sm .sm-foot-b { animation: festiveStepB .7s ease-in-out infinite; }
.festive-sm .sm-arm-r  { transform-origin: 62px 56px; animation: festiveWave 1.1s ease-in-out infinite; }

@keyframes festiveWalk {
    from { transform: translateX(-120px); }
    to   { transform: translateX(calc(100vw + 120px)); }
}
@keyframes festiveWaddle {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    25%      { transform: rotate(0deg)  translateY(-4px); }
    50%      { transform: rotate(5deg)  translateY(0); }
    75%      { transform: rotate(0deg)  translateY(-4px); }
}
@keyframes festiveStepA { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-5px); } }
@keyframes festiveStepB { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(0); } }
@keyframes festiveWave  { 0%, 100% { transform: rotate(-8deg); }   50% { transform: rotate(14deg); } }

@media (max-width: 767.98px) {
    .festive-walker { width: 56px; bottom: 6px; }
}
@media print, (prefers-reduced-motion: reduce) {
    .festive-canvas, .festive-walker { display: none !important; }
}

/* Halloween pumpkin: hops along */
.festive-pk { width: 64px; }
.festive-pk .pk-body { transform-origin: 50% 100%; animation: festiveHop .8s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes festiveHop {
    0%, 100% { transform: translateY(0) scale(1.08, .9); }
    45%      { transform: translateY(-22px) scale(.94, 1.08); }
    85%      { transform: translateY(0) scale(1.08, .9); }
}

/* Loy Krathong: a krathong drifting along the water, bobbing gently */
.festive-kt { width: 90px; bottom: 6px; }
.festive-kt .kt-body { transform-origin: 50% 80%; animation: festiveBob 2.4s ease-in-out infinite; }
.festive-kt .kt-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: festiveFlame .35s ease-in-out infinite alternate; }
@keyframes festiveBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}
@keyframes festiveFlame { from { transform: scale(1, 1); } to { transform: scale(.88, 1.12); } }
@media (max-width: 767.98px) {
    .festive-pk { width: 50px; }
    .festive-kt { width: 70px; }
}