/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    touch-action: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;
}


/*
|--------------------------------------------------------------------------
| KIOSK
|--------------------------------------------------------------------------
*/

#kiosk {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    touch-action: none;
}


/*
|--------------------------------------------------------------------------
| DISPLAY IMAGES
|--------------------------------------------------------------------------
*/

.display-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 700ms ease;

    pointer-events: none;
}


.display-image.active {
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| SWIPE PROMPT
|--------------------------------------------------------------------------
|
| Small glass-style prompt near the bottom of the Lenovo display.
|
| Height stays well below 8% of the screen.
|--------------------------------------------------------------------------
*/

.swipe-prompt {
    position: absolute;

    left: 50%;

    bottom: 2.5%;

    transform:
        translateX(-50%);

    z-index: 50;


    /*
     * Compact size.
     */

    min-width: 110px;

    height: 5.2vh;

    max-height: 54px;

    min-height: 38px;

    padding:
        0 24px;


    /*
     * Center SWIPE text.
     */

    display: flex;

    align-items: center;

    justify-content: center;


    /*
     * Glass button appearance.
     */

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.65);

    border-radius:
        999px;


    /*
     * Slight 3D/glass depth.
     */

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        inset 0 -1px 2px rgba(0,0,0,.35),
        0 2px 5px rgba(0,0,0,.45),
        0 0 8px rgba(255,255,255,.10);


    /*
     * Glass blur where supported.
     */

    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);


    /*
     * Text.
     */

    color:
        #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        2.1vh;

    font-weight:
        bold;

    letter-spacing:
        .08em;

    text-shadow:
        0 1px 2px rgba(0,0,0,.8);


    /*
     * Normally hidden unless slideshow mode
     * explicitly marks it visible.
     */

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 250ms ease,
        visibility 250ms ease;


    /*
     * It is informational only.
     * Touches pass through to the kiosk.
     */

    pointer-events: none;
}


.swipe-prompt.visible {
    opacity: 1;

    visibility: visible;
}


/*
|--------------------------------------------------------------------------
| DEBUG STATUS
|--------------------------------------------------------------------------
*/

.debug-status {
    display: none;

    position: absolute;

    left: 10px;
    bottom: 10px;

    z-index: 100;

    padding: 5px 8px;

    border-radius: 5px;

    background:
        rgba(0,0,0,.7);

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
}