.snow, .snow2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.snow {
    background-image: radial-gradient(2.4px 2.4px at 30px 40px, rgba(255,255,255,.85), transparent 60%), radial-gradient(1.8px 1.8px at 150px 110px, rgba(255,255,255,.7), transparent 60%), radial-gradient(2px 2px at 90px 190px, rgba(255,255,255,.75), transparent 60%), radial-gradient(1.6px 1.6px at 200px 20px, rgba(255,255,255,.6), transparent 60%);
    background-size: 240px 240px;
    animation: snowfall 16s linear infinite;
}

.snow2 {
    background-image: radial-gradient(1.2px 1.2px at 20px 30px, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 80px 90px, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.3px 1.3px at 120px 10px, rgba(255,255,255,.45), transparent 60%);
    background-size: 140px 140px;
    animation: snowfall2 24s linear infinite;
    opacity: .8;
}

@keyframes snowfall {
    to {
        background-position: 240px 960px;
    }
}

@keyframes snowfall2 {
    to {
        background-position: -140px 560px;
    }
}

.sway {
    animation: sway 7s ease-in-out infinite;
    transform-origin: 50% 0;
}

@keyframes sway {
    0%, 100% {
        transform: rotate(-.7deg) scale(1.05);
    }

    50% {
        transform: rotate(.7deg) scale(1.05);
    }
}

.rise {
    animation: rise 1s cubic-bezier(.2,.7,.2,1) both;
}

.d1 {
    animation-delay: .12s;
}

.d2 {
    animation-delay: .24s;
}

.d3 {
    animation-delay: .36s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.motion--control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

.motion--control input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--gold-soft);
}

.motion--control input:focus-visible {
    outline: 2px dashed var(--gold-soft);
    outline-offset: 5px;
}

body:has(#motion--pause:checked) .snow,
body:has(#motion--pause:checked) .snow2,
body:has(#motion--pause:checked) .sway,
body:has(#motion--pause:checked) .hero--portrait,
body:has(#motion--pause:checked) .game--crew-photo {
    animation-play-state: paused;
}

@keyframes hero--portrait-sway {
    0%, 100% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .snow, .snow2, .sway, .rise {
        animation: none;
    }

    .patch,
    .sewn img {
        transition: none;
    }

    .patch:hover,
    a:hover .sewn img,
    .sewn:hover img,
    .feature--link:hover > span:last-child {
        transform: none;
    }

    .hero--scroll:hover {
        transform: translateX(-50%) rotate(-4deg);
    }
}