@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');

html,
body {
    height: 100%;
    margin: 0;
    background: #fff;
    overflow: hidden;
}

#stage {
    position: fixed;
    inset: 0;
    background: #fff;
    isolation: isolate;
}

#pile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Each image layer */
.piece {
    position: absolute;
    will-change: opacity, transform;
    opacity: 0;
}

/* Fade-in only (no fade-out) */
.piece.fadein {
    transition: opacity 0.35s linear;
    opacity: 1;
}

/* Logo block — placeholder */
#logo {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    line-height: 0.9;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

.logo-line1 {
    font-size: 56px;
    font-weight: 800;
    color: #111;
}

.logo-line2 {
    margin-top: 6px;
    font-size: 56px;
    font-weight: 800;
    color: #d00;
}

/* Centered UNDER CONSTRUCTION overlay */
#uc {
    position: fixed;

    left: 0px !important;
    bottom: 0px !important;
    top: auto !important;
    right: auto !important;

    transform: none !important;

    background: #000 !important;
    color: #fff !important;

    mix-blend-mode: normal !important;

    z-index: 20;
    /* stays above images */
    pointer-events: none;
    user-select: none;

    padding: 10px 14px;

    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
    font-variation-settings: "wdth" 92;
    letter-spacing: 0.05em;

    line-height: 1;
}

.hidden {
    display: none !important;
}