.kiosk-legacy-stage {
    display: contents;
}

.kiosk-animation-player {
    position: fixed;
    inset: 0;
    z-index: 5000;
    overflow: hidden;
    background: #000;
}

.kiosk-animation-player[hidden],
.kiosk-legacy-stage[hidden] {
    display: none;
}

.kiosk-animation-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: none;
    transition:
        opacity var(--kiosk-transition-duration, 500ms) ease,
        transform var(--kiosk-transition-duration, 500ms) ease;
    will-change: opacity, transform;
}

.kiosk-animation-slide.is-active {
    opacity: 1;
    transform: none;
}

.kiosk-transition-slide-left { transform: translateX(8%); }
.kiosk-transition-slide-left.is-leaving { transform: translateX(-8%); }
.kiosk-transition-slide-right { transform: translateX(-8%); }
.kiosk-transition-slide-right.is-leaving { transform: translateX(8%); }
.kiosk-transition-slide-up { transform: translateY(8%); }
.kiosk-transition-slide-up.is-leaving { transform: translateY(-8%); }
.kiosk-transition-slide-down { transform: translateY(-8%); }
.kiosk-transition-slide-down.is-leaving { transform: translateY(8%); }
.kiosk-transition-zoom { transform: scale(1.08); }
.kiosk-transition-zoom.is-leaving { transform: scale(.94); }
.kiosk-transition-none { transition: none; }

.kiosk-animation-content {
    position: absolute;
    inset: 0;
    transform-origin: center center;
}

.kiosk-animation-content img {
    position: absolute;
    display: block;
}

.kiosk-countdown-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(13, 17, 23, .72), rgba(13, 17, 23, .72)),
        url("rhsbackdrop.png") center / cover no-repeat;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
}

.kiosk-countdown-frame {
    width: min(90vw, 1000px);
    height: 90vh;
    border: 12px solid #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3vh;
    padding: 4vh 2vw;
    text-align: center;
    overflow: hidden;
}

.kiosk-countdown-frame::before,
.kiosk-countdown-frame::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none;
}

.kiosk-countdown-frame::before {
    top: 0;
    right: 0;
    background: linear-gradient(225deg, #0026cc 50%, transparent 50%);
}

.kiosk-countdown-frame::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, #ff007f 50%, transparent 50%);
}

.kiosk-countdown-header {
    width: 100%;
    min-height: 16vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.kiosk-countdown-logo {
    height: 15vh;
    width: auto;
    object-fit: contain;
}

.kiosk-countdown-title {
    max-width: 86%;
    color: #ff007f;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    text-transform: uppercase;
}

.kiosk-countdown-days {
    font-size: clamp(8rem, 25vh, 18rem);
    line-height: .9;
    margin-top: auto;
}

.kiosk-countdown-subtext {
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 6px;
    text-transform: uppercase;
}

.kiosk-countdown-date {
    color: #8b949e;
    font-size: clamp(.9rem, 1.6vw, 1.2rem);
    margin-bottom: auto;
}