/* =========================
   CSS Variables
   ========================= */
:root {
    --color-bg: #000;
    --color-nav-bg: #333;
    --color-nav-text: #fff;
    --color-nav-border: lightslategray;
    --color-face-border: lightslategray;
    --color-face-bg: #fff;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-gradient-hover: lightslategray;

    --cube-width: 100vw;
    --cube-height: 90vh;
    --border-size: 0.3vw;
    --perspective: 20vw;
    --font-size-base: 2rem;
    --font-size-nav: 1.5rem;
    --face-border-radius: 20px;
    --opacity-side-faces: 0.2;

    --nav-border-radius: 12px;
    --nav-width: 35%;
    --nav-height: 60px;
    --nav-max-width: 35%;
    --nav-max-height: 100px;
    --nav-z-index: 9999;
    --nav-bottom: 20px;

    --transition-fast: 0.3s;
    --shadow-nav: 0 4px 30px var(--color-shadow);
    --gradient-hover: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--color-gradient-hover) 100%);
}

/* =========================
   Reset & Base Styles
   ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: var(--cube-height);
    /* background: var(--color-bg); */
    background-image: url("../assets/img/textures/lgrey104.jpg");
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-nav-text);
}

/* =========================
   Utility Classes
   ========================= */
.grabbable {
    cursor: grab;
    user-select: none;
}

.grabbable:active {
    cursor: grabbing;
}

.unselectable {
    user-select: none;
}

/* =========================
   Navigator Styles
   ========================= */
#nav {
    position: absolute;
    bottom: var(--nav-bottom);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--nav-z-index);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
    column-gap:0.2em;

    width: var(--nav-width);
    max-width: var(--nav-max-width);
    height: var(--nav-height);
    max-height: var(--nav-max-height);

    /* border-radius: var(--face-border-radius); */
    /* border: 1px solid var(--color-nav-border); */
    /* background: var(--color-nav-bg); */
    font-size: var(--font-size-nav);
    /* box-shadow: var(--shadow-nav); */
}

#nav .navButton {
    flex: 0 0 20%;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nav-border-radius);
    background: var(--color-nav-bg);
    box-shadow: var(--shadow-nav);
    border: 1px solid var(--color-nav-border);
    /* transition: background var(--transition-fast); */
}

#nav .navButton:hover {
    color: lightslategray;
}

#nav #navElem {
    cursor: pointer;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    border-radius: var(--nav-border-radius);
    background: var(--color-nav-bg);
    box-shadow: var(--shadow-nav);
    border: 1px solid var(--color-nav-border);
}

#nav #navElem:hover {
    background-color: transparent;
    color: lightslategray;
}

#nav *:hover,
#nav *:focus {
    background: transparent;
}

#footer {
    color: lightslategray;
    font-size: 0.8rem;
    text-shadow: none;
}

/* =========================
   Cube & Scene
   ========================= */
#scene {
    width: var(--cube-width);
    height: var(--cube-height);
    perspective: calc(var(--perspective) * 10);
    padding: 10px;
}

#scene.backFaceHasFocus {
    /* Remove perspective for back face focus */
    perspective: initial;
}

#cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* =========================
   Face Styles
   ========================= */
.face {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--face-border-radius);
    border: 1px solid var(--color-face-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    background: var(--color-face-bg);
    transition: opacity var(--transition-fast);
}

.faceTransparent {
    background-image: none !important;
    background-color: rgb(0, 0, 0, 0) !important;
}

.f1 {
    transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
    /* background-color: #E6EAEC; */
    background-image: url("../assets/img/textures/wood016.jpg");
}

.f2 {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
    background-image: url("../assets/img/textures/write035.gif");
}

.f3 {
    transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2));
    background-image: url("../assets/img/textures/green072.jpg");
}

.f4 {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
    background-image: url("../assets/img/textures/dblue072.jpg");
}

.front {
    display: none;
}

.left,
.right {
    pointer-events: all;
    opacity: var(--opacity-side-faces);
}

.left:hover,
.right:hover {
    opacity: 1;
}

.back {
    opacity: 1;
}

.flip-h {
    border-radius: var(--face-border-radius);
    transform: scale(-1, 1);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

[class^="face-"] {
    pointer-events: all;
    border-radius: var(--face-border-radius);
}

/* =========================
   Ribbon
   ========================= */

.ribbon {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}

.ribbon {
    --f: .5em;
    /* control the folded part */

    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: #ecd509;
    overflow: hidden;
    /* the main color */
}

/* =========================
   Responsive Design
   ========================= */
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --nav-width: 65%;
        --nav-max-width: 65%;
    }

    #nav {
        width: var(--nav-width);
        max-width: var(--nav-max-width);
    }
}