/* MARK: - General */
@font-face {
    font-family: "DaKai";
    src: url(./assets/light/font-Alimama_DongFangDaKai_Regular.woff2) format("woff2"),
        url(./assets/light/font-Alimama_DongFangDaKai_Regular.woff) format("woff"),
        url(./assets/light/font-Alimama_DongFangDaKai_Regular.ttf) format("truetype");
}

* {
    --color-light-yellow: #f7f2dd;
    --color-red: #af272f;
    --color-pink: #e1bbb4;
    --color-yellow: #d9c756;
    --color-black: #3d3d3d;
}

*:focus {
    outline: none;
}

body {
    margin: 0;
    overflow: hidden;
    /* transform: translate3d(0, 0, 0); */
    cursor: url(./assets/light/hot-zone-cursor-2.svg) 0.6 14.8, pointer;
}

a {
    text-decoration: none;
    user-select: none;
}

.specialCursor {
    cursor: url(./assets/light/login-cursor.svg) 0.8 8.7, pointer;
}

#projection {
    transform-origin: left top;
}

/* MARK: - HotZoneModule */
#hotZoneModule {
    position: absolute;
    top: 0;
    left: 0;

    /* TODO: TBD */
    width: 200px;
    height: 143px;

    z-index: 999;
}

#hotZone {
    width: 100%;
    height: 100%;
}

#hotZone > div {
    width: 100%;
    height: 100%;
}

/* MARK: - LoginModule */
#loginModule {
    display: none;

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0.0;

    transition: transform 1.0s;
}

#loginModule .fullscreen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

#loginModule div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#loginModule > div:not(.curtain) {
    opacity: 0.0;
}

#loginModuleBackground {
    background-color: var(--color-light-yellow);
}

/* background pattern */
#loginModuleBackground > div:nth-child(1) {
    background-image: url(./assets/light/login-background-pattern.svg);
    opacity: 0.06;
    filter: saturate(0.5) blur(1.2px);
}

/* auspicious clouds */
#loginModuleBackground > div:nth-child(2) {
    background-image: url(./assets/light/login-foreground-1.png);
    opacity: 0.15;
}

/* background mountains */
#loginModuleBackground > div:nth-child(3) {
    background-image: url(./assets/light/login-background-mountains.png);
    opacity: 0.6;
    filter: blur(0.5px);
}

#loginModuleForeground > .calligraphy {
    position: absolute;
}

/* calligraphy */
#loginModuleForeground > div:nth-child(1) {
    width: 100px;
    height: 200px;

    top: 10vh;
    left: auto;
    right: 12vw;

    /* filter: saturate(2.0) blur(0.2px) hue-rotate(-5deg); */
    filter: saturate(0.3) blur(0.2px);
    background-image: url(./assets/light/login-foreground-calligraphy.webp);
    opacity: 0.0;
}

/* calligraphy-1 */
#loginModuleForeground > div:nth-child(2) {
    width: 80px;
    height: 160px;

    top: 40vh;
    left: auto;
    right: 30vw;

    filter: brightness(0.1) opacity(0.8) blur(0.2px);
    background-image: url(./assets/light/login-foreground-calligraphy-1.webp);
    opacity: 0.0;
}

/* calligraphy-2 */
#loginModuleForeground > div:nth-child(3) {
    width: 60px;
    height: 120px;

    top: 20vh;
    left: auto;
    right: 72vw;

    filter: brightness(0.1) opacity(0.8) blur(0.2px);
    background-image: url(./assets/light/login-foreground-calligraphy-2.webp);
    opacity: 0.0;
}

/* calligraphy-3 */
#loginModuleForeground > div:nth-child(4) {
    width: 80px;
    height: 160px;

    top: 70vh;
    left: auto;
    right: 80vw;

    filter: saturate(0.3) blur(0.2px);
    background-image: url(./assets/light/login-foreground-calligraphy-3.webp);
    opacity: 0.0;
}

/* pavilion */
#loginModuleForeground > div:nth-child(5) {
    background-size: contain;
    background-image: url(./assets/light/login-foreground-pavilion.png);
    transform: scale(0.7);
    opacity: 0.8;
}

/* left cloud */
#loginModule > #loginLeftCurtain {
    background-image: url(./assets/light/login-foreground-cloud-left.png);
    z-index: 100;
}

/* right cloud */
#loginModule > #loginRightCurtain {
    background-image: url(./assets/light/login-foreground-cloud-right.png);
    z-index: 100;
}

/* login dialog */
#loginDialog {
    opacity: 0.0;
}

