/* ============================================================
   MACKAYE BARBER SHOP & SALON
   AUTHENTICATION PAGE
   PINK / ROSE / CREAM LUXURY
   SLIDING LOGIN / SIGN UP
   RESPONSIVE VERSION
   ============================================================ */


/* ============================================================
   COLOR SYSTEM
   ============================================================ */

   :root {
    --pink: #F9CDC4;
    --pink-light: #FFE4DE;
    --pink-bright: #F28FA3;
    --pink-dark: #D96F88;

    --rose: #A94F6B;
    --rose-dark: #7D354F;

    --champagne: #F6D6B8;

    --cream: #FFF9F7;
    --cream-soft: #FFF1EE;

    --plum: #351D28;
    --plum-soft: #563642;

    --white: #FFFFFF;

    --muted: #806872;

    --border: rgba(169, 79, 107, 0.14);
    --pink-border: rgba(242, 143, 163, 0.30);
    --rose-border: rgba(169, 79, 107, 0.25);

    --pink-glow: rgba(242, 143, 163, 0.30);
    --rose-glow: rgba(169, 79, 107, 0.20);
}


/* ============================================================
   RESET
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   HTML
   ============================================================ */

html {
    width: 100%;
    min-height: 100%;
}


/* ============================================================
   BODY
   ============================================================ */

body {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--plum);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-font-smoothing: antialiased;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(249, 205, 196, 0.55),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(246, 214, 184, 0.32),
            transparent 27%
        ),
        radial-gradient(
            circle at 50% 55%,
            rgba(242, 143, 163, 0.08),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 92%,
            rgba(242, 143, 163, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFF9F7 0%,
            #FFF3F0 48%,
            #FFEDE9 100%
        );
}


/* ============================================================
   LIGHT DIAGONAL DECORATION
   ============================================================ */

body::before {
    content: "";

    position: fixed;

    width: 70%;
    height: 160%;

    top: -30%;
    left: -80%;

    pointer-events: none;
    z-index: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 45%,
            rgba(242, 143, 163, 0.025) 48%,
            rgba(242, 143, 163, 0.07) 50%,
            rgba(242, 143, 163, 0.025) 52%,
            transparent 55%,
            transparent 100%
        );

    transform: rotate(18deg);

    animation:
        pinkBeamMove
        18s
        ease-in-out
        infinite;
}


/* ============================================================
   PINK ATMOSPHERE ORB
   ============================================================ */

body::after {
    content: "";

    position: fixed;

    width: 600px;
    height: 600px;

    right: -290px;
    bottom: -300px;

    border-radius: 50%;

    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            circle,
            rgba(242, 143, 163, 0.16) 0%,
            rgba(249, 205, 196, 0.10) 28%,
            rgba(169, 79, 107, 0.04) 48%,
            transparent 72%
        );

    animation:
        pinkOrbMove
        16s
        ease-in-out
        infinite
        alternate;
}


/* ============================================================
   MOVING PINK BEAM
   ============================================================ */

@keyframes pinkBeamMove {
    0% {
        transform:
            translateX(-15%)
            rotate(18deg);
        opacity: 0.20;
    }

    50% {
        transform:
            translateX(65%)
            rotate(18deg);
        opacity: 0.45;
    }

    100% {
        transform:
            translateX(150%)
            rotate(18deg);
        opacity: 0.15;
    }
}


/* ============================================================
   MOVING PINK ORB
   ============================================================ */

@keyframes pinkOrbMove {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
        opacity: 0.50;
    }

    50% {
        transform:
            translate3d(-70px, -50px, 0)
            scale(1.05);
        opacity: 0.68;
    }

    100% {
        transform:
            translate3d(-140px, -90px, 0)
            scale(0.96);
        opacity: 0.55;
    }
}


/* ============================================================
   AUTH CARD
   ============================================================ */

.auth-card {
    position: relative;

    width:
        min(
            1100px,
            calc(100% - 40px)
        );

    height: 650px;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 249, 247, 0.98)
        );

    border:
        1px solid
        rgba(169, 79, 107, 0.15);

    border-radius: 28px;

    overflow: hidden;
    isolation: isolate;

    box-shadow:
        0 30px 80px
        rgba(169, 79, 107, 0.666),
        0 0 45px
        rgba(242, 143, 163, 0.585),
        inset 0 1px 0
        rgba(255, 255, 255, 0.90);

    animation:
        cardFadeIn
        0.8s
        cubic-bezier(.2, .8, .2, 1)
        both;

    transform-style: preserve-3d;

    --rotate-x: 0deg;
    --rotate-y: 0deg;

    transform:
        perspective(1200px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y));
}


