@use 'base.scss';
@use 'panels.scss';

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes shake {
    0%   { transform: rotate(-10deg); }
    50%  { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

@keyframes shake-short {
    0%   { transform: rotate(0deg); }
    2%   { transform: rotate(-5deg); }
    6%   { transform: rotate(10deg); }
    10%  { transform: rotate(-10deg); }
    14%  { transform: rotate(10deg); }
    18%  { transform: rotate(-7deg); }
    22%  { transform: rotate(2deg); }
    25%  { transform: rotate(0deg); }
}

#iconWall {
    position: fixed;
    z-index: -100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;

    i {
        opacity: 1;
        transition: opacity 3s;
        font-size: 40px;
        animation: fade-in 4s ease-out,
                   shake 4s ease-in-out infinite;
    }

    > div {
        position: absolute;
        text-align: center;
        color: var(--color-icon-wall);
        pointer-events: none;
        transition: transform 20s linear;

        &.remove > i { opacity: 0; }
    }
}

#home {
    display: flex;
    flex-direction: column;
    overflow: auto;

    h1 { font-size: 2em; }
    p:empty { display: none; }

    span {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        white-space: nowrap;
    }

    > .spacing {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 48px 32px;

        h1 { text-align: center; }
    }

    > #savedGames {
        display: none;
        border-bottom: 2px solid var(--color-separator);
    }
}

.vertical-margin {
    margin-top: 16px;
    margin-bottom: 16px;
}

#loginTab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 2px solid var(--color-separator);
    text-align: center;
    overflow: hidden;
    flex: none;
    padding: 48px;
    gap: 15vw;
    max-height: 500px;
    transition-property: max-height, padding, border-bottom;
    transition-delay: 0.1s;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

    p {
        max-width: none;
    }

    > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .panel {
        gap: 16px;
        padding: 30px 36px;
        box-shadow: none;
        min-width: 20rem;
        width: 22vw;

        > div {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
    }

    &.hidden {
        max-height: 0;
        padding: 0 48px;
        border-bottom: 0 solid transparent;
        pointer-events: none;
    }
}

.glow {
    @extend %vertical;
    cursor: pointer;
    color: var(--color-primary);
    font-size: 64px;

    > i {
        transition: color 0.15s, font-size 0.85s cubic-bezier(0.19, 1, 0.22, 1);
        animation: shake-short 7s 3s ease-in-out infinite;
        margin-bottom: 16px;
    }

    &:hover > i {
        color: white;
        font-size: 75px;
    }

    i:active {
        font-size: 68px;
    }
}

#rememberMe {
    .with-tooltip {
        align-self: flex-start;

        span { max-width: max-content; }
    }
}

@keyframes grow-shrink {
    0%   { max-height: 0; padding: 0; }
    15%  { max-height: 60px; padding: 4px; }
    85%  { max-height: 60px; padding: 4px; }
    100% { max-height: 0; padding: 0; }
}

#loginText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-separator);
    justify-content: center !important;
    
    animation: grow-shrink 2s 0.5s ease-in-out paused both;
    overflow: hidden;
}

#gamesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .game {
        display: flex;
        flex-direction: column;
        background-color: var(--color-header);
        padding: 8px;
        gap: 16px;
        min-width: 200px;
        border-radius: base.$radius;
        transition-duration: 0.3s;
        animation: popup 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;

        h3 {
            margin: 0;
        }

        span {
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
                min-width: 25px;
                height: 25px;
                padding: 4px;
            }
        }
    }
}

@keyframes popup {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

#features {
    align-items: center;
    gap: 32px !important;

    .info {
        @extend %vertical;
        gap: 16px;
        max-width: 50%;

        img {
            max-width: max-content;
            margin-top: auto;
            margin-bottom: 3px;
        }
    }

    p { font-size: 19px; }

    > div {
        display: flex;
        justify-content: center;
        gap: 32px;
        width: 100%;
        margin-bottom: 100px;

        > div { min-width: 32vw; }

        &:nth-child(odd) {
            flex-direction: row-reverse;
        }
    }

    img, video {
        border: 2px solid var(--color-note);
        border-radius: 6px;
        box-shadow: 0 0 30px #0006;
        opacity: 0.7;
        transition: 0.2s;

        &:hover {
            opacity: 1;
        }
    }

    .media {
        > * {
            height: 24vw;
        }
    }
}

#changelogButton {
    a {
        position: absolute;
        top: 28px;
        right: 16px;

        > span {
            right: calc(100% + 4px);
            bottom: -50%;
        }
    }

    .content {
        position: absolute;
        top: calc(50% + 16px);
        right: 0;
        pointer-events: none;
        opacity: 0;
        transition: 0.1s linear;
        padding: 14px 0 8px 8px;
        text-align: start;
        cursor: default;
    }

    ::-webkit-scrollbar {
        display: none;
    }
 
    &.active {
        .content {
            pointer-events: all;
            opacity: 1;
        }

        #changelog {
            max-height: 200px;
        }
    }

    &.new::before {
        content: "•";
        animation: changelog-blink 1.5s 4 forwards;
    }
}

@keyframes changelog-blink {
    0%   { color: var(--color-primary); }
    50%  { color: white; }
    100% { color: var(--color-primary); }
}

#changelog {
    @extend %vertical;
    background-color: var(--color-header);
    outline: 2px solid var(--color-separator);
    overflow-y: scroll;
    padding: 12px;
    margin: 0;
    border-radius: 0 0 0 4px;
    width: calc(200px + 15vw);
    max-height: 0px;
    gap: 18px;
    transition-duration: 0.1s;

    span {
        white-space: nowrap;
    }

    b {
        color: #e6e6e6;
    }

    li {
        display: revert;
        background-color: unset;
        list-style-type: disc;
        margin: 0 0 0 24px;
        padding: 0;

        > li i {
            color: #e6e6e6;
            margin-right: 1px;
        }

        > li:not(:last-child) {
            margin-bottom: 4px;
        }
    }

    > li {
        color: var(--color-note);
        list-style-type: none;
        margin: 0;
        padding-left: 6px;
        border-left: 4px solid var(--color-separator);
    }

    > .new {
        border-left: 4px solid var(--color-primary);
    }
}

.product-info {
    p {
        text-align: center;
        align-self: center;
    }

    b {
        color: white;
    }
}