/* ==========================
   CSS VARIABLES
========================== */

:root{
    --cream:#FFF8F0;
    --pink:#FFD6E0;
    --rose:#FF8FAB;
    --brown:#8B5E3C;
    --accent:#A78BFA;
    --accent2:#FCD34D;
    --text:#3D2B1F;
    --sub:#9B7B6A;
    --white:#ffffff;

    --shadow:
    0 8px 32px rgba(139,94,60,.13);

    --radius:24px;

    --transition:
    .35s cubic-bezier(.4,0,.2,1);
}

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

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

body{
    font-family:'Nunito',sans-serif;

    min-height:100vh;

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

    overflow:hidden;
    position:relative;

    background:var(--cream);
}

/* ==========================
   PROGRESS BAR
========================== */

.progress-bar{
    position:fixed;

    top:0;
    left:0;

    width:0%;
    height:4px;

    z-index:9999;

    background:
    linear-gradient(
    90deg,
    var(--rose),
    var(--accent)
    );

    transition:.4s;
}

/* ==========================
   TOAST
========================== */

.toast{
    position:fixed;

    top:20px;
    left:50%;

    transform:
    translateX(-50%)
    translateY(-100px);

    padding:14px 28px;

    border-radius:50px;

    color:white;
    font-weight:800;

    background:
    linear-gradient(
    135deg,
    #6EE7B7,
    #3B82F6
    );

    transition:.5s;

    z-index:999;
}

.toast.show{
    transform:
    translateX(-50%)
    translateY(0);
}

/* ==========================
   FLOATING BUBBLES
========================== */

