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

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    overflow-x: hidden;

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

    color: #fff4f8;

    background:
        #190b19;
}


/* =========================================================
   HIDDEN CLASS
   IMPORTANT FOR PAGE SWITCHING
========================================================= */

.hidden {
    display: none !important;
}



/* =========================================================
   LOGIN PAGE
========================================================= */

#login-page {

    min-height: 100vh;

    width: 100%;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding:
        40px 20px 90px;

    text-align: center;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(207, 48, 115, 0.28),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(112, 63, 160, 0.25),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #42162f,
            #291127,
            #170b1e
        );
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    width:
        min(1150px, 96%);

    position: relative;

    z-index: 5;

    text-align: center;

    padding:
        0 15px;

    animation:
        pageAppear 1.2s ease forwards;
}


@keyframes pageAppear {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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



/* =========================================================
   TOP TEXT
========================================================= */

.login-card h1 {

    margin-bottom: 38px;

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

    font-size: 16px;

    font-weight: 400;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: #efabc4;

    text-shadow:
        0 0 15px rgba(239, 171, 196, 0.15);
}



/* =========================================================
   MAIN TITLE
========================================================= */

.main-title {

    max-width: 1050px;

    margin: 0 auto;

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

    font-size:
        clamp(48px, 6.2vw, 82px);

    font-weight: 500;

    line-height: 1.08;

    color: #fff4f7;

    text-shadow:
        0 4px 25px
        rgba(0, 0, 0, 0.18);
}



/* =========================================================
   MEMORIES
========================================================= */

.memories {

    margin-top: 48px;

    font-size:
        clamp(19px, 2vw, 27px);

    line-height: 1.5;

    color: #f3dce5;
}



/* =========================================================
   BOND
========================================================= */

.bond-intro {

    margin-top: 42px;

    font-size:
        clamp(19px, 2vw, 27px);

    color: #efd9e3;
}


.bond {

    margin-top: 8px;

    font-size:
        clamp(20px, 2.2vw, 28px);

    font-weight: bold;

    color: #f3b8cd;

    text-shadow:
        0 0 15px
        rgba(243, 184, 205, 0.15);
}



/* =========================================================
   LITTLE SURPRISE
========================================================= */

.little-surprise {

    margin-top: 43px;

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

    font-size:
        clamp(16px, 1.7vw, 21px);

    color: #efb1c9;
}



/* =========================================================
   READY
========================================================= */

.ready {

    margin-top: 10px;

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

    font-style: italic;

    color: #fff2f7;
}



/* =========================================================
   UNLOCK
========================================================= */

.unlock-section {

    margin-top: 74px;
}


.unlock-section h2 {

    margin: 0;

    font-size:
        clamp(34px, 3.5vw, 42px);

    font-weight: 500;

    color: #fff4f7;

    text-shadow:
        0 0 20px
        rgba(255, 190, 215, 0.12);
}


.unlock-section p {

    margin-top: 12px;

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

    font-size: 17px;

    color: #e8c3d2;
}



/* =========================================================
   LOGIN BOX
========================================================= */

.login-box {

    width:
        min(620px, 95%);

    margin:
        28px auto 0;

    padding:
        30px 25px 35px;

    border-radius: 25px;

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

    border:
        1px solid
        rgba(255, 196, 219, 0.18);

    box-shadow:

        0 25px 70px
        rgba(0, 0, 0, 0.30),

        inset 0 1px 0
        rgba(255,255,255,0.06);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}



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

.login-box input {

    display: block;

    width:
        min(430px, 100%);

    height: 52px;

    margin:
        14px auto;

    padding:
        0 18px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255, 202, 222, 0.28);

    outline: none;

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

    color: white;

    font-size: 16px;

    transition:
        0.3s ease;
}


.login-box input::placeholder {

    color:
        rgba(255, 225, 236, 0.62);
}


