.hero-scene__loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.hero-scene.is-loading:not(.is-ready) .hero-scene__loader {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.hero-scene.is-loading:not(.is-ready) .hero-scene__poster {
    opacity: 0;
    visibility: hidden;
    transition: none;
}
.hero-scene__loader-layers {
    --color-1: #2f487b;
    --color-2: #db5baa;
    --color-3: rgba(208, 184, 211, .7);
    --size: clamp(.85px, .1vw, 1.25px);
    position: relative;
    width: calc(48 * var(--size));
    height: calc(48 * var(--size));
    background: var(--color-1);
    transform: rotateX(65deg) rotate(45deg);
    color: var(--color-2);
    animation: hero-loader-layers 1s linear infinite alternate paused;
}
.hero-scene__loader-layers::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-3);
    animation: hero-loader-top 1s linear infinite alternate paused;
}
.hero-scene.is-loading:not(.is-ready) .hero-scene__loader-layers,
.hero-scene.is-loading:not(.is-ready) .hero-scene__loader-layers::after { animation-play-state: running; }
@keyframes hero-loader-layers {
    0% { box-shadow: 0 0 0 0; }
    90%, 100% { box-shadow: calc(20 * var(--size)) calc(20 * var(--size)) 0 calc(-4 * var(--size)); }
}
@keyframes hero-loader-top {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(calc(-25 * var(--size)), calc(-25 * var(--size))) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scene__loader-layers, .hero-scene__loader-layers::after { animation: none; }
    .hero-scene.is-loading:not(.is-ready) .hero-scene__loader { display: none; }
    .hero-scene.is-loading:not(.is-ready) .hero-scene__poster { opacity: 1; visibility: visible; }
}