/* Scroll direction controls the exit: down scroll lifts content away; up scroll lowers it away. */
.motion-ready .reveal-section.exit-up .enter-left,
.motion-ready .reveal-section.exit-up .enter-right,
.motion-ready .reveal-section.exit-up .enter-top,
.motion-ready .reveal-section.exit-up .enter-bottom {
    opacity: 0;
    transform: translateY(-48px)
}

.motion-ready .reveal-section.exit-down .enter-left,
.motion-ready .reveal-section.exit-down .enter-right,
.motion-ready .reveal-section.exit-down .enter-top,
.motion-ready .reveal-section.exit-down .enter-bottom {
    opacity: 0;
    transform: translateY(48px)
}

body:before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(77, 138, 154, .12) .7px, transparent .8px);
    background-size: 18px 18px;
    opacity: .28
}

.notes {
    background-image: linear-gradient(120deg, transparent 0 64%, rgba(255, 255, 255, .33) 64% 64.12%, transparent 64.2%), radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .7) 0 3px, transparent 4px), radial-gradient(circle at 93% 24%, rgba(255, 255, 255, .65) 0 7px, transparent 8px)
}

.notes:before {
    animation: cloud-drift 16s ease-in-out infinite
}

.about {
    background-image: linear-gradient(105deg, transparent 0 78%, rgba(136, 195, 204, .22) 78% 78.2%, transparent 78.3%)
}

.about-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.career {
    background-image: radial-gradient(circle at 80% 24%, rgba(255, 255, 255, .52) 0 2px, transparent 3px), radial-gradient(circle at 84% 26%, rgba(255, 255, 255, .52) 0 5px, transparent 6px), linear-gradient(70deg, transparent 0 22%, rgba(108, 175, 184, .12) 22% 22.12%, transparent 22.3%)
}

.sky-postcard {
    position: absolute;
    right: 42%;
    top: 100px;
    width: 190px;
    transform: rotate(5deg);
    padding: 7px 7px 28px;
    background: #fff;
    box-shadow: 0 15px 26px rgba(60, 108, 119, .18);
    z-index: 2;
    animation: postcard-bob 7s ease-in-out infinite
}

.sky-postcard img {
    display: block;
    width: 100%
}

.sky-postcard span {
    position: absolute;
    bottom: 6px;
    left: 10px;
    color: #537b89;
    font: 9px/1.25 "DM Mono", monospace
}

.about-mascot {
    width: 112px;
    position: absolute;
    left: 185px;
    top: 322px;
    filter: drop-shadow(0 12px 13px rgba(57, 103, 101, .18));
    animation: mascot-float 6s ease-in-out infinite reverse
}

.media-slot--about {
    margin-top: 105px
}

.notes-mascot {
    bottom: 36px
}

.works {
    background-image: radial-gradient(circle at 11% 13%, rgba(217, 245, 239, .7) 0 3px, transparent 4px), radial-gradient(circle at 15% 16%, rgba(217, 245, 239, .45) 0 6px, transparent 7px), linear-gradient(155deg, #2d6071 0%, #386f7c 55%, #4e8790 100%)
}

@keyframes cloud-drift {
    50% {
        transform: translateX(-22px)
    }
}

@keyframes postcard-bob {
    50% {
        transform: rotate(2deg) translateY(-10px)
    }
}

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

    .notes:before,
    .sky-postcard {
        animation: none
    }

    .motion-ready .reveal-section.exit-up .enter-left,
    .motion-ready .reveal-section.exit-up .enter-right,
    .motion-ready .reveal-section.exit-up .enter-top,
    .motion-ready .reveal-section.exit-up .enter-bottom,
    .motion-ready .reveal-section.exit-down .enter-left,
    .motion-ready .reveal-section.exit-down .enter-right,
    .motion-ready .reveal-section.exit-down .enter-top,
    .motion-ready .reveal-section.exit-down .enter-bottom {
        opacity: 1;
        transform: none
    }
}

@media(max-width:960px) {
    .sky-postcard {
        right: 4%;
        top: 310px;
        width: 135px
    }

    .about-mascot {
        left: 98px;
        width: 90px
    }
}

@media(max-width:760px) {
    .sky-postcard {
        position: relative;
        right: 60px;
        top: 0px;
        margin: 24px 0 0 auto;
        width: 125px
    }

    .about-mascot {
        position: relative;
        left: auto;
        top: auto;
        width: 90px;
        margin: 5px 0 0 60px
    }

    .media-slot--about {
        margin-top: 18px
    }
}