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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(180deg,#081B33,#000814);

    color:white;

    overflow-x:hidden;

}

.hidden{
    display:none !important;
}

section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

/* ==========================================
   SPLASH SCREEN
========================================== */

#splash{

    position:fixed;

    inset:0;

    background:#000814;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.8s;

}

#splash.hide{

    opacity:0;

    visibility:hidden;

}

.splash-icon{

    width:150px;

    height:150px;

    border-radius:35px;

    box-shadow:0 0 35px rgba(255,255,255,.18);

    animation:float 3s ease-in-out infinite;

}

#splash h1{

    margin-top:25px;

    font-size:36px;

    letter-spacing:4px;

    color:white;

    font-family:'Playfair Display',serif;

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/* ==========================================
   PASSWORD PAGE
========================================== */

.password-box{

    width:100%;

    max-width:420px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:50px 35px;

    text-align:center;

    box-shadow:0 15px 45px rgba(0,0,0,.35);

}

.password-box h1{

    font-size:70px;

    margin-bottom:15px;

}

.password-box h2{

    font-family:'Playfair Display',serif;

    font-size:34px;

    margin-bottom:10px;

}

.password-box p{

    color:#AFCFFF;

    margin-bottom:25px;

}

.password-box input{

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    border-radius:15px;

    font-size:17px;

    margin-bottom:20px;

}

.password-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:15px;

    background:#4A90E2;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.password-box button:hover{

    transform:translateY(-2px);

    background:#63A8FF;

}

#wrongPassword{

    margin-top:15px;

    color:#ff8f8f;

}
/* ==========================================
   HERO SECTION
========================================== */

#hero{

    text-align:center;

    flex-direction:column;

}

.hero-content{

    width:100%;

    max-width:700px;

}

.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:82px;

    line-height:1.05;

    font-weight:700;

    color:white;

    margin-bottom:10px;


}

.hero-content h1 span{

    color:#8FC4FF;

    display:inline-block;

    margin-top:10px;

}

.hero-content p{

  font-size:24px;

    color:#BFD9FF;

    margin-top:20px;

    margin-bottom:60px;

    font-weight:300;

}

.gift{

    font-size:120px;

    cursor:pointer;

    transition:.5s;

    margin:55px auto;
     margin-top:20px;

    margin-bottom:35px;

    animation:giftFloat 4s ease-in-out infinite;
filter:drop-shadow(0 0 25px rgba(95,165,255,.45));
}

.gift.open{

    transform:scale(1.15) rotate(-10deg);

}

@keyframes giftFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

#openGift{

    margin-top:30px;

    padding:16px 40px;

    border:none;

    border-radius:40px;

    background:#4A90E2;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

#openGift:hover{

    background:#63A8FF;

    transform:translateY(-3px);

}


/* ==========================================
   LETTER SECTION
========================================== */

#letterSection{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*.birthday-card{

    width:100%;

    max-width:500px;

    background:white;

    color:#222;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.card-front{

    padding:80px 35px;

    text-align:center;

    cursor:pointer;

    background:linear-gradient(135deg,#4A90E2,#6FB4FF);

    color:white;

}

.card-front h2{

    font-family:'Playfair Display',serif;

    font-size:42px;

    margin-bottom:18px;

}

.card-front p{

    font-size:18px;

    opacity:.95;

}

.card-inside{

    display:none;

    padding:35px;

}

.birthday-card.open .card-front{

    display:none;

}

.birthday-card.open .card-inside{

    display:block;

}*/
/* ===============================
   3D LETTER
================================ */

.birthday-card{

    width:100%;
    max-width:700px;
    /*height:520px;*/
    height:min(80vh,650px);

    position:relative;

    perspective:2000px;

}

.card-front,
.card-inside{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:25px;

    overflow:hidden;

}

.card-front{

    background:linear-gradient(145deg,#4A90E2,#1E5EA8);

    color:white;

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

    cursor:pointer;

    transform-origin:left;

    transition:transform 1.2s cubic-bezier(.77,0,.175,1);

    backface-visibility:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    z-index:2;

}

.card-front h2{

    font-size:48px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

}

.card-front p{

    font-size:18px;

    opacity:.9;

}

.card-inside{

    background:white;

    color:#333;

    padding:45px;

    overflow-y:auto;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}

.birthday-card.open .card-front{

    transform:rotateY(-165deg);

}

.card-inside h2{

    font-family:'Playfair Display',serif;

    font-size:34px;

    color:#0F3460;

    margin-bottom:25px;

}

#typedLetter{

    color:#444;

    font-size:18px;

    line-height:1.9;

    min-height:260px;
   

}
#typedLetter p{
    margin-bottom:24px;
    line-height:1.9;
}

#typedLetter strong{
    font-weight:700;
}

#continueBtn{

    width:100%;

    margin-top:30px;

    padding:16px;

    border:none;

    border-radius:16px;

    background:#4A90E2;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

#continueBtn:hover{

    background:#63A8FF;

    transform:translateY(-2px);

}
/* ==========================================
   OUR MEMORIES
========================================== */

#gallerySection{

        min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

    background:linear-gradient(180deg,#081B33,#000814);

}

.memory-container{

    width:100%;

    max-width:700px;

    text-align:center;

}

.memory-container h2{

    font-family:'Playfair Display', serif;
    font-size:34px;
    margin-bottom:12px;
    line-height:1.25;
    white-space:normal;
}

.memory-subtitle{

    color:#AFCFFF;

    margin-bottom:20px;

    font-size:17px;

}