#loginDialog > div {
    margin-top: 10vh;
}

#loginDialogBackground {
    background-size: contain !important;
    background-image: url(./assets/light/login-dialog-background.png);
    transform: scale(0.5);
    opacity: 0.8;
}

#loginComponents {
    position: relative;
    top: 27.5%;
    left: 37.5%;

    width: 25%;
    height: 25%;

    z-index: 1000;
}

#loginComponents > form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;

    position: absolute;
    top: 20%;

    width: 100%;
    height: 100%;

    font-family: "DaKai";
    letter-spacing: 0.1rem;
}

#loginComponents > form > div {
    display: flex;
    flex-direction: column;

    width: 66%;
}

#loginComponents > form > div:has(input) {
    border-radius: 8px;

    background-image: url(./assets/light/login-background-pattern.svg);
    background-size: 300%;
}

#loginComponents > form > div > input {
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: 0.1rem;

    color: var(--color-black);
    background-color: rgba(255, 255, 255, 0.9);

    border-radius: inherit;
    padding: 0.4rem 0.8rem 0.4rem 0.8rem;

    transition: filter 0.5s;
}

#loginComponents > form > div > input:focus {
    filter: saturate(2.0);
}

#loginComponents > form > div > input[name="username"] {
    caret-color: var(--color-yellow);
    border: 3px solid var(--color-yellow);
}

#loginComponents > form > div > input[name="username"]::selection {
    background: var(--color-yellow);
}

#loginComponents > form > div > input[name="username"]::placeholder {
    color: var(--color-yellow);
    opacity: 0.7;
}

#loginComponents > form > div:has(input[name="username"])::before {
    content: "";
    display: block;
    width: 2.5rem;
    aspect-ratio: 1;

    position: absolute;
    transform: translate(-50%, -50%);

    background: linear-gradient(to bottom, var(--color-red) 60%, rgba(255, 255, 255, 0.6));
    border-radius: 50%;
    filter: blur(0.3px);

    z-index: -1;
}

#loginComponents > form > div > input[name="password"] {
    caret-color: var(--color-pink);
    border: 3px solid var(--color-pink);
}

#loginComponents > form > div > input[name="password"]::selection {
    background: var(--color-pink);
}

#loginComponents > form > div > input[name="password"]::placeholder {
    color: var(--color-pink);
    opacity: 0.7;
}

#loginComponents > form > span {
    display: block;
    width: 66%;

    margin-top: -10px;

    font-size: 0.9rem;
    text-align: right;
}

#loginComponents > form > span > a, 
#loginComponents > form > span > a:visited {
    color: var(--color-red);
    transition: filter 0.5s;
}

#loginComponents > form > span > a:hover {
    filter: saturate(1.3);
}

#loginConfirmButton {
    display: block !important;

    max-width: 36%;
    height: 2.2rem;

    border-radius: 6px;

    background-color: var(--color-red);

    overflow: hidden;

    transition: filter 0.5s;
}

#loginConfirmButton:hover {
    filter: saturate(1.2);
}

#loginConfirmButton > div {
    position: relative;

    width: 100%;
    height: 100%;

    background-image: url(./assets/light/login-background-pattern.svg);
    background-size: 400%;

    opacity: 0.3;
}

#loginConfirmButton > img {
    position: relative;
    width: 80%;
    height: 80%;

    transform: translate(12.5%, -112.5%) scale(0.8);

    filter: saturate(0.8) brightness(0.98);

    transition: filter 0.8s;
}

#loginConfirmButton:hover > img {
    filter: saturate(0.8) brightness(0.98) drop-shadow(0 0 2.5px var(--color-yellow));
}


#transitionBackground {
    display: none;

    position: absolute;
    top: 0;
    right: 0;

    width: 200vw;
    height: 100vh;

    background-color: var(--color-light-yellow);

    opacity: 0.0;

    z-index: -1000;
}

#transitionBackground > div:nth-child(1) {
    position: relative;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    background-image: url(./assets/light/transition-background-reels.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 95%;

    transform: scale(1.3);
    transform-origin: 75% 50%;

    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));

    transition: transform 1.0s;
}

#transitionBackground > div:nth-child(2) {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url(./assets/light/login-background-pattern.svg);
    background-repeat: repeat;
    background-size: 60%;

    opacity: 0.08;

    z-index: -997;
}

#roadmapModule {
    display: none;

    position: absolute;
    top: 0;
    right: 100%;

    width: 100%;
    height: 100%;

    background-color: var(--color-light-yellow);

    overflow: hidden;

    transform-origin: right center;

    transition: transform 1.0s;
}