@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}
body {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; margin: 0;
    --theme-clr: #fff;
    font-family: "Mona Sans", sans-serif;
    background: var(--theme-clr);
}
/* ///////////////////// */

.inf-grid-hero-container {
    height: 100vh;
    width: 100vw;
    perspective: 1000px;
    position: relative;
    --sz: 1800px;
    --grid-sz: 0;
    --rev-dis: 0;
    > div {
        position: absolute;
        width: 100%; height: 100%;
        transform-style: preserve-3d;
        display: grid; place-items: center;
        z-index: 1;
        
        &::after {
            content: ''; display: block;
            height: 100%;
            background: var(--theme-clr);
            position: absolute; left: 0; right: 0; top: 0; bottom: 0;
            pointer-events: none;
            z-index: 3;
        }
        display: grid;
        grid-template-columns: repeat(var(--grid-sz), 1fr);
        grid-template-rows: repeat(var(--grid-sz), 1fr);
        gap: 6px;
        > div {
            width: 100%; height: 100%;
            background-size: cover !important;
            background-position: center !important;
            background: repeating-linear-gradient(45deg, #94a4c211 0%, #94a4c211 5%, transparent 5%, transparent 10%);

            opacity: 0;
            &:hover {
                border: 4px solid #fff;
                cursor: pointer;
            }
        }
        > div.loaded {
            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
            transform-style: preserve-3d;
            opacity: 1;
            z-index: 2;
            transform: translate3d( 0, 0, -1px) !important;
        }
    }
    > div.top {
        top: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
        height: var(--sz);
        perspective: 1000px;
        &::after { background: linear-gradient( 180deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
        .shift-away { translate: 0% 100%;}
        > div { transform: translate3d( 0, 0, -100vh); }
    }
    > div.left {
        left: 0; transform-origin: center left;
        transform: rotateY(90deg); width: var(--sz);
        &::after { background: linear-gradient( 90deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
        .shift-away { translate: 100% 0%;}
        > div { transform: translate3d( 0, 0, -50vw); }
    }
    > div.bottom {
        bottom: 0; transform-origin: bottom center;
        transform: rotateX(90deg); height: var(--sz);
        &::after { background: linear-gradient( 0deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
        .shift-away { translate: 0% -100%;}
        > div { transform: translate3d( 0, 0, -50vh); }
    }
    > div.right {
        right: 0; transform-origin: center right;
        transform: rotateY(-90deg); width: var(--sz);
        &::after { background: linear-gradient( 270deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
        .shift-away { translate: -100% 0%;}
        > div { transform: translate3d( 0, 0, -50vw); }
    }
}

.content {
    position: absolute;
    width: 34%; height: 34%;
    left: 0; right: 0; top: 0; bottom: 0;
    border-radius: 8px;
    backdrop-filter: blur(3px);
    margin: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 5;
    h2 {
        font-size: 3em;
        font-weight: 600;
        z-index: 1;
        color:#000;
        user-select: none;
        margin:0;
    }
    p {
        margin-top: 0;
        color: #333;
        font-weight: 500;
        text-align: center;
    }
    span { color: orangered; }
    div.button {
        background: #1e1e1e; padding: 6px 42px 8px 42px;
        border-radius: 12px; color: #fff;
        text-decoration: none; cursor: pointer;
        transition: box-shadow 0.2s ease-in-out;
        &:hover {
            box-shadow: inset 0 0 8px 1px #fff,
            inset 0 0 0 1px #fff;
        }
    }
}

body:has(div.selectedPane) div.content  {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
    z-index: -1;
}
.inf-grid-hero-container > div.selectedPane {
    transform: rotateX(0deg);
    width: 100vw; height: 100vh;
    z-index: 100;
    transition: all 1s ease-in-out;
    position: absolute;
    &::after {
        background: none;
    }
    &.top > div.selected{ top: 0; }
    &.left > div.selected{ left: 0; }
    &.right > div.selected{ right: 0; }
    &.bottom > div.selected{ bottom: 0; }
}
.inf-grid-hero-container > div.selectedPane > div { opacity: 0; }
.inf-grid-hero-container > div.selectedPane > div.selected {
    transition: all 1s ease-in-out;
    rotate: 90deg 90deg;
    transform: translate3d(0, 100px, 0);
    
    position: absolute;
    z-index: 100;
    opacity: 0;
    animation: fadeIn 1s forwards;
    width: 100%; height: 100%;
    background-repeat: no-repeat !important;
    cursor: default;
    &:hover {
        border: none;
    }
}
@keyframes fadeIn { to { opacity: 1; }}

div#back-btn {
    position: absolute;
    left: 1em; top: 1em;
    border: 1px solid #aaa;
    z-index: 101;
    background: #1e1e1e; padding: 6px 42px 8px 42px;
    border-radius: 12px; color: #fff;
    text-decoration: none; cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;
    &:hover {
        box-shadow: inset 0 0 8px 1px #fff,
        inset 0 0 0 1px #fff;
    }
    opacity: 0;
    pointer-events: none;
}
body:has(div.selectedPane) div#back-btn {
    opacity: 1;
    pointer-events: all;
}
body:has(div.selectedPane) div.tp-dfwv {
    display: none;
}