/* =========================================
   SEASON ILLUSTRATION
========================================= */

/* Frame/viewport mask */

.season-frame {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

@media (min-width: 400px) {
    .season-frame {
        height: 180px;
    }
}

@media (min-width: 480px) {
    .season-frame {
        height: 230px;
    }
}

@media (min-width: 550px) {
    .season-frame {
        height: 240px;
    }
}

@media (min-width: 680px) {
    .season-frame {
        height: 300px;
    }
}

@media (min-width: 700px) {
    .season-frame {
        height: 325px;
    }
}

@media (min-width: 800px) {
    .season-frame {
        height: 375px;
    }
}

@media (min-width: 900px) {
    .season-frame {
        height: 430px;
    }
}

@media (min-width: 1000px) {
    .season-frame {
        height: 530px;
    }
}

@media (min-width: 1300px) {
    .season-frame {
        height: 630px;
    }
}

@media (min-width: 1500px) {
    .season-frame {
        height: 700px;
    }
}

/* Bottom-centre anchor */

.season-anchor {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* Responsive circle */

.season-circle {
    position: relative;
    width: 100vw;
    max-width: 2000px;
    aspect-ratio: 1;
    transform: translateY(50%);
}

/* Wheel and leaf layers */

.season-wheel,
.season-leaves,
.season-leaves-small,
.season-clouds {
    position: absolute;
    inset: 0;
}

.season-wheel img,
.season-leaves img,
.season-leaves-small img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Rotations */

.season-wheel {
    z-index: 2;
    transform-origin: center;
    animation: seasonSpin 50s linear infinite reverse;
}

.season-leaves {
    z-index: 1;
    transform-origin: center;
    animation: seasonSpin 70s linear infinite reverse;
}

.season-leaves-small {
    z-index: 5;
    transform-origin: center;
    animation: seasonSpin 80s linear infinite reverse;
}

@keyframes seasonSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Shared cloud layer */

.season-clouds {
    top: 46%;
    z-index: 10;
    aspect-ratio: 1;

    background:
        url("../images/season-clouds.svg")
        no-repeat center;

    background-size: contain;
    animation: seasonWindBobbing 10s ease-in-out infinite;
}

/* Paper-plane variation */

.paper-plane {
    position: absolute;
    top: 50%;
    left: 19%;
    z-index: 3;

    width: 45%;
    aspect-ratio: 1;

    background:
        url("../images/paper-plane.svg")
        no-repeat center;

    background-size: contain;
    animation: seasonWindBobbing 5s ease-in-out infinite;
}

/* Robin variation */

.season-robin {
    position: absolute;
    top: 50%;
    left: 19%;
    z-index: 3;

    width: 45%;
    aspect-ratio: 1;

    background:
        url("../images/season-robin.svg")
        no-repeat center;

    background-size: contain;
    animation: seasonWindBobbing 5s ease-in-out infinite;
}

/* Character and cloud movement */

@keyframes seasonWindBobbing {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate(12%, -6%) rotate(8deg) scale(1.03);
    }

    40% {
        transform: translate(22%, 3%) rotate(14deg) scale(1.06);
    }

    60% {
        transform: translate(15%, 10%) rotate(6deg) scale(1.02);
    }

    80% {
        transform: translate(6%, 4%) rotate(-6deg) scale(0.99);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

/* Accessibility: respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .season-wheel,
    .season-leaves,
    .season-leaves-small,
    .season-clouds,
    .paper-plane,
    .season-robin {
        animation: none;
    }
}