.login-box input:focus {

    border-color:
        rgba(255, 151, 190, 0.75);

    box-shadow:
        0 0 20px
        rgba(255, 92, 150, 0.15);

    background:
        rgba(255, 255, 255, 0.09);
}



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

.login-box button {

    width:
        min(430px, 100%);

    height: 54px;

    margin-top: 14px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-size: 17px;

    font-weight: 600;

    color: white;

    background:
        linear-gradient(
            135deg,
            #df4d82,
            #b92e67
        );

    box-shadow:
        0 12px 30px
        rgba(185, 47, 101, 0.35);

    transition:
        0.3s ease;
}


.login-box button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 38px
        rgba(185, 47, 101, 0.50);
}


.login-box button:active {

    transform:
        scale(0.97);
}



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

#error-message {

    min-height: 24px;

    margin-top: 14px;

    color: #ff9fbd;
}



/* =========================================================
   FLOATING HEARTS
========================================================= */

.floating-hearts {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 2;
}


.float-heart {

    position: absolute;

    bottom: -100px;

    display: block;

    font-family: Arial, sans-serif;

    color:
        rgba(255, 118, 170, 0.72);

    text-shadow:

        0 0 10px
        rgba(255, 90, 153, 0.75),

        0 0 25px
        rgba(255, 90, 153, 0.40);

    opacity: 0;

    animation:
        floatingHeart
        linear
        infinite;
}



/* HEART POSITIONS */

.h1 {
    left: 2%;
    font-size: 42px;
    animation-duration: 12s;
    animation-delay: 0s;
}

.h2 {
    left: 8%;
    font-size: 29px;
    animation-duration: 15s;
    animation-delay: 4s;
}

.h3 {
    left: 14%;
    font-size: 53px;
    animation-duration: 13s;
    animation-delay: 2s;
}

.h4 {
    left: 21%;
    font-size: 34px;
    animation-duration: 17s;
    animation-delay: 7s;
}

.h5 {
    left: 28%;
    font-size: 47px;
    animation-duration: 14s;
    animation-delay: 1s;
}

.h6 {
    left: 35%;
    font-size: 27px;
    animation-duration: 16s;
    animation-delay: 5s;
}

.h7 {
    left: 42%;
    font-size: 50px;
    animation-duration: 13s;
    animation-delay: 8s;
}

.h8 {
    left: 49%;
    font-size: 31px;
    animation-duration: 18s;
    animation-delay: 3s;
}

.h9 {
    left: 56%;
    font-size: 45px;
    animation-duration: 14s;
    animation-delay: 6s;
}

.h10 {
    left: 63%;
    font-size: 29px;
    animation-duration: 16s;
    animation-delay: 1s;
}

.h11 {
    left: 70%;
    font-size: 55px;
    animation-duration: 13s;
    animation-delay: 9s;
}

.h12 {
    left: 76%;
    font-size: 35px;
    animation-duration: 17s;
    animation-delay: 4s;
}

.h13 {
    left: 82%;
    font-size: 48px;
    animation-duration: 15s;
    animation-delay: 2s;
}

.h14 {
    left: 88%;
    font-size: 30px;
    animation-duration: 19s;
    animation-delay: 7s;
}

.h15 {
    left: 94%;
    font-size: 44px;
    animation-duration: 14s;
    animation-delay: 10s;
}

.h16 {
    left: 18%;
    font-size: 56px;
    animation-duration: 19s;
    animation-delay: 11s;
}

.h17 {
    left: 46%;
    font-size: 37px;
    animation-duration: 17s;
    animation-delay: 12s;
}

.h18 {
    left: 68%;
    font-size: 51px;
    animation-duration: 18s;
    animation-delay: 5s;
}

.h19 {
    left: 84%;
    font-size: 40px;
    animation-duration: 16s;
    animation-delay: 13s;
}

.h20 {
    left: 97%;
    font-size: 58px;
    animation-duration: 20s;
    animation-delay: 8s;
}



/* HEART ANIMATION */

