html::before, html::after {
    content: '';
    
    position: fixed;
    bottom: -200px;
    
    width: 350px;
    height: 165vh;
    
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: linear-gradient(to top, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform-origin: bottom center;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -10;
}

html::before {
    left: 45%;
    animation: sweep-left 8s ease-in-out infinite alternate;
}

html::after {
    left: 55%;
    animation: sweep-right 8s ease-in-out infinite alternate;
}

@keyframes sweep-left {
    0% {
        transform: translateX(-50%) rotate(-45deg);
    }
    
    100% {
        transform: translateX(-50%) rotate(45deg);
    }
}

@keyframes sweep-right {
    0% {
        transform: translateX(-50%) rotate(45deg);
    }
    
    100% {
        transform: translateX(-50%) rotate(-45deg);
    }
}

/* auth form */

.auth-container {
    margin: clamp(1rem, 3vw, 5rem) auto;
    padding-block: 2rem 2.5rem;
    
    width: clamp(18rem, 96vw, 550px);
    
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    
    background-color: rgba(21, 22, 16, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.37);
    border: 1px solid rgba(51, 50, 48, 0.3);
    border-radius: 1.5rem;
}

.auth-head {
    padding-inline: 1rem;
    
    display: flex;
    justify-content: flex-end;
    
    position: relative;
    top: -1rem;
}

.auth-logo {
    position: relative;
    user-select: none;
}

.auth-greeting {
    position-anchor: --auth-name;
    position: absolute;
    bottom: calc(anchor(top) - 1.75rem);
    left: calc(anchor(left) + 1.25rem);
    
    font-family: 'Birthstone', serif;
    font-size: 5.25rem;
    font-weight: bold;
    color: var(--red);
    letter-spacing: -2px;
    
    transform: rotate(-10deg);
    z-index: 10;
}

.auth-name {
    anchor-name: --auth-name;
    
    margin-inline: auto;
    width: max-content;
    
    color: var(--white);
    font-family: 'Zilla Slab', serif;
    font-size: 4rem;
    text-align: center;
}

.auth-form-container {
    padding-inline: clamp(0.5rem, 2vw, 1rem);
    
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.auth-multi-form-container {
    display: flex;
    gap: 1rem;
}

.auth-multi-form-container .auth-form:not(:first-child) {
    display: none;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    
    min-width: 100%;
    box-sizing: border-box;
}

.divided_input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.auth-form > input, .divided_input > input, .divided_input > select, .auth-btn {
    padding: 1rem;
    width: 100%;
    
    color: var(--white);
    font-family: 'Zilla Slab', serif;
    font-size: 1.25rem;
    
    background-color: rgba(21, 22, 16, 0.98);
    border: 3px solid var(--grey);
    border-radius: 1rem;
    box-sizing: border-box;
}

.auth-form > input, .divided_input > input, .divided_input > select {
    caret-color: var(--white);
}

.auth-form > input::placeholder, .divided_input > input::placeholder {
    color: var(--light-grey);
}

.auth-form > input:focus-visible, .divided_input > input:focus-visible, .divided_input > select:focus, .divided_input > select:focus-visible {
    border: 3px solid var(--red);
    outline: none;
}

.divided_input > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E9EBE0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 3rem;
}

.divided_input > select:invalid {
    color: var(--light-grey);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666460' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

.auth-btn {
    border: 3px solid var(--white);
    cursor: pointer;
    transition: all 150ms ease-in-out;
}

.auth-btn:active, .auth-btn:active {
    background-color: var(--red);
    border: 3px solid var(--red);
}

.horizontal-divider {
    height: 2px;
    width: 100%;
    background-color: var(--grey);
}

.auth-info {
    padding-inline-end: 0.35rem;
    
    text-align: right;
    color: var(--light-grey);
    font-family: 'Zilla Slab', serif;
    font-size: 1.1rem;
}

.vertical-divider {
    width: 2px;
    background-color: var(--grey);
}

.auth-actions {
    margin-inline: auto;
    width: 100%;
    
    display: flex;
    justify-content: center;
    gap: 1rem;
    
    color: var(--white);
    font-family: 'Zilla Slab', serif;
    font-size: 1.15rem;
}

.slide-over {
    animation: slide-over 0.4s ease-in-out forwards;
}

@keyframes slide-over {
    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(calc(-100% - 1rem));
    }
}