/*
 * Huddleora Live Splash v2.73
 * Desktop/tablet: centered landscape artwork with feathered edges.
 * Mobile/iOS: full-screen portrait artwork.
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #020b0a;
}

body.huddleora-live-splash-page {
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 50%, rgba(0, 170, 195, .11), transparent 38%),
        radial-gradient(circle at 82% 50%, rgba(105, 215, 70, .11), transparent 38%),
        #020b0a;
}

.huddleora-live-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100dvh;
    min-height: 100vh;

    overflow: hidden;

    opacity: 0;

    animation:
        huddleoraSplashFadeIn 1.20s ease forwards,
        huddleoraSplashFadeOut 1.05s ease 3.20s forwards;
}

.huddleora-live-splash-frame {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;
}

.huddleora-live-splash picture {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.huddleora-live-splash img {
    display: block;
    object-position: center;
    image-rendering: auto;
}

/* Desktop + tablet */
@media (min-width: 721px) {
    .huddleora-live-splash-frame {
        width: min(92vw, 1560px);
        height: min(90vh, 960px);

        overflow: hidden;
        border-radius: 30px;
    }

    /*
     * Creates the feathering rather than showing the square artwork edges.
     */
    .huddleora-live-splash-frame::after {
        content: "";

        position: absolute;
        inset: -1px;

        z-index: 3;

        pointer-events: none;

        border-radius: 30px;

        box-shadow:
            inset 0 0 35px rgba(2, 11, 10, .62),
            inset 0 0 90px rgba(2, 11, 10, .88),
            inset 0 0 165px rgba(2, 11, 10, .56);
    }

    .huddleora-live-splash img {
        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        width: auto;
        height: auto;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;
    }
}

/* Mobile / native iOS WebView */
@media (max-width: 720px) {
    .huddleora-live-splash {
        background: #020b0a;
    }

    .huddleora-live-splash-frame,
    .huddleora-live-splash picture {
        width: 100vw;
        height: 100dvh;
        min-height: 100vh;
    }

    .huddleora-live-splash img {
        width: 100vw;
        height: 100dvh;
        min-height: 100vh;

        max-width: none;
        max-height: none;

        object-fit: cover;
        object-position: center;
    }
}

@keyframes huddleoraSplashFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes huddleoraSplashFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .huddleora-live-splash {
        animation:
            huddleoraSplashFadeIn .20s linear forwards,
            huddleoraSplashFadeOut .20s linear 1.15s forwards;
    }
}