/* SKELETONS. Grey shapes that shimmer where content is on its way, so a screen is never empty while it loads.
   The shimmer is one gradient moving across; it stops for people who asked for less motion. */
.skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-muted-color) 0%, color-mix(in srgb, var(--surface-muted-color) 45%, var(--surface-color)) 50%, var(--surface-muted-color) 100%);
    background-size: 200% 100%;
    animation: noord-digital-shimmer 1.3s ease-in-out infinite;
}

.skeleton--line {
    height: .75rem;
    margin-block: .45rem;
}

.skeleton--line:nth-child(3n) {
    width: 62%;
}

.skeleton--line:nth-child(3n + 1) {
    width: 88%;
}

.skeleton--title {
    width: 40%;
    height: 1.1rem;
    margin-bottom: .9rem;
}

.skeleton--block {
    height: 5.5rem;
    margin-block: .6rem;
    border-radius: 12px;
}

.skeleton--circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

@keyframes noord-digital-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

/* A page that is being left: after a short delay the old content steps back and a skeleton of a page shows,
   so a slow server never leaves a frozen screen. The delay keeps fast navigations free of flicker. */
body.is-navigating main.page-content {
    position: relative;
}

body.is-navigating main.page-content > * {
    opacity: .35;
    transition: opacity .15s ease-out;
}

body.is-navigating main.page-content::before {
    content: "";
    position: absolute;
    inset: 1.75rem 2rem auto;
    z-index: 5;
    height: 12rem;
    border-radius: 12px;
    background:
        linear-gradient(var(--surface-muted-color), var(--surface-muted-color)) 0 0 / 40% 1.1rem no-repeat,
        linear-gradient(var(--surface-muted-color), var(--surface-muted-color)) 0 2.4rem / 88% .75rem no-repeat,
        linear-gradient(var(--surface-muted-color), var(--surface-muted-color)) 0 3.8rem / 62% .75rem no-repeat,
        linear-gradient(var(--surface-muted-color), var(--surface-muted-color)) 0 5.6rem / 100% 5.5rem no-repeat;
    animation: noord-digital-shimmer-fade 1.3s ease-in-out infinite;
}

@keyframes noord-digital-shimmer-fade {
    50% {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton,
    body.is-navigating main.page-content::before {
        animation: none;
    }
}