.panel-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: #fff;
    pointer-events: none;
}

.panel-intro img {
    width: min(720px, 88vw);
    height: auto;
    object-fit: contain;
    transform-origin: center center;
}

.panel-intro.is-hold img {
    animation: introMarkIn .55s cubic-bezier(.22, 1, .36, 1);
}

body.has-panel-intro .panel-intro {
    animation: introVeil .95s cubic-bezier(.22, 1, .36, 1) var(--intro-delay, 6.4s) forwards;
}

body.has-panel-intro .panel-intro img {
    animation: introMark .95s cubic-bezier(.22, 1, .36, 1) var(--intro-delay, 6.4s) forwards;
}

body.has-panel-intro #root {
    opacity: 0;
    transform: scale(.975);
    filter: blur(8px);
    animation: introPanel .95s cubic-bezier(.22, 1, .36, 1) var(--intro-delay, 6.4s) forwards;
}

@keyframes introMarkIn {
    from { opacity: 0; transform: scale(.9); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes introVeil {
    to { opacity: 0; visibility: hidden; }
}

@keyframes introMark {
    to { opacity: 0; transform: scale(1.22) translateY(-22px); filter: blur(12px); }
}

@keyframes introPanel {
    to { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-intro.is-hold img { animation: none; }
    body.has-panel-intro .panel-intro,
    body.has-panel-intro .panel-intro img,
    body.has-panel-intro #root {
        animation-duration: .2s;
        animation-delay: .05s;
    }
}