/* The blog remains visible and interactive, including when JavaScript fails. */
.yuna-intro {
    --yuna-intro-ready: 1;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: opacity var(--yuna-intro-fade, 350ms) ease-out;
}

.yuna-intro[hidden] {
    display: none !important;
}

.yuna-intro[data-active] {
    display: block;
    opacity: 1;
    /* Independent visual deadline if the JavaScript animation stops running. */
    animation: yuna-intro-expire var(--yuna-intro-lifetime, 6000ms) step-end forwards;
}

.yuna-intro[data-active].is-leaving {
    opacity: 0;
}

.yuna-intro .yuna-intro__cat {
    position: absolute;
    display: block;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    transform: scale(var(--yuna-intro-scale, 1));
    transform-origin: top left;
}

@keyframes yuna-intro-expire {
    from { visibility: visible; }
    to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .yuna-intro[data-active] {
        display: none !important;
    }
}