@keyframes floatingHeart {

    0% {

        transform:
            translateY(80px)
            translateX(0)
            rotate(-12deg)
            scale(0.65);

        opacity: 0;
    }


    10% {
        opacity: 0.75;
    }


    25% {

        transform:
            translateY(-180px)
            translateX(25px)
            rotate(10deg)
            scale(0.90);

        opacity: 0.70;
    }


    50% {

        transform:
            translateY(-430px)
            translateX(-30px)
            rotate(-8deg)
            scale(1.08);

        opacity: 0.55;
    }


    75% {

        transform:
            translateY(-680px)
            translateX(35px)
            rotate(12deg)
            scale(0.92);

        opacity: 0.32;
    }


    100% {

        transform:
            translateY(-1050px)
            translateX(-20px)
            rotate(-12deg)
            scale(0.60);

        opacity: 0;
    }
}



/* =========================================================
   SURPRISE PAGE
========================================================= */

#surprise-page {

    min-height: 100vh;

    width: 100%;

    position: relative;

    overflow: hidden;

    padding:
        55px 20px 85px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    text-align: center;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(190, 54, 115, 0.28),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(91, 57, 150, 0.28),
            transparent 35%
        ),

        linear-gradient(
            120deg,
            #3b142f,
            #241025,
            #160b1d
        );
}



/* =========================================================
   SURPRISE CARD
========================================================= */

.surprise-card {

    width:
        min(950px, 96%);

    position: relative;

    z-index: 5;

    animation:
        surpriseAppear 1.2s ease forwards;
}


@keyframes surpriseAppear {

    from {

        opacity: 0;

        transform:
            translateY(35px)
            scale(0.98);
    }

    to {

        opacity: 1;

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



/* =========================================================
   SURPRISE TOP
========================================================= */

.small-hearts {

    margin-bottom: 18px;

    font-size: 25px;

    letter-spacing: 8px;

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


@keyframes gentlePulse {

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

    50% {
        transform: scale(1.08);
    }
}


.surprise-label {

    margin-bottom: 18px;

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

    font-size: 13px;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #e9a9c1;
}


#greeting {

    max-width: 900px;

    margin:
        0 auto 40px;

    font-size:
        clamp(34px, 5vw, 58px);

    line-height: 1.2;

    font-weight: 500;

    color: #fff0f6;

    text-shadow:
        0 0 25px
        rgba(255, 180, 210, 0.12);
}



/* =========================================================
   PHOTO
========================================================= */

#photo-container {

    width: 315px;

    height: 315px;

    margin:
        0 auto 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background:

        conic-gradient(
            from 0deg,
            #ff5d91,
            #ffd8e7,
            #ffffff,
            #e85589,
            #ffb5ce,
            #ff5d91
        );

    padding: 8px;

    box-shadow:

        0 0 30px
        rgba(255, 91, 145, 0.35),

        0 0 70px
        rgba(255, 91, 145, 0.12),

        0 22px 55px
        rgba(0, 0, 0, 0.40);

    animation:
        photoGlow
        4s
        ease-in-out
        infinite;
}


@keyframes photoGlow {

    0%, 100% {

        box-shadow:

            0 0 30px
            rgba(255, 91, 145, 0.35),

            0 0 70px
            rgba(255, 91, 145, 0.12),

            0 22px 55px
            rgba(0, 0, 0, 0.40);
    }

    50% {

        box-shadow:

            0 0 45px
            rgba(255, 91, 145, 0.55),

            0 0 90px
            rgba(255, 91, 145, 0.18),

            0 22px 55px
            rgba(0, 0, 0, 0.40);
    }
}


.photo-ring {

    width: 100%;

    height: 100%;

    padding: 5px;

    border-radius: 50%;

    background:
        #fff7fa;
}


#brother-photo {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border:
        3px solid
        #fff7fa;
}



/* =========================================================
   MESSAGE CARD
========================================================= */