/* ============================================================
   MOVING TOP LINE
   ============================================================ */

.auth-card > .forms-viewport::before {
    content: "";

    position: absolute;

    top: 0;
    left: -35%;

    width: 30%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pink-bright),
            var(--rose),
            transparent
        );

    box-shadow:
        0 0 10px
        rgba(242, 143, 163, 0.35);

    z-index: 80;
    pointer-events: none;

    animation:
        authLight
        7s
        linear
        infinite;
}


/* ============================================================
   CENTER LOGO
   ============================================================ */

.logo-header {
    position: absolute;

    top:
        clamp(
            14px,
            2.5vh,
            26px
        );

    left: 50%;

    width: max-content;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    transform:
        translateX(-50%);

    z-index: 100;

    pointer-events: none;

    animation:
        logoEntrance
        0.9s
        cubic-bezier(.2, .8, .2, 1)
        0.1s
        both;
}


/* ============================================================
   LOGO ICON
   ============================================================ */

.logo-icon {
    position: relative;

    width:
        clamp(
            40px,
            4.2vw,
            52px
        );

    height:
        clamp(
            40px,
            4.2vw,
            52px
        );

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom:
        clamp(
            5px,
            0.7vw,
            8px
        );

    border-radius:
        clamp(
            11px,
            1.2vw,
            16px
        );

    color: var(--white);

    font-size:
        clamp(
            18px,
            2vw,
            23px
        );

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--pink-bright),
            var(--rose)
        );

    box-shadow:
        0 8px 22px
        rgba(242, 143, 163, 0.24);

    animation:
        logoIconFloat
        4s
        ease-in-out
        infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ============================================================
   LOGO ICON OUTLINE
   ============================================================ */

.logo-icon::before {
    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        rgba(169, 79, 107, 0.20);

    border-radius: inherit;

    pointer-events: none;

    opacity: 0.65;
}


/* ============================================================
   MACKAYE TITLE
   ============================================================ */

.logo-title {
    display: block;

    position: relative;

    color: var(--rose-dark);

    font-size:
        clamp(
            15px,
            1.8vw,
            21px
        );

    font-weight: 900;

    letter-spacing:
        clamp(
            3px,
            0.45vw,
            6px
        );

    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 3px 15px
        rgba(169, 79, 107, 0.12);
}


/* ============================================================
   TITLE PINK LINE
   ============================================================ */

.logo-title::after {
    content: "";

    display: block;

    width:
        clamp(
            60px,
            7vw,
            100px
        );

    height:
        clamp(
            1px,
            0.15vw,
            2px
        );

    margin:
        clamp(
            5px,
            0.6vw,
            7px
        )
        auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pink-bright),
            var(--rose),
            var(--pink-bright),
            transparent
        );

    border-radius: 50px;

    box-shadow:
        0 0 8px
        rgba(242, 143, 163, 0.35);
}


/* ============================================================
   LOGO SUBTITLE
   ============================================================ */

.logo-subtitle {
    position: relative;

    margin-top:
        clamp(
            6px,
            0.8vw,
            9px
        );

    color: var(--white);

    font-size:
        clamp(
            9px,
            0.72vw,
            9px
        );

    font-weight: 900;

    letter-spacing:
        clamp(
            1.5px,
            0.35vw,
            4px
        );

    text-transform: uppercase;

    padding:
        clamp(
            2px,
            0.25vw,
            3px
        )
        clamp(
            6px,
            0.8vw,
            9px
        );

    white-space: nowrap;

    background:
        linear-gradient(
            90deg,
            var(--pink-dark),
            var(--rose),
            var(--pink-bright)
        );

    border-radius:
        clamp(
            3px,
            0.4vw,
            5px
        );

    box-shadow:
        0 5px 15px
        rgba(169, 79, 107, 0.22);
}


/* ============================================================
   FORMS VIEWPORT
   ============================================================ */

