/* All decorative sprites use the original, unmodified Web Page Element artwork. */
.page-motion-section {
    position: relative;
    isolation: isolate;
    scroll-margin-top: 120px;
}

.page-motion-section > .container,
.page-motion-section > .container-fluid {
    position: relative;
    z-index: 1;
}

.page-motion-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: multiply;
    opacity: .38;
}

/* The empty track's dimensions keep each sprite inside its section as it moves. */
.page-motion-track {
    --motion-size: clamp(58px, 6vw, 84px);
    --motion-inset: 12px;
    position: absolute;
    top: var(--motion-inset);
    left: var(--motion-inset);
    width: max(0px, calc(100% - var(--motion-size) - 2 * var(--motion-inset)));
    height: max(0px, calc(100% - var(--motion-size) - 2 * var(--motion-inset)));
    animation: page-art-wave 42s linear -9s infinite alternate;
    transform: translate(8%, 20%);
}

.page-motion-track--zigzag {
    --motion-size: clamp(72px, 7vw, 96px);
    animation: page-art-zigzag 48s linear -24s infinite alternate;
    transform: translate(52%, 65%);
}

.page-motion-track--reverse {
    animation: page-art-wave 54s linear -38s infinite alternate-reverse;
    transform: translate(90%, 30%);
}

.page-motion-art {
    display: block;
    width: var(--motion-size);
    height: var(--motion-size);
    background: url('../images/page-motion-artwork.png') no-repeat;
    animation: page-art-sway 9s ease-in-out infinite alternate;
}

/* Square windows into the source sheet preserve the artwork's proportions. */
.page-motion-art--atom {
    background-size: 304.0541% 380.0901%;
    background-position: 47.2406% 5.7896%;
}

.page-motion-art--maths {
    background-size: 225% 281.2667%;
    background-position: 45.3333% 52.2251%;
}

.page-motion-art--dna {
    background-size: 255.8757% 319.8635%;
    background-position: 46.6926% 100%;
}

.page-motion-toggle {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 998;
    border: 1px solid #d8e0eb;
    border-radius: 20px;
    background: #fff;
    color: #1f4fab;
    padding: 6px 12px;
    font: 12px system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px #0000000d;
}

.page-motion-toggle:focus-visible {
    outline: 3px solid #ffc600;
    outline-offset: 3px;
}

.page-motion-paused .page-motion-track,
.page-motion-paused .page-motion-art,
.page-motion-hidden .page-motion-track,
.page-motion-hidden .page-motion-art,
.page-motion-observed:not(.page-motion-active) .page-motion-track,
.page-motion-observed:not(.page-motion-active) .page-motion-art {
    animation-play-state: paused;
}

/* Two rolling waves across the width and height of each section. */
@keyframes page-art-wave {
    0% { transform: translate(0%, 50%); }
    6.25% { transform: translate(6.25%, 80%); }
    12.5% { transform: translate(12.5%, 94%); }
    18.75% { transform: translate(18.75%, 80%); }
    25% { transform: translate(25%, 50%); }
    31.25% { transform: translate(31.25%, 20%); }
    37.5% { transform: translate(37.5%, 6%); }
    43.75% { transform: translate(43.75%, 20%); }
    50% { transform: translate(50%, 50%); }
    56.25% { transform: translate(56.25%, 80%); }
    62.5% { transform: translate(62.5%, 94%); }
    68.75% { transform: translate(68.75%, 80%); }
    75% { transform: translate(75%, 50%); }
    81.25% { transform: translate(81.25%, 20%); }
    87.5% { transform: translate(87.5%, 6%); }
    93.75% { transform: translate(93.75%, 20%); }
    100% { transform: translate(100%, 50%); }
}

@keyframes page-art-zigzag {
    0% { transform: translate(0%, 12%); }
    20% { transform: translate(20%, 88%); }
    40% { transform: translate(40%, 12%); }
    60% { transform: translate(60%, 88%); }
    80% { transform: translate(80%, 12%); }
    100% { transform: translate(100%, 88%); }
}

@keyframes page-art-sway {
    from { transform: rotate(-8deg); }
    to { transform: rotate(8deg); }
}

@media (max-width: 767.98px) {
    .page-motion-layer { opacity: .28; }
    .page-motion-track { --motion-size: 48px; --motion-inset: 8px; }
    .page-motion-track--zigzag { --motion-size: 64px; }
    .page-motion-toggle { right: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-motion-track, .page-motion-art { animation: none; }
    .page-motion-toggle { display: none; }
}

@media print {
    .page-motion-layer, .page-motion-toggle { display: none; }
}