.message-card {

    width: 100%;

    padding:
        48px 55px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.035)
        );

    border:
        1px solid
        rgba(255, 205, 225, 0.22);

    box-shadow:

        0 25px 75px
        rgba(0, 0, 0, 0.34),

        inset 0 1px 0
        rgba(255,255,255,0.07);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.message-heart {

    margin-bottom: 22px;

    font-size: 32px;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255, 91, 145, 0.45)
        );
}


#message {

    white-space: pre-line;

    text-align: left;

    font-size: 18px;

    line-height: 1.95;

    color: #f8e5ed;
}



/* =========================================================
   CLOSING
========================================================= */

.closing-line {

    max-width: 800px;

    margin:
        38px auto 0;

    font-size:
        clamp(17px, 2vw, 22px);

    line-height: 1.6;

    font-style: italic;

    color: #efb5cb;
}


.footer {

    margin-top: 30px;

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

    font-size: 14px;

    color: #cfa5b5;
}



/* =========================================================
   SURPRISE PAGE FLOATING HEARTS
========================================================= */

.surprise-background-hearts {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


.surprise-background-hearts span {

    position: absolute;

    bottom: -80px;

    font-size: 28px;

    color:
        rgba(255, 120, 170, 0.30);

    text-shadow:
        0 0 15px
        rgba(255, 100, 160, 0.30);

    animation:
        surpriseHeart
        15s
        linear
        infinite;
}


.surprise-background-hearts span:nth-child(1) {
    left: 5%;
    animation-delay: 1s;
}

.surprise-background-hearts span:nth-child(2) {
    left: 18%;
    animation-delay: 5s;
}

.surprise-background-hearts span:nth-child(3) {
    left: 30%;
    animation-delay: 9s;
}

.surprise-background-hearts span:nth-child(4) {
    left: 44%;
    animation-delay: 3s;
}

.surprise-background-hearts span:nth-child(5) {
    left: 58%;
    animation-delay: 7s;
}

.surprise-background-hearts span:nth-child(6) {
    left: 70%;
    animation-delay: 2s;
}

.surprise-background-hearts span:nth-child(7) {
    left: 83%;
    animation-delay: 10s;
}

.surprise-background-hearts span:nth-child(8) {
    left: 94%;
    animation-delay: 6s;
}


@keyframes surpriseHeart {

    0% {

        transform:
            translateY(80px)
            rotate(0deg)
            scale(0.7);

        opacity: 0;
    }

    15% {
        opacity: 0.5;
    }

    50% {

        transform:
            translateY(-450px)
            rotate(25deg)
            scale(1);

        opacity: 0.3;
    }

    100% {

        transform:
            translateY(-1000px)
            rotate(-20deg)
            scale(0.7);

        opacity: 0;
    }
}



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

@media (max-width: 700px) {

    #login-page {

        padding:
            35px 14px 70px;
    }


    .login-card {

        width: 100%;
    }


    .login-card h1 {

        font-size: 11px;

        letter-spacing: 4px;

        line-height: 1.8;
    }


    .main-title {

        font-size: 40px;

        line-height: 1.12;
    }


    .memories {

        font-size: 18px;

        line-height: 2;
    }


    .bond-intro {

        font-size: 19px;
    }


    .bond {

        font-size: 21px;
    }


    .little-surprise {

        line-height: 1.6;
    }


    .unlock-section {

        margin-top: 60px;
    }


    .login-box {

        padding:
            25px 18px 30px;
    }


    #photo-container {

        width: 235px;

        height: 235px;

        margin-bottom: 40px;
    }


    .message-card {

        padding:
            35px 23px;
    }


    #message {

        font-size: 16px;

        line-height: 1.85;
    }


    .closing-line {

        font-size: 17px;
    }

}



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

@media (max-width: 420px) {

    .main-title {

        font-size: 34px;
    }


    .memories {

        font-size: 16px;
    }


    .ready {

        font-size: 28px;
    }


    .unlock-section h2 {

        font-size: 31px;
    }


    #photo-container {

        width: 210px;

        height: 210px;
    }

}