.forms-viewport {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;
}


/* ============================================================
   FORMS TRACK
   ============================================================ */

.forms-track {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* ============================================================
   FORM BASE
   ============================================================ */

.form-toggle {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    padding:
        155px
        70px
        90px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    opacity: 0;

    pointer-events: none;

    z-index: 25;

    transition:
        transform 0.85s cubic-bezier(.77, 0, .18, 1),
        opacity 0.5s ease;
}


/* ============================================================
   LOGIN POSITION
   ============================================================ */

#loginForm {
    left: 0;

    transform:
        translateX(-35%)
        scale(0.97);
}


/* ============================================================
   REGISTER POSITION
   ============================================================ */

#registerForm {
    right: 0;

    transform:
        translateX(35%)
        scale(0.97);
}


/* ============================================================
   LOGIN ACTIVE
   ============================================================ */

.auth-card:not(.register-mode) #loginForm {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);
}


/* ============================================================
   REGISTER HIDDEN
   ============================================================ */

.auth-card:not(.register-mode) #registerForm {
    opacity: 0;

    pointer-events: none;

    transform:
        translateX(18%)
        scale(0.97);
}


/* ============================================================
   REGISTER ACTIVE
   ============================================================ */

.auth-card.register-mode #registerForm {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);
}


/* ============================================================
   LOGIN HIDDEN
   ============================================================ */

.auth-card.register-mode #loginForm {
    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-18%)
        scale(0.97);
}


/* ============================================================
   ACTIVE FORM
   ============================================================ */

.form-toggle.active {
    filter: none;
}


/* ============================================================
   FORM HEADINGS
   ============================================================ */

#loginForm::before,
#registerForm::before {
    position: absolute;

    top: 105px;
    left: 130px;

    color: var(--rose-dark);

    font-size:
        clamp(
            22px,
            2.3vw,
            28px
        );

    font-weight: 800;

    letter-spacing:
        clamp(
            0.7px,
            0.12vw,
            1.5px
        );

    pointer-events: none;
}


#loginForm::before {
    content: "WELCOME BACK";
}


#registerForm::before {
    content: "CREATE ACCOUNT";
}


/* ============================================================
   FORM GROUP
   ============================================================ */

.form-group {
    position: relative;

    width: 100%;

    margin-bottom: 20px;

    animation:
        fieldEntrance
        0.65s
        cubic-bezier(.2, .8, .2, 1)
        both;
}


/* ============================================================
   FORM STAGGER
   ============================================================ */

.form-toggle.active .form-group:nth-of-type(1) {
    animation-delay: 0.08s;
}

.form-toggle.active .form-group:nth-of-type(2) {
    animation-delay: 0.16s;
}

.form-toggle.active .form-group:nth-of-type(3) {
    animation-delay: 0.24s;
}

.form-toggle.active .form-group:nth-of-type(4) {
    animation-delay: 0.32s;
}


/* ============================================================
   LABEL
   ============================================================ */

.form-group label {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(86, 54, 66, 0.72);

    font-size:
        clamp(
            10px,
            0.8vw,
            11px
        );

    font-weight: 600;

    letter-spacing:
        clamp(
            0.6px,
            0.08vw,
            0.8px
        );

    text-transform: uppercase;

    transition:
        color 0.3s ease;
}


/* ============================================================
   INPUTS
   ============================================================ */

.form-group input,
.form-group select {
    width: 100%;

    height:
        clamp(
            47px,
            4.5vw,
            50px
        );

    padding:
        0
        clamp(
            13px,
            1.4vw,
            16px
        );

    color: var(--plum);

    background:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid
        rgba(169, 79, 107, 0.16);

    border-radius:
        clamp(
            10px,
            1vw,
            12px
        );

    outline: none;

    font-family: inherit;

    font-size:
        clamp(
            12px,
            1.1vw,
            13px
        );

    box-shadow:
        0 5px 15px
        rgba(169, 79, 107, 0.045);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* ============================================================
   PLACEHOLDER
   ============================================================ */

.form-group input::placeholder {
    color:
        rgba(86, 54, 66, 0.38);
}


/* ============================================================
   SELECT OPTIONS
   ============================================================ */

.form-group select option {
    background: var(--cream);
    color: var(--plum);
}


/* ============================================================
   INPUT FOCUS
   ============================================================ */

.form-group input:focus,
.form-group select:focus {
    border-color:
        rgba(242, 143, 163, 0.85);

    background:
        rgba(255, 249, 247, 0.98);

    box-shadow:
        0 0 0 3px
        rgba(242, 143, 163, 0.10),
        0 8px 25px
        rgba(169, 79, 107, 0.10);

    transform:
        translateY(-2px);
}


/* ============================================================
   LABEL FOCUS
   ============================================================ */

.form-group:focus-within label {
    color: var(--rose);
}


/* ============================================================
   PINK INPUT LINE
   ============================================================ */

.form-group::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--pink-dark),
            var(--pink-bright),
            var(--rose)
        );

    box-shadow:
        0 0 10px
        rgba(242, 143, 163, 0.30);

    transition:
        width 0.4s
        cubic-bezier(.2, .8, .2, 1);
}


.form-group:focus-within::after {
    width: 80%;
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.btn-submit {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            49px,
            4.8vw,
            52px
        );

    margin-top: 4px;

    border: none;

    border-radius:
        clamp(
            11px,
            1vw,
            13px
        );

    color: var(--white);

    background:
        linear-gradient(
            110deg,
            var(--pink-dark),
            var(--pink-bright),
            var(--rose)
        );

    font-family: inherit;

    font-size:
        clamp(
            12px,
            1.1vw,
            13px
        );

    font-weight: 800;

    letter-spacing:
        clamp(
            0.5px,
            0.08vw,
            0.7px
        );

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 10px 28px
        rgba(169, 79, 107, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}


/* ============================================================
   BUTTON SHINE
   ============================================================ */

.btn-submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.50),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.65s ease;
}


.btn-submit:hover::before {
    left: 150%;
}


/* ============================================================
   BUTTON HOVER
   ============================================================ */

.btn-submit:hover {
    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 15px 35px
        rgba(169, 79, 107, 0.28);

    filter: brightness(1.04);
}


.btn-submit:active {
    transform:
        translateY(-1px)
        scale(0.99);
}


/* ============================================================
   TAB CONTAINER
   ============================================================ */

.tab-buttons {
    position: absolute;

    left: 50%;

    bottom:
        clamp(
            18px,
            2.5vh,
            25px
        );

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 5px;

    background:
        rgba(255, 255, 255, 0.90);

    border:
        1px solid
        rgba(169, 79, 107, 0.14);

    border-radius: 14px;

    z-index: 100;

    box-shadow:
        0 10px 28px
        rgba(169, 79, 107, 0.11);
}


/* ============================================================
   TAB BUTTON
   ============================================================ */

.tab-btn {
    min-width:
        clamp(
            80px,
            9vw,
            95px
        );

    height:
        clamp(
            34px,
            3.8vw,
            38px
        );

    padding:
        0
        clamp(
            13px,
            1.5vw,
            18px
        );

    border: none;

    border-radius: 10px;

    color:
        rgba(86, 54, 66, 0.58);

    background: transparent;

    font-family: inherit;

    font-size:
        clamp(
            9px,
            1vw,
            11px
        );

    font-weight: 700;

    letter-spacing:
        clamp(
            0.5px,
            0.08vw,
            0.7px
        );

    cursor: pointer;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.tab-btn:hover {
    color: var(--rose-dark);

    background:
        rgba(249, 205, 196, 0.45);

    transform:
        translateY(-2px);
}


/* ============================================================
   ACTIVE TAB
   ============================================================ */

.tab-btn.active {
    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--pink-bright),
            var(--rose)
        );

    box-shadow:
        0 5px 18px
        rgba(169, 79, 107, 0.25);
}


/* ============================================================
   PINK SLIDING PANEL
   ============================================================ */

.auth-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    z-index: 10;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            var(--pink-dark),
            var(--pink),
            var(--pink-bright),
            var(--rose)
        );

    clip-path:
        polygon(
            0% 0,
            100% 0,
            100% 100%,
            35% 100%
        );

    transform:
        translateX(0);

    transition:
        transform 0.9s cubic-bezier(.77, 0, .18, 1),
        clip-path 0.9s cubic-bezier(.77, 0, .18, 1);
}


/* ============================================================
   REGISTER PINK PANEL
   ============================================================ */

.auth-card.register-mode::after {
    transform:
        translateX(-100%);

    clip-path:
        polygon(
            0 0,
            65% 0,
            100% 100%,
            0 100%
        );
}


/* ============================================================
   PINK PLATE TEXT
   ============================================================ */

.auth-card::before {
    content:
        "✦  WELCOME BACK  ✦\A\A"
        "Good to see you again.";

    white-space: pre-line;

    position: absolute;

    top: 40%;
    right: 1.5%;

    width: 44%;

    transform:
        translateY(-50%);

    color: var(--rose-dark);

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            14px,
            1.45vw,
            21px
        );

    font-weight: 700;

    line-height: 1.8;

    letter-spacing:
        clamp(
            1px,
            0.15vw,
            2.5px
        );

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.35),
        0 3px 10px
        rgba(169, 79, 107, 0.10);

    z-index: 20;

    pointer-events: none;

    transition:
        right 0.9s cubic-bezier(.77, 0, .18, 1),
        left 0.9s cubic-bezier(.77, 0, .18, 1),
        transform 0.9s cubic-bezier(.2, .8, .2, 1),
        opacity 0.5s ease;
}


/* ============================================================
   REGISTER PLATE TEXT
   ============================================================ */

.auth-card.register-mode::before {
    content:
        "✦  JOIN MACKAYE  ✦\A\A"
        "Create your account and\A"
        "enjoy the Mackaye experience.";

    right: auto;
    left: 0.5%;

    top: 70%;

    transform:
        translateY(-50%);
}


/* ============================================================
   DECORATIVE SCISSORS
   ============================================================ */

.auth-card .forms-viewport::after {
    content: "✂";

    position: absolute;

    right: 5%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-25deg);

    font-size:
        clamp(
            90px,
            11vw,
            130px
        );

    line-height: 1;

    color:
        rgba(125, 53, 79, 0.07);

    z-index: 15;

    pointer-events: none;

    animation:
        scissorsFloat
        6s
        ease-in-out
        infinite;
}


/* ============================================================
   REGISTER SCISSORS
   ============================================================ */

.auth-card.register-mode .forms-viewport::after {
    right: auto;
    left: 5%;
}


/* ============================================================
   ALERT
   ============================================================ */

.alert {
    position: absolute;

    top:
        clamp(
            88px,
            9vh,
            92px
        );

    left: 50%;

    transform:
        translateX(-50%);

    width:
        min(
            500px,
            80%
        );

    padding:
        11px 16px;

    border-radius: 10px;

    text-align: center;

    font-size:
        clamp(
            10px,
            1vw,
            11px
        );

    font-weight: 600;

    z-index: 150;

    animation:
        alertEntrance
        0.5s
        cubic-bezier(.2, .8, .2, 1)
        both;
}


/* ============================================================
   SUCCESS
   ============================================================ */

.alert-success {
    color: var(--rose-dark);

    background:
        rgba(249, 205, 196, 0.42);

    border:
        1px solid
        rgba(169, 79, 107, 0.25);

    box-shadow:
        0 8px 25px
        rgba(169, 79, 107, 0.08);
}


/* ============================================================
   ERROR
   ============================================================ */

.alert-error {
    color: #A33F52;

    background:
        rgba(255, 220, 224, 0.78);

    border:
        1px solid
        rgba(190, 70, 90, 0.25);

    box-shadow:
        0 8px 22px
        rgba(190, 70, 90, 0.08);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform:
            perspective(1200px)
            rotateX(2deg)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            perspective(1200px)
            rotateX(var(--rotate-x))
            rotateY(var(--rotate-y))
            scale(1);
    }
}


@keyframes logoEntrance {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-20px)
            scale(0.85);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


@keyframes logoIconFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(-3deg);
    }
}


@keyframes fieldEntrance {
    from {
        opacity: 0;

        transform:
            translateY(16px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes authLight {
    0% {
        left: -35%;
    }

    50% {
        left: 110%;
    }

    100% {
        left: 110%;
    }
}


@keyframes scissorsFloat {
    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(-25deg);
    }

    50% {
        transform:
            translateY(calc(-50% - 12px))
            rotate(-18deg);
    }
}


@keyframes alertEntrance {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-10px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .auth-card {
        width:
            calc(100% - 30px);

        height: 620px;

        border-radius: 24px;
    }

    .form-toggle {
        padding:
            150px
            45px
            80px;
    }

    #loginForm::before,
    #registerForm::before {
        left: 45px;
        top: 103px;

        font-size:
            clamp(
                20px,
                3vw,
                27px
            );
    }

    .auth-card::before {
        width: 43%;
        right: 4%;

        font-size:
            clamp(
                13px,
                1.7vw,
                18px
            );

        line-height: 1.7;

        letter-spacing:
            clamp(
                0.8px,
                0.15vw,
                2px
            );
    }

    .auth-card.register-mode::before {
        left: 4%;
        right: auto;
    }

    .logo-header {
        top: 18px;
    }

    .form-group {
        margin-bottom: 17px;
    }

    .auth-card .forms-viewport::after {
        font-size: 105px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    body {
        align-items: flex-start;

        padding:
            12px 0;
    }

    .auth-card {
        width:
            calc(100% - 24px);

        height: 720px;

        border-radius: 22px;
    }


    /* --------------------------------------------------------
       PINK PANEL
       -------------------------------------------------------- */

    .auth-card::after {
        top: 0;
        right: 0;

        width: 100%;
        height: 31%;

        transform:
            translateX(0);

        clip-path:
            polygon(
                0 0,
                100% 0,
                96% 100%,
                4% 100%
            );
    }

    .auth-card.register-mode::after {
        transform:
            translateX(0);

        clip-path:
            polygon(
                0 0,
                100% 0,
                96% 100%,
                4% 100%
            );
    }


    /* --------------------------------------------------------
       PINK PLATE TEXT
       -------------------------------------------------------- */

    .auth-card::before {
        top: 16%;

        left: 0;
        right: 0;

        width: 100%;

        padding:
            0 25px;

        transform:
            translateY(-50%);

        font-size:
            clamp(
                13px,
                3.6vw,
                18px
            );

        line-height: 1.55;

        letter-spacing:
            clamp(
                0.7px,
                0.3vw,
                1.8px
            );

        color: var(--rose-dark);
    }

    .auth-card.register-mode::before {
        left: 0;
        right: 0;

        transform:
            translateY(-50%);
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    .logo-header {
        top: 14px;
    }

    .logo-icon {
        width:
            clamp(
                38px,
                11vw,
                47px
            );

        height:
            clamp(
                38px,
                11vw,
                47px
            );

        font-size:
            clamp(
                17px,
                5vw,
                21px
            );
    }

    .logo-title {
        font-size:
            clamp(
                13px,
                4vw,
                18px
            );

        letter-spacing:
            clamp(
                2px,
                1vw,
                4px
            );
    }

    .logo-subtitle {
        margin-top: 5px;

        font-size:
            clamp(
                5px,
                1.7vw,
                7px
            );

        letter-spacing:
            clamp(
                1px,
                0.7vw,
                2.5px
            );

        padding:
            2px 6px;
    }


    /* --------------------------------------------------------
       FORMS
       -------------------------------------------------------- */

    .form-toggle {
        top: 0;
        bottom: 0;

        width: 100%;

        padding:
            245px
            28px
            80px;
    }

    #loginForm {
        left: 0;

        transform:
            translateX(-20%)
            scale(0.98);
    }

    #registerForm {
        right: 0;

        transform:
            translateX(20%)
            scale(0.98);
    }

    .auth-card:not(.register-mode) #registerForm {
        transform:
            translateX(15%)
            scale(0.98);
    }

    .auth-card.register-mode #loginForm {
        transform:
            translateX(-15%)
            scale(0.98);
    }


    /* --------------------------------------------------------
       FORM HEADINGS
       -------------------------------------------------------- */

    #loginForm::before,
    #registerForm::before {
        top: 210px;

        left: 28px;
        right: 28px;

        text-align: center;

        font-size:
            clamp(
                20px,
                6vw,
                26px
            );

        letter-spacing:
            clamp(
                0.7px,
                0.2vw,
                1.5px
            );
    }


    /* --------------------------------------------------------
       FORM GROUP
       -------------------------------------------------------- */

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        margin-bottom: 7px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       INPUT
       -------------------------------------------------------- */

    .form-group input,
    .form-group select {
        height: 48px;

        font-size: 13px;

        border-radius: 11px;
    }


    /* --------------------------------------------------------
       BUTTON
       -------------------------------------------------------- */

    .btn-submit {
        min-height: 49px;

        margin-top: 2px;

        border-radius: 11px;
    }


    /* --------------------------------------------------------
       TABS
       -------------------------------------------------------- */

    .tab-buttons {
        bottom: 17px;

        gap: 4px;

        padding: 4px;

        border-radius: 12px;
    }

    .tab-btn {
        min-width: 82px;

        height: 35px;

        padding:
            0 12px;

        font-size: 10px;

        border-radius: 9px;
    }


    /* --------------------------------------------------------
       SCISSORS
       -------------------------------------------------------- */

    .auth-card .forms-viewport::after {
        display: none;
    }


    /* --------------------------------------------------------
       ALERT
       -------------------------------------------------------- */

    .alert {
        top: 102px;

        width: 86%;

        padding:
            9px 12px;

        font-size: 10px;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    body {
        padding:
            8px 0;
    }

    .auth-card {
        width:
            calc(100% - 16px);

        height: 700px;

        border-radius: 19px;
    }


    /* --------------------------------------------------------
       PINK PANEL
       -------------------------------------------------------- */

    .auth-card::after {
        height: 30%;

        clip-path:
            polygon(
                0 0,
                100% 0,
                94% 100%,
                6% 100%
            );
    }


    /* --------------------------------------------------------
       PINK TEXT
       -------------------------------------------------------- */

    .auth-card::before {
        top: 15%;

        padding:
            0 20px;

        font-size:
            clamp(
                11px,
                3.8vw,
                15px
            );

        line-height: 1.5;

        letter-spacing: 0.6px;
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    .logo-header {
        top: 11px;
    }

    .logo-icon {
        width: 37px;
        height: 37px;

        font-size: 16px;

        border-radius: 10px;

        margin-bottom: 4px;
    }

    .logo-icon::before {
        inset: -3px;
    }

    .logo-title {
        font-size: 12px;

        letter-spacing: 2.2px;
    }

    .logo-title::after {
        width: 55px;

        height: 1px;

        margin-top: 5px;
    }

    .logo-subtitle {
        margin-top: 5px;

        font-size: 5px;

        letter-spacing: 1px;

        padding:
            2px 5px;

        border-radius: 3px;
    }


    /* --------------------------------------------------------
       FORM
       -------------------------------------------------------- */

    .form-toggle {
        padding:
            225px
            20px
            72px;
    }

    #loginForm::before,
    #registerForm::before {
        top: 194px;

        left: 20px;
        right: 20px;

        font-size:
            clamp(
                18px,
                6vw,
                23px
            );
    }


    /* --------------------------------------------------------
       INPUT
       -------------------------------------------------------- */

    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 9px;

        margin-bottom: 6px;
    }

    .form-group input,
    .form-group select {
        height: 46px;

        padding:
            0 13px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       BUTTON
       -------------------------------------------------------- */

    .btn-submit {
        min-height: 47px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       TABS
       -------------------------------------------------------- */

    .tab-buttons {
        bottom: 13px;
    }

    .tab-btn {
        min-width: 76px;

        height: 33px;

        font-size: 9px;

        padding:
            0 10px;
    }


    /* --------------------------------------------------------
       ALERT
       -------------------------------------------------------- */

    .alert {
        top: 88px;

        width: 90%;

        font-size: 9px;

        padding:
            8px 10px;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 360px) {

    .auth-card {
        height: 680px;
    }

    .auth-card::before {
        font-size: 11px;

        padding:
            0 15px;
    }

    .form-toggle {
        padding:
            215px
            17px
            68px;
    }

    #loginForm::before,
    #registerForm::before {
        top: 185px;

        left: 17px;
        right: 17px;

        font-size: 18px;
    }

    .logo-title {
        font-size: 11px;

        letter-spacing: 1.8px;
    }

    .logo-subtitle {
        font-size: 4.5px;

        letter-spacing: 0.8px;
    }

    .tab-btn {
        min-width: 70px;

        padding:
            0 7px;

        font-size: 8px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}