/* Repeated chibi, cloud and wave accents link the hero's illustration language to the final section. */
.notes-mascot {
    width: 105px;
    position: absolute;
    right: 4%;
    bottom: 52px;
    z-index: 2;
    filter: drop-shadow(0 13px 14px rgba(36, 81, 90, .2));
    animation: mascot-float 5s ease-in-out infinite
}

.works-mascot {
    position: absolute;
    right: 5%;
    top: 68px;
    width: 135px;
    z-index: 2;
    filter: drop-shadow(0 16px 16px rgba(15, 43, 53, .3));
    animation: mascot-float 5s ease-in-out infinite reverse
}

.works-mascot-works {
    position: absolute;
    right: -20%;
    top: -40px;
    width: 435px;
    z-index: 2;
    filter: drop-shadow(0 16px 16px rgba(15, 43, 53, .3));
}

.works:after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -10%;
    bottom: -48px;
    width: 125%;
    height: 120px;
    background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 25px, rgba(215, 243, 239, .36) 27px 30px, transparent 32px 56px);
    animation: wave-shift 10s linear infinite
}

.motion-ready .reveal-section>* {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s ease, transform .72s cubic-bezier(.2, .7, .2, 1)
}

.motion-ready .reveal-section.is-visible>* {
    opacity: 1;
    transform: none
}

.motion-ready .reveal-section.is-visible>*:nth-child(2) {
    transition-delay: .1s
}

.motion-ready .reveal-section.is-visible>*:nth-child(3) {
    transition-delay: .18s
}

.motion-ready .reveal-section.is-visible>*:nth-child(4) {
    transition-delay: .26s
}

@keyframes mascot-float {
    50% {
        transform: translateY(-12px) rotate(2deg)
    }
}

@keyframes wave-shift {
    to {
        transform: translateX(-90px)
    }
}

@media(prefers-reduced-motion:reduce) {

    .notes-mascot,
    .works-mascot,
    .works:after {
        animation: none
    }

    .motion-ready .reveal-section>* {
        opacity: 1;
        transform: none;
        transition: none
    }
}

@media(max-width:760px) {
    .notes-mascot {
        width: 72px;
        right: 3%;
        bottom: 44px
    }

    .works-mascot {
        width: 88px;
        top: 74px;
        right: 2%
    }

    .works-mascot-works {
        position: absolute;
        right: 0%;
        top: 0px;
        width: 435px;
        z-index: 2;
        filter: drop-shadow(0 16px 16px rgba(15, 43, 53, .3));
    }
}