/* ================================================================ >> Imports << */
@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ================================================================ >> Imports << */

/* ================================================================== >> Basic << */

/* ------------------------------------------------------- >> * << */
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    user-select: none;
    text-decoration: none;
}

/* ------------------------------------------------------- >> * << */

/* -------------------------------------------- >> scroll style << */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0);
}

/* -------------------------------------------- >> scroll style << */

/* ---------------------------------------------------- >> root << */
:root {
    --light-blue: #0077E9;
    --deep-blue: #000B98;
    --deep-blue25: #000a984c;
    --gold: #E6A600;
    --white: #E6E6FA;
    --white75: #e6e6fabe;
    --white50: #e6e6fa7f;
    --white25: #e6e6fa4f;
    --black: #282828;
    --black75: #282828be;
    --black50: #28282880;
    --black25: #28282842;
    --shadow: rgba(0, 0, 0, 0.15)
}

/* ---------------------------------------------------- >> root << */

/* ---------------------------------------------- >> All Father << */
html,
body {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: 'Passion One', serif;
    overflow: hidden;
}

/* ---------------------------------------------- >> All Father << */

/* -------------------------------------------------- >> Column << */
.Column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* margin: auto 0px; */
    scale: 0;
    transition: all 0.5s;
}

.Column.show {
    scale: 1;
}

/* -------------------------------------------------- >> Column << */

/* ----------------------------------------------------- >> Row << */
.Row {
    align-items: center;
    display: flex;
    gap: 1rem;
}

/* ----------------------------------------------------- >> Row << */

/* ================================================================== >> Basic << */

/* ================================================================ >> Layer 1 << */
.Layer1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 0;
}

/* -------------------------------------------------- >> Body << */
#BG_1 {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--deep-blue);
}

/* -------------------------------------------------- >> Body << */

/* ------------------------------------- >> Hexagon Wallpaper << */
.HexagonWallpaper {
    width: 75%;
    height: 100%;
    transform: translateX(150%);
    -webkit-mask-image: linear-gradient(to left, var(--deep-blue25), rgba(0, 0, 0, 0));
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(to left, var(--deep-blue25), rgba(0, 0, 0, 0));
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    transition: all 1s;
}

#BG_1.show .HexagonWallpaper {
    transform: translateX(50%);
}

/* ------------------------------------- >> Hexagon Wallpaper << */

/* ================================================================ >> Layer 1 << */

/* ================================================================ >> Layer 2 << */
.Layer2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 1;
}

/* -------------------------------------------------- >> Body << */
#BG_2 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* -------------------------------------------------- >> Body << */

/* --------------------------------------------- >> Live Hand << */
.LiveHandContainer {
    width: 50%;
    height: 100%;
    position: relative;
    transform: translateX(-100%);
    transition: all 0.5s;
}

#BG_2.show .LiveHandContainer {
    transform: translateX(0%);
    transition: all 0.5s;
}

.Circle {
    transform: translateX(-35%);
    width: 100%;
    height: 100%;
    scale: 1.5;
    border-radius: 100%;
    background: var(--gold);
    box-shadow: inset -4px 0px 10px var(--shadow), 4px 0px 10px var(--shadow);
}

.LiveHand {
    position: absolute;
    top: 50%;
    left: -5%;
    transform: translate(-5%, -50%);
    z-index: 1;
    width: 100%;
    animation: LiveHand 3s infinite linear;
}

@keyframes LiveHand {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.01;
    }

    100% {
        scale: 1;
    }

}

/* --------------------------------------------- >> Live Hand << */

/* ------------------------------------------------- >> Feild << */
.FieldContainer {
    width: 100%;
    display: flex;
    gap: clamp(0.5rem, 1vw, 2rem);
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
}

.FieldHeader {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.FieldLabel {
    font-size: clamp(1.2rem, 1.5vw, 3rem);
    color: var(--white);
}

.FieldContainer.green .FieldLabel {
    color: rgba(0, 255, 0, 0.6);
}

.FieldContainer.red .FieldLabel {
    color: rgba(255, 0, 0, 1);
}

.Field {
    width: 90%;
    height: clamp(3.5rem, 4vw, 8rem);
    position: relative;
    transition: all 0.5s;
    pointer-events: auto;
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    border-image-slice: 1;
    font-family: "Roboto", serif;
}

.FieldContainer.green .Field {
    border-image: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.5), transparent);
    border-image-slice: 1;
}

.FieldContainer.red .Field {
    border-image: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.5), transparent);
    border-image-slice: 1;
}

.FieldInput {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: 'Roboto', serif;
    text-align: center;
    transition: all 0.5s;
    z-index: 1;
    font-size: clamp(0.95rem, 1.2vw, 3rem);
}

.FieldContainer.green .FieldInput {
    color: rgba(0, 255, 0, 1);
    pointer-events: none;
}

.FieldContainer.red .FieldInput {
    color: rgba(255, 0, 0, 1);
    pointer-events: none;
}

.FieldInput::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(0.85rem, 1vw, 2rem);
}

/* ------------------------------------------------- >> Feild << */

/* ---------------------------------------- >> Authentication << */
.Authentication {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0.7rem, 1.2vw, 2rem) 0px;
    transition: all 0.5s;
    transform: translateX(100%);
}

#BG_2.show .Authentication {
    transform: translateX(0%);
}

