/* Decorative SVGs are local Twemoji assets; see seasonal-artwork-credits.txt. */
/* Isolation paints the negative layer above the body background and below content. */
.autumn-theme, .winter-theme, .spring-theme, .summer-theme { isolation: isolate; }
.seasonal-effects {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.seasonal-particle {
    position: absolute;
    top: -60px;
    left: var(--x, 50%);
    width: var(--season-size, 24px);
    height: var(--season-size, 24px);
    opacity: var(--season-opacity, .7);
    animation: seasonal-fall var(--duration, 22s) linear var(--delay, -8s) infinite;
}
.seasonal-particle::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--season-art) center / contain no-repeat;
    animation: seasonal-sway 5s ease-in-out var(--delay, -8s) infinite alternate;
}
.autumn-theme { --season-art: url('images/seasonal-leaves.svg'); --season-size: 32px; --season-opacity: .8; }
.autumn-theme .seasonal-particle:nth-child(3n) { --season-art: url('images/seasonal-maple-leaf.svg'); }
.winter-theme { --season-art: url('images/seasonal-snowflake.svg'); --season-size: 24px; --season-opacity: .7; }
.spring-theme { --season-art: url('images/seasonal-blossom.svg'); --season-size: 26px; --season-opacity: .65; }
.summer-theme { --season-art: url('images/seasonal-sun.svg'); --season-size: 32px; --season-opacity: .45; }
.spring-theme .seasonal-particle:nth-child(n+17),
.autumn-theme .seasonal-particle:nth-child(n+21),
.summer-theme .seasonal-particle:nth-child(n+9) { display: none; }
.summer-theme .seasonal-particle { animation-name: seasonal-rise; animation-duration: calc(var(--duration, 22s) + 12s); }
.seasonal-particle:nth-child(4n+1) { --duration: 20s; --drift: -35px; --spin: 120deg; --scale: .7; }
.seasonal-particle:nth-child(4n+2) { --duration: 26s; --drift: 55px; --spin: -160deg; --scale: .9; }
.seasonal-particle:nth-child(4n+3) { --duration: 18s; --drift: 30px; --spin: 240deg; --scale: 1; }
.seasonal-particle:nth-child(4n) { --duration: 23s; --drift: -55px; --spin: -80deg; --scale: .8; }
.seasonal-particle:nth-child(1) { --x: 3%; --delay: -3s; }
.seasonal-particle:nth-child(2) { --x: 54%; --delay: -10s; }
.seasonal-particle:nth-child(3) { --x: 18%; --delay: -17s; }
.seasonal-particle:nth-child(4) { --x: 83%; --delay: -1s; }
.seasonal-particle:nth-child(5) { --x: 36%; --delay: -8s; }
.seasonal-particle:nth-child(6) { --x: 67%; --delay: -15s; }
.seasonal-particle:nth-child(7) { --x: 8%; --delay: -22s; }
.seasonal-particle:nth-child(8) { --x: 95%; --delay: -6s; }
.seasonal-particle:nth-child(9) { --x: 45%; --delay: -13s; }
.seasonal-particle:nth-child(10) { --x: 25%; --delay: -20s; }
.seasonal-particle:nth-child(11) { --x: 75%; --delay: -4s; }
.seasonal-particle:nth-child(12) { --x: 60%; --delay: -11s; }
.seasonal-particle:nth-child(13) { --x: 12%; --delay: -18s; }
.seasonal-particle:nth-child(14) { --x: 90%; --delay: -2s; }
.seasonal-particle:nth-child(15) { --x: 32%; --delay: -9s; }
.seasonal-particle:nth-child(16) { --x: 70%; --delay: -16s; }
.seasonal-particle:nth-child(17) { --x: 2%; --delay: -0s; }
.seasonal-particle:nth-child(18) { --x: 50%; --delay: -7s; }
.seasonal-particle:nth-child(19) { --x: 80%; --delay: -14s; }
.seasonal-particle:nth-child(20) { --x: 21%; --delay: -21s; }
.seasonal-particle:nth-child(21) { --x: 62%; --delay: -5s; }
.seasonal-particle:nth-child(22) { --x: 40%; --delay: -12s; }
.seasonal-particle:nth-child(23) { --x: 98%; --delay: -19s; }
.seasonal-particle:nth-child(24) { --x: 29%; --delay: -3s; }
@keyframes seasonal-fall {
    from { transform: translate3d(0, -60px, 0) rotate(0deg) scale(var(--scale, 1)); }
    to { transform: translate3d(var(--drift, 40px), calc(100vh + 120px), 0) rotate(var(--spin, 180deg)) scale(var(--scale, 1)); }
}
@keyframes seasonal-rise {
    from { transform: translate3d(0, calc(100vh + 120px), 0) rotate(0deg) scale(var(--scale, 1)); }
    to { transform: translate3d(var(--drift, 40px), -60px, 0) rotate(45deg) scale(var(--scale, 1)); }
}
@keyframes seasonal-sway {
    from { transform: translateX(-12px) rotate(-15deg); }
    to { transform: translateX(12px) rotate(20deg); }
}
.seasonal-credits { font-size: 12px; margin: 8px auto; }
.site-footer .seasonal-credits a { color: inherit; }
@media (max-width: 600px) {
    .seasonal-particle:nth-child(n+13) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .seasonal-effects { display: none; }
    .seasonal-effects .seasonal-particle, .seasonal-effects .seasonal-particle::before { animation: none; }
}