.memory-photo{

    position:relative;

    width:100%;
    width:360px;

    /*aspect-ratio:4/5;*/
     height:480px;

    border-radius:22px;

    border-radius:25px;

    overflow:hidden;

    background:#111;

    box-shadow:0 20px 55px rgba(0,0,0,.45);
 margin:0 auto;
}

.memory-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:opacity .35s ease,
               transform .35s ease;

}

.memory-photo img:hover{

    transform:scale(1.03);

}

.memory-caption{
margin-top:15px;

    min-height:50px;

    font-size:18px;
   
    color:white;

    line-height:1.7;
 
    padding:0 12px;

}

.memory-counter{

    margin-top:18px;

    font-size:18px;

    color:#9FCBFF;

    letter-spacing:2px;

}

.memory-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:28px;

}

.memory-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#365F8D;

    transition:.35s;

}

.memory-dots span.active{

    width:28px;

    border-radius:50px;

    background:#9FCBFF;

}

.memory-hint{

    margin-top:28px;

    color:#87BFFF;

    font-size:15px;

    opacity:.85;

    animation:swipeHint 2s infinite;

}

@keyframes swipeHint{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(10px);

    }

    100%{

        transform:translateX(0);

    }

}
/* ==========================================
   BIRTHDAY WISH
========================================== */

#birthdayWishSection{

    justify-content:center;

    align-items:center;

    text-align:center;

    background:linear-gradient(180deg,#081B33,#000814);

}

.wish-container{

    width:100%;

    max-width:750px;

}

.wish-container h1{

    font-family:'Playfair Display',serif;

    font-size:64px;

    color:white;

    margin-bottom:10px;

}

.wish-container h2{

    color:#9FCBFF;

    font-size:42px;

    margin-bottom:35px;

    font-weight:600;

}

#birthdayWish{

    font-size:22px;

    line-height:1.9;

    color:#E7F2FF;

    margin-bottom:50px;

    padding:0 10px;

}

#finalSurpriseBtn{

    padding:18px 45px;

    border:none;

    border-radius:50px;

    background:#4A90E2;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.35s;

}

#finalSurpriseBtn:hover{

    background:#63A8FF;

    transform:translateY(-3px);

}


/* ==========================================
   FINAL SURPRISE
========================================== */

#finalSection{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.final-card{
    max-width:700px;
    width:100%;
    z-index:2;
}

.final-card h1{
    font-family:'Playfair Display', serif;
    font-size:72px;
    line-height:1.1;
    margin-bottom:30px;
}

.final-card p{
    font-size:22px;
    line-height:1.8;
    margin-bottom:18px;
}

.look-up{
    margin-top:45px;
    font-size:32px;
    font-weight:700;
    color:#fff;
    animation:pulse 1.5s infinite;
}

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

    50%{
        transform:scale(1.08);
    }
}
/* ==========================================
   FADE ANIMATIONS
========================================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

button{

    transition:all .3s ease;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(74,144,226,.35);

}

button:active{

    transform:scale(.97);

}

/* ==========================================
   IMAGE TRANSITION
========================================== */

.memory-photo img{

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.memory-photo img.change{

    opacity:0;

    transform:scale(.96);

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#081B33;

}

::-webkit-scrollbar-thumb{

    background:#4A90E2;

    border-radius:30px;

}

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

@media(max-width:768px){

    section{

        padding:25px 18px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:18px;

    }

    .gift{

        font-size:90px;

    }

    .password-box{

        padding:35px 25px;

    }

    .birthday-card{

        max-width:100%;

    }

    .card-front{

        padding:60px 25px;

    }

    .card-front h2{

        font-size:34px;

    }

    .card-inside{

        padding:25px;

    }

    .card-inside h2{

        font-size:28px;

    }

    #typedLetter{

        font-size:17px;

        min-height:220px;

    }

    .memory-container{

        max-width:100%;

    }

    .memory-container h2{

       font-size:34px;

    margin-bottom:8px;

    }

    .memory-caption{

        font-size:18px;

    }

    .wish-container h1{

        font-size:44px;

    }

    .wish-container h2{

        font-size:30px;

    }

    #birthdayWish{

        font-size:18px;

    }

    .final-container h1{

        font-size:46px;

    }

    .final-container h2{

        font-size:30px;

    }

    .final-message{

        font-size:18px;

        line-height:1.8;

    }

    .signature{

        font-size:22px;

    }

}

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

@media(max-width:420px){

    .hero-content h1{

        font-size:36px;

    }

    .memory-photo{

        border-radius:20px;

    }

    .memory-caption{

        font-size:17px;

    }

    .wish-container h1{

        font-size:38px;

    }

    .final-container h1{

        font-size:40px;

    }

}
@keyframes giftFloat{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

}
/* Mobile */
@media (max-width: 768px){

    .memory-container{
        max-width:100%;
        padding:0 18px;
        box-sizing:border-box;
    }

    .memory-container h2{
        font-size:26px;
        line-height:1.3;
        white-space:normal;
    }

    .memory-subtitle{
        font-size:15px;
    }

    .memory-photo{
        width:100%;
        max-width:340px;
        height:430px;
        margin:0 auto;
    }

}
html,body{
    overflow-x:hidden;
}
@media (max-width:768px){

    .final-card h1{
        font-size:48px;
    }

    .final-card p{
        font-size:18px;
        line-height:1.7;
    }

    .look-up{
        font-size:26px;
    }

}