/* --------------------------- > Title < */
.AuthenticationTitle {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.AuthenticationHeading {
    font-size: clamp(4rem, 5vw, 8rem);
    color: var(--gold);
    font-family: "Passion One", serif;
}

.AuthenticationSubHeading {
    font-size: clamp(1.5rem, 2.5vw, 3.5rem);
    color: var(--white);
    font-family: "Passion One", serif;
}

/* --------------------------- > Title < */

/* -------------------------- > Circle < */
.ShadowCircle {
    width: 50%;
    height: 50%;
    border-radius: 100%;
    filter: blur(50px);
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: radial-gradient(circle, var(--white25), transparent);
    z-index: -1;
    transition: all 0.5s;
}

.ShadowCircle.green {
    transition: all 0.5s;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.6), transparent);
}

.ShadowCircle.red {
    transition: all 0.5s;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.4), transparent);
}

/* -------------------------- > Circle < */

/* ----------------------------- > BTN < */
.BTN {
    width: max-content;
    height: max-content;
    display: flex;
    gap: clamp(0.5rem, 1vw, 2rem);
    align-items: center;
    justify-content: center;
    border-radius: clamp(0.5rem, 0.65vw, 1.5rem);
    padding: clamp(0.85rem, 1vw, 3rem) clamp(0.85rem, 1vw, 3rem);
    cursor: pointer;
    transition: all 0.5s;
    pointer-events: auto;
    font-size: clamp(1rem, 1.3vw, 2.5rem);
}

.BTN.green {
    pointer-events: none;
    background-color: rgba(0, 255, 0, 0.6) !important;
}

.BTN.red {
    pointer-events: none;
    transition: all 0.5s;
    color: var(--white) !important;
    background-color: #FF0000 !important;
}

.BTN:active {
    transition: all 0.5s;
    scale: 0.9;
}

#BackBTN {
    flex-direction: row-reverse;
    background-color: transparent;
    color: var(--white75);
}

#BackBTN:Hover {
    color: var(--white);
}

#SubmitBTN {
    background-color: var(--white);
    color: var(--black75);
}

#SubmitBTN:hover {
    color: var(--black);
}

/* ----------------------------- > BTN < */

/* ---------------------------------------- >> Authentication << */

/* ================================================================ >> Layer 2 << */

/* ================================================================ >> Layer 3 << */
.Layer3 {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    z-index: 2;
    transition: all 0.5s;
}

.Layer3.show {
    bottom: 0%;
}

/* -------------------------------------------------- >> Body << */
#BG_3 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 2.5vw, 3.5rem);
    color: var(--white);
    backdrop-filter: blur(5px);
}

/* -------------------------------------------------- >> Body << */

/* ================================================================ >> Layer 3 << */

/* ================================================================ >> Layer 4 << */
.Layer4 {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    z-index: 3;
}

/* -------------------------------------------------- >> Body << */
#BG_4 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* -------------------------------------------------- >> Body << */
/* ================================================================ >> Layer 4 << */

/* ============================================================ >> Media Query << */

/* ------------------------------------------------ >> 4K << */
@media screen and (min-width: 1800px) {}

/* ------------------------------------------------ >> 4K << */

/* ------------------------------------------ >> L Laptop << */
@media screen and (max-width: 1440px) {}

/* ------------------------------------------ >> L Laptop << */

/* ------------------------------------------ >> S Laptop << */
@media screen and (max-width: 1024px) {}

/* ------------------------------------------ >> S Laptop << */

/* -------------------------------------------- >> tablet << */
@media screen and (max-width: 768px) {}

/* -------------------------------------------- >> tablet << */

/* ------------------------------------------ >> L mobile << */
@media screen and (max-width: 425px) {

    /* ------------- > Hexagon Wallpaper < */
    .HexagonWallpaper {
        width: 100%;
        height: 40%;
        transform: translateX(0%) translateY(-80%);
        -webkit-mask-image: linear-gradient(to bottom, var(--deep-blue25), rgba(0, 0, 0, 0));
        mask-image: linear-gradient(to bottom, var(--deep-blue25), rgba(0, 0, 0, 0));
    }

    #BG_1.show .HexagonWallpaper {
        transform: translateX(0%) translateY(0%);
    }

    /* ------------- > Hexagon Wallpaper < */

    /* -------------------------- > BG_2 < */
    #BG_2 {
        flex-direction: column-reverse;
    }

    /* -------------------------- > BG_2 < */

    /* ----------------------> Live Hand < */
    .LiveHandContainer {
        width: 100%;
        height: 35%;
        transform: translateX(0%) translateY(200%);
    }

    #BG_2.show .LiveHandContainer {
        transform: translateX(0%) translateY(0%);
        transition: all 0.5s;
    }

    .Circle {
        transform: translateX(0%) translateY(10%);
        height: 200%;
        scale: 1.2;
    }

    .LiveHand {
        top: -15%;
        left: 50%;
        transform: translate(-50%, -30%) rotateY(180deg);
        width: 80%;
    }

    @keyframes LiveHand {
        0% {
            scale: 1;
        }

        50% {
            scale: 1.02;
        }

        100% {
            scale: 1;
        }

    }

    /* ----------------------> Live Hand < */

    /* ---------------- > Authentication < */
    .Authentication {
        width: 100%;
        transform: translateX(0%) translateY(-100%);
    }

    #BG_2.show .Authentication {
        transform: translateX(0%) translateY(0%);
    }

    .Field {
        width: 100%;
    }


    /* ---------------- > Authentication < */

    /* ------------------------ > Circle < */
    .ShadowCircle {
        width: 80%;
        height: 80%;
    }

    /* ------------------------ > Circle < */

}

/* ------------------------------------------ >> L mobile << */

/* ------------------------------------------ >> S mobile << */
@media screen and (max-width: 320px) {}

/* ------------------------------------------ >> S mobile << */

/* ============================================================ >> Media Query << */