.bg-bubbles{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.bubble{
    position:absolute;
    border-radius:50%;

    opacity:.18;

    animation:
    floatUp linear infinite;
}

.bubble:nth-child(1){
    width:80px;
    height:80px;
    left:10%;
    background:var(--rose);
    animation-duration:9s;
}

.bubble:nth-child(2){
    width:60px;
    height:60px;
    left:25%;
    background:var(--accent);
    animation-duration:12s;
}

.bubble:nth-child(3){
    width:110px;
    height:110px;
    left:55%;
    background:var(--pink);
    animation-duration:10s;
}

.bubble:nth-child(4){
    width:40px;
    height:40px;
    left:75%;
    background:var(--accent2);
    animation-duration:14s;
}

.bubble:nth-child(5){
    width:70px;
    height:70px;
    left:88%;
    background:var(--rose);
    animation-duration:8s;
}

.bubble:nth-child(6){
    width:50px;
    height:50px;
    left:40%;
    background:var(--accent);
    animation-duration:11s;
}

.bubble:nth-child(7){
    width:90px;
    height:90px;
    left:5%;
    background:var(--pink);
    animation-duration:13s;
}

@keyframes floatUp{

    0%{
        transform:
        translateY(110vh)
        scale(.7);

        opacity:0;
    }

    10%{
        opacity:.18;
    }

    90%{
        opacity:.18;
    }

    100%{
        transform:
        translateY(-10vh)
        scale(1.1);

        opacity:0;
    }
}

/* ==========================
   FLOATING EMOJIS
========================== */

.floating-emojis{
    position:fixed;
    inset:0;
    pointer-events:none;
}

.emoji-float{
    position:absolute;
    font-size:2rem;

    animation:
    emojiFloat ease-in-out infinite;
}

.emoji-float:nth-child(1){
    top:10%;
    left:5%;
    animation-duration:5s;
}

.emoji-float:nth-child(2){
    top:20%;
    right:8%;
    animation-duration:6s;
}

.emoji-float:nth-child(3){
    top:75%;
    left:6%;
    animation-duration:7s;
}

.emoji-float:nth-child(4){
    top:80%;
    right:5%;
    animation-duration:5s;
}

.emoji-float:nth-child(5){
    top:40%;
    left:2%;
    animation-duration:8s;
}

.emoji-float:nth-child(6){
    top:55%;
    right:3%;
    animation-duration:6s;
}

.emoji-float:nth-child(7){
    top:30%;
    left:92%;
    animation-duration:7s;
}

.emoji-float:nth-child(8){
    top:65%;
    left:94%;
    animation-duration:5s;
}

@keyframes emojiFloat{

    0%,100%{
        transform:
        translateY(0)
        rotate(-8deg);
    }

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

/* ==========================
   CARD WRAPPER
========================== */

.card-wrapper{
    position:relative;
    z-index:10;

    width:min(480px,95vw);
}

.card{

    background:white;

    padding:2.5rem 2.3rem;

    border-radius:36px;

    box-shadow:
    0 4px 0 6px var(--pink),
    0 10px 0 10px rgba(255,143,171,.25),
    var(--shadow);

    animation:
    cardPop .7s
    cubic-bezier(.34,1.56,.64,1);
}

@keyframes cardPop{

    from{
        opacity:0;
        transform:
        scale(.8)
        translateY(40px);
    }

    to{
        opacity:1;
        transform:
        scale(1)
        translateY(0);
    }
}

/* ==========================
   TEDDY SVG
========================== */

.mascot{
    display:flex;
    justify-content:center;

    margin-bottom:15px;
}

.mascot svg{
    width:110px;

    animation:
    teddyBounce 2.5s
    ease-in-out infinite;
}

@keyframes teddyBounce{

    0%,100%{
        transform:
        translateY(0)
        rotate(-3deg);
    }

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

.bear-eye{
    animation:
    blink 4s infinite;
}

@keyframes blink{

    0%,90%,100%{
        transform:scaleY(1);
    }

    95%{
        transform:scaleY(.1);
    }
}
/* ==========================
   LOGIN / SIGNUP TABS
========================== */

.tab-group{
    display:flex;
    gap:5px;

    background:var(--cream);

    padding:5px;

    border-radius:50px;

    margin-bottom:25px;
}

.tab-btn{
    flex:1;

    border:none;

    padding:12px;

    border-radius:50px;

    cursor:pointer;

    background:transparent;

    color:var(--sub);

    font-family:'Fredoka One',cursive;

    transition:var(--transition);
}

.tab-btn.active{

    background:var(--rose);

    color:white;

    box-shadow:
    0 4px 12px
    rgba(255,143,171,.4);
}

.tab-btn:hover{
    background:var(--pink);
}

/* ==========================
   PANELS
========================== */

.panel{
    display:none;
}

.panel.active{
    display:block;
}

.form-title{
    text-align:center;

    color:var(--brown);

    font-family:'Fredoka One',cursive;

    margin-bottom:5px;
}

.form-sub{
    text-align:center;

    color:var(--sub);

    margin-bottom:20px;

    font-size:.9rem;
}

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

.input-group{
    position:relative;

    margin-bottom:18px;
}

.input-group label{

    display:block;

    margin-bottom:5px;

    color:var(--brown);

    font-weight:700;
}

.input-icon{

    position:absolute;

    left:14px;

    bottom:14px;
}

.input-group input{

    width:100%;

    padding:14px 14px 14px 42px;

    border:2px solid var(--pink);

    border-radius:15px;

    outline:none;

    background:var(--cream);

    transition:var(--transition);
}

.input-group input:focus{

    border-color:var(--rose);

    background:white;

    transform:translateY(-2px);

    box-shadow:
    0 0 0 4px
    rgba(255,143,171,.15);
}

.input-group input:not(:placeholder-shown):valid{
    border-color:#6EE7B7;
}

.input-group input:not(:placeholder-shown):invalid{
    border-color:#FCA5A5;
}

/* ==========================
   PASSWORD TOGGLE
========================== */

.pw-toggle{

    position:absolute;

    right:15px;

    bottom:14px;

    cursor:pointer;
}

/* ==========================
   CHECKBOX
========================== */

.check-row{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;
}

.check-row label{
    color:var(--sub);
}

.forgot{

    margin-left:auto;

    color:var(--rose);

    text-decoration:none;

    font-weight:700;
}

.forgot:hover{
    text-decoration:underline;
}

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

.btn-submit{

    width:100%;

    border:none;

    padding:15px;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:1rem;

    font-family:'Fredoka One',cursive;

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

    transition:var(--transition);

    box-shadow:
    0 8px 20px
    rgba(255,143,171,.4);
}

.btn-submit:hover{

    transform:
    translateY(-3px)
    scale(1.02);
}

.btn-submit:active{

    transform:scale(.97);
}

/* ==========================
   PASSWORD STRENGTH
========================== */

.strength-meter{

    display:flex;

    gap:4px;

    margin-top:8px;
}

.strength-bar{

    flex:1;

    height:5px;

    border-radius:10px;

    background:var(--pink);
}

.strength-label{

    margin-top:5px;

    font-size:.75rem;

    color:var(--sub);

    text-align:right;
}

/* ==========================
   CORNER BADGES
========================== */

.panda-badge{

    position:absolute;

    right:-15px;

    bottom:-15px;

    font-size:3rem;

    animation:
    pandaBounce 3s
    ease-in-out infinite;
}

.bear-badge{

    position:absolute;

    left:-15px;

    bottom:-15px;

    font-size:2.7rem;

    animation:
    pandaBounce 3s
    ease-in-out infinite reverse;
}

@keyframes pandaBounce{

    0%,100%{
        transform:
        rotate(-10deg)
        translateY(0);
    }

    50%{
        transform:
        rotate(10deg)
        translateY(-8px);
    }
}

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

@media(max-width:500px){

    .card{
        padding:2rem 1.5rem;
    }

    .mascot svg{
        width:85px;
    }

    .form-title{
        font-size:1.3rem;
    }
}

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

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

    *,
    *::before,
    *::after{

        animation:none !important;
        transition:none !important;
    }
}