*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

:root{
    --text-main:#3b2331;
    --text-heading:#4a1f35;
    --text-soft:#563042;
    --text-accent:#7b2450;

    --nav-one:#6d3b8d;
    --nav-two:#c13f73;
    --nav-dark:#51225f;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--text-main);

    text-align:center;

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

    background:
        linear-gradient(
            135deg,
            #f3d9e5,
            #eed0df,
            #f3dce8
        );

    transition:
        background 1s ease,
        color .8s ease;
}


/* ================================================= */
/* FLOATING DECORATIONS */
/* ================================================= */

.cute-decorations{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

.cute-decorations span{
    position:absolute;
    user-select:none;
    pointer-events:none;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(82,25,60,.14)
        );
}


/* ================================================= */
/* BOWS */
/* ================================================= */

.bow{
    font-size:35px;
    opacity:.72;

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

.bow1{
    left:4%;
    top:12%;
    font-size:42px;
}

.bow2{
    left:17%;
    top:78%;
    font-size:30px;
    animation-delay:1.2s;
}

.bow3{
    left:30%;
    top:20%;
    font-size:27px;
    animation-delay:2.4s;
}

.bow4{
    left:43%;
    top:87%;
    font-size:38px;
    animation-delay:3.2s;
}

.bow5{
    left:55%;
    top:10%;
    font-size:30px;
    animation-delay:1.8s;
}

.bow6{
    left:68%;
    top:72%;
    font-size:44px;
    animation-delay:2.8s;
}

.bow7{
    left:82%;
    top:18%;
    font-size:32px;
    animation-delay:.8s;
}

.bow8{
    left:94%;
    top:55%;
    font-size:28px;
    animation-delay:3.8s;
}

.bow9{
    left:10%;
    top:45%;
    font-size:25px;
    animation-delay:4.2s;
}

.bow10{
    left:37%;
    top:62%;
    font-size:31px;
    animation-delay:2s;
}

.bow11{
    left:76%;
    top:43%;
    font-size:26px;
    animation-delay:4.8s;
}

.bow12{
    left:89%;
    top:86%;
    font-size:40px;
    animation-delay:1.5s;
}

@keyframes bowFloat{

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

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


/* ================================================= */
/* FLOWERS */
/* ================================================= */

.flower{
    font-size:27px;
    opacity:.65;

    animation:
        flowerFloat 8s ease-in-out infinite;
}

.flower1{
    left:6%;
    top:63%;
}

.flower2{
    left:23%;
    top:8%;
    animation-delay:2s;
}

.flower3{
    left:49%;
    top:30%;
    animation-delay:4s;
}

.flower4{
    left:73%;
    top:8%;
    animation-delay:1s;
}

.flower5{
    left:91%;
    top:70%;
    animation-delay:3s;
}

.flower6{
    left:58%;
    top:90%;
    animation-delay:5s;
}

@keyframes flowerFloat{

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

        opacity:.45;
    }

    50%{
        transform:
            translateY(-15px)
            rotate(12deg);

        opacity:.8;
    }
}


/* ================================================= */
/* SPARKLES */
/* ================================================= */

.sparkle{
    font-size:24px;
    opacity:.55;

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

.sparkle1{
    left:14%;
    top:31%;
}

.sparkle2{
    left:40%;
    top:14%;
    animation-delay:1s;
}

.sparkle3{
    left:63%;
    top:55%;
    animation-delay:2s;
}

.sparkle4{
    left:87%;
    top:32%;
    animation-delay:3s;
}

@keyframes sparkleFloat{

    0%,100%{
        transform:
            scale(.8)
            rotate(0deg);

        opacity:.35;
    }

    50%{
        transform:
            scale(1.25)
            rotate(20deg);

        opacity:.9;
    }
}


/* ================================================= */
/* STARS */
/* ================================================= */

.stars{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;

    background-image:

        radial-gradient(
            3px 3px at 10% 20%,
            rgba(255,255,255,.9),
            transparent
        ),

        radial-gradient(
            2px 2px at 25% 70%,
            rgba(255,255,255,.9),
            transparent
        ),

        radial-gradient(
            3px 3px at 45% 15%,
            rgba(255,255,255,.8),
            transparent
        ),

        radial-gradient(
            2px 2px at 65% 80%,
            rgba(255,255,255,.9),
            transparent
        ),

        radial-gradient(
            3px 3px at 80% 25%,
            rgba(255,255,255,.8),
            transparent
        ),

        radial-gradient(
            2px 2px at 92% 65%,
            rgba(255,255,255,.9),
            transparent
        );

    animation:
        sparkleTwinkle 4s infinite alternate;
}

@keyframes sparkleTwinkle{

    from{
        opacity:.3;
    }

    to{
        opacity:.9;
    }
}


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

.hearts{
    position:fixed;
    left:0;
    bottom:-60px;

    width:100%;
    height:100%;

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

    overflow:hidden;
}

.hearts span{
    position:absolute;
    bottom:-50px;

    font-size:26px;
    opacity:0;

    animation:
        cuteHeartFloat 10s linear infinite;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(200,80,130,.2)
        );
}

.hearts span:nth-child(1){
    left:5%;
}

.hearts span:nth-child(2){
    left:16%;
    animation-delay:2s;
    font-size:20px;
}

.hearts span:nth-child(3){
    left:30%;
    animation-delay:4s;
    font-size:30px;
}

.hearts span:nth-child(4){
    left:47%;
    animation-delay:1s;
    font-size:22px;
}

.hearts span:nth-child(5){
    left:63%;
    animation-delay:5s;
    font-size:28px;
}

.hearts span:nth-child(6){
    left:78%;
    animation-delay:3s;
    font-size:21px;
}

.hearts span:nth-child(7){
    left:90%;
    animation-delay:6s;
    font-size:30px;
}

.hearts span:nth-child(8){
    left:25%;
    animation-delay:7s;
}

.hearts span:nth-child(9){
    left:55%;
    animation-delay:4s;
}

.hearts span:nth-child(10){
    left:85%;
    animation-delay:8s;
}

@keyframes cuteHeartFloat{

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

        opacity:0;
    }

    15%{
        opacity:.9;
    }

    50%{
        transform:
            translateY(-50vh)
            translateX(20px)
            rotate(10deg);
    }

    100%{
        transform:
            translateY(-115vh)
            translateX(-20px)
            rotate(-10deg);

        opacity:0;
    }
}


/* ================================================= */
/* GENERAL TEXT */
/* ================================================= */

h1,
h2,
h3{
    width:100%;

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

    text-align:center;

    letter-spacing:.3px;

    color:var(--text-heading) !important;

    font-weight:800;

    text-rendering:optimizeLegibility;

    text-shadow:
        0 2px 0 rgba(255,255,255,.55),
        0 5px 18px rgba(74,25,55,.18);
}

h1{
    font-size:46px;
    margin:20px auto 15px;
}

h2{
    font-size:36px;
    margin:20px auto;
}

h3{
    font-size:24px;
}

p{
    max-width:720px;

    margin:18px auto;

    padding:
        0 15px;

    font-size:19px;

    line-height:1.75;

    text-align:center;

    color:var(--text-main) !important;

    font-weight:600;

    text-rendering:optimizeLegibility;

    text-shadow:
        0 1px 0 rgba(255,255,255,.42);
}

strong{
    color:#761c4b !important;
    font-weight:800;
}


/* ================================================= */
/* WELCOME */
/* ================================================= */

#welcome{

    min-height:100vh;

    padding:
        40px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:5;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 12% 18%,
            rgba(255,255,255,.72),
            transparent 22%
        ),

        radial-gradient(
            circle at 88% 20%,
            rgba(247,163,198,.48),
            transparent 26%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(191,119,160,.34),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #f3d9e6,
            #eccbdc,
            #f4dce8
        );

    animation:
        welcomeReveal 1.2s ease;
}

#welcome::before{
    content:"🎀 🌸 🎀";

    position:absolute;

    top:8%;
    left:5%;

    font-size:32px;

    opacity:.75;
}

#welcome::after{
    content:"🌸 🎀 🌷";

    position:absolute;

    right:5%;
    bottom:12%;

    font-size:32px;

    opacity:.75;
}

@keyframes welcomeReveal{

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

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


/* ================================================= */
/* WELCOME BOUQUETS */
/* ================================================= */

.welcome-bouquet{

    position:absolute;

    width:255px;
    min-height:175px;

    padding:20px;

    display:flex;

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

    flex-wrap:wrap;

    gap:7px 9px;

    border-radius:55px;

    background:
        rgba(255,248,252,.34);

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

    box-shadow:
        0 18px 42px
        rgba(83,28,63,.13);

    pointer-events:none;

    z-index:1;

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

.welcome-bouquet span{
    font-size:38px;
}

.bouquet-left-top{
    left:3%;
    top:7%;
    transform:rotate(-8deg);
}

.bouquet-right-top{
    right:3%;
    top:7%;
    transform:rotate(8deg);
    animation-delay:1s;
}

.bouquet-left-bottom{
    left:3%;
    bottom:7%;
    transform:rotate(8deg);
    animation-delay:2s;
}

.bouquet-right-bottom{
    right:3%;
    bottom:7%;
    transform:rotate(-8deg);
    animation-delay:3s;
}

@keyframes welcomeBouquetFloat{

    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -8px;
    }
}


/* ================================================= */
/* WELCOME FLOWER GARDENS */
/* ================================================= */

.welcome-garden{

    position:absolute;

    left:50%;

    transform:
        translateX(-50%);

    width:min(1100px,94%);

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px 12px;

    font-size:27px;

    line-height:1.45;

    letter-spacing:3px;

    opacity:.9;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(82,25,60,.14)
        );

    pointer-events:none;

    z-index:1;
}

.garden-top{
    top:3%;
}

.garden-bottom{
    bottom:2%;
}


/* ================================================= */
/* SMALL WELCOME BOUQUETS */
/* ================================================= */

.welcome-mini-bouquet{

    position:absolute;

    width:190px;

    padding:14px;

    border-radius:45px;

    background:
        rgba(255,248,252,.28);

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

    box-shadow:
        0 14px 32px
        rgba(82,25,60,.1);

    font-size:31px;

    line-height:1.35;

    letter-spacing:5px;

    pointer-events:none;

    z-index:1;

    animation:
        welcomeBouquetFloat
        6.5s
        ease-in-out
        infinite;
}

.mini-left{
    left:8%;
    top:34%;
    transform:rotate(-8deg);
}

.mini-right{
    right:8%;
    top:34%;
    transform:rotate(8deg);

    animation-delay:1.4s;
}


/* ================================================= */
/* WELCOME FLOWER RING */
/* ================================================= */

.welcome-flower-ring{

    position:absolute;

    left:50%;
    bottom:3%;

    transform:
        translateX(-50%);

    width:90%;

    font-size:22px;

    letter-spacing:4px;

    line-height:1.7;

    color:#762047;

    opacity:.85;

    pointer-events:none;

    z-index:1;
}


/* ================================================= */
/* WELCOME CONTENT */
/* ================================================= */

#welcome .heart-box,
#welcome h1,
#welcome #heartMessage,
#welcome>p,
#welcome>button{

    position:relative;

    z-index:8;
}

#welcome h1{

    font-size:
        clamp(
            48px,
            6vw,
            70px
        );

    color:#421c31 !important;

    margin-top:14px;
    margin-bottom:14px;
}

#welcome>p:not(#heartMessage){

    font-size:22px;

    font-weight:700;

    color:#452637 !important;

    max-width:700px;
}


/* ================================================= */
/* HEART BOX */
/* ================================================= */

.heart-box{

    width:115px;
    height:115px;

    margin:
        0 auto 25px;

    display:flex;

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

    border-radius:35px;

    cursor:pointer;

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

    border:
        2px solid
        rgba(255,170,200,.4);

    box-shadow:
        0 15px 38px
        rgba(120,30,75,.2);

    animation:
        heartGlow 2s infinite alternate;

    transition:.3s ease;
}

.heart-box:hover{

    transform:
        translateY(-5px)
        scale(1.05);
}

.big-heart{
    font-size:60px;
}

@keyframes heartGlow{

    from{
        scale:1;
    }

    to{
        scale:1.08;
    }
}

#heartMessage{

    min-height:45px;

    max-width:650px;

    margin:20px auto;

    font-size:29px;

    font-weight:800;

    color:#751e4b !important;
}


/* ================================================= */
/* BUTTONS */
/* ================================================= */

button{

    margin:10px;

    padding:
        14px 28px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    color:white;

    background:
        linear-gradient(
            135deg,
            #d96b9e,
            #b94f82
        );

    font-family:
        "Quicksand",
        sans-serif;

    font-size:17px;

    font-weight:700;

    box-shadow:
        0 8px 20px
        rgba(170,70,110,.2);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

button:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 12px 28px
        rgba(170,70,110,.3);
}

button:active{
    transform:scale(.97);
}


/* ================================================= */
/* UNIVERSE */
/* ================================================= */

#universe{

    display:none;

    width:100%;

    min-height:100vh;

    position:relative;

    overflow:hidden;
}


/* ================================================= */
/* SURPRISE PAGES */
/* ================================================= */

.surprise-page{

    display:none;

    width:100%;

    min-height:100vh;

    padding:
        70px 25px
        150px;

    position:relative;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    text-align:center;

    animation:
        surpriseReveal .9s ease;
}

.surprise-page.active{
    display:flex;
}

@keyframes surpriseReveal{

    from{
        opacity:0;
        transform:scale(.98);
    }

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


/* ================================================= */
/* PAGE BACKGROUNDS */
/* ================================================= */

.surprise-page:nth-child(1){

    background:
        radial-gradient(
            circle at 10% 15%,
            #ffffffcc,
            transparent 23%
        ),
        radial-gradient(
            circle at 90% 80%,
            #ffb4d688,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff5fa,
            #ffdce9,
            #fff0f6
        );
}

.surprise-page:nth-child(2){

    background:
        radial-gradient(
            circle at 80% 15%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 80%,
            #ffd2bd88,
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fff8ed,
            #ffe2cf,
            #fff1e5
        );
}

.surprise-page:nth-child(3){

    background:
        radial-gradient(
            circle at 20% 20%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 80%,
            #d8c0ff88,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #faf5ff,
            #eadcff,
            #f5edff
        );
}

.surprise-page:nth-child(4){

    background:
        radial-gradient(
            circle at 85% 20%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 75%,
            #bfeaff88,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f1fbff,
            #d9f2ff,
            #edfaff
        );
}

.surprise-page:nth-child(5){

    background:
        radial-gradient(
            circle at 15% 75%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 20%,
            #b8f1d488,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f1fff8,
            #d8f5e8,
            #effcf5
        );
}

.surprise-page:nth-child(6){

    background:
        radial-gradient(
            circle at 85% 75%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 20%,
            #ffbfd088,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff4f6,
            #f8d9df,
            #fff0f3
        );
}

.surprise-page:nth-child(7){

    background:
        radial-gradient(
            circle at 50% 10%,
            #ffffffdd,
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 85%,
            #ffe28d88,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf2,
            #fff2bf,
            #fff9df
        );
}

.surprise-page:nth-child(8){

    background:
        radial-gradient(
            circle at 85% 20%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 80%,
            #ffb6a088,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff5f1,
            #ffdcd2,
            #fff0eb
        );
}

.surprise-page:nth-child(9){

    background:
        radial-gradient(
            circle at 20% 20%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            #efb4d688,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff7fb,
            #f6d9e9,
            #fff0f7
        );
}

.surprise-page:nth-child(10){

    background:
        radial-gradient(
            circle at 80% 15%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 80%,
            #cdb6ff88,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f4ff,
            #e5dbf7,
            #f3edff
        );
}

.surprise-page:nth-child(11){

    background:
        radial-gradient(
            circle at 15% 15%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            #aee8d088,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #effff9,
            #d3f1e4,
            #f3fff9
        );
}

.surprise-page:nth-child(12){

    background:
        radial-gradient(
            circle at 85% 15%,
            #ffffffdd,
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 85%,
            #ffc0d888,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff4f8,
            #f8d7e5,
            #fff1f6
        );
}

.surprise-page:nth-child(13){

    background:
        radial-gradient(
            circle at 50% 15%,
            #ffffffdd,
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            #c4d9ff88,
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            #ffc5df88,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f6f7ff,
            #e5e8ff,
            #fff0f7
        );
}


/* ================================================= */
/* SURPRISE CONTENT */
/* ================================================= */

.surprise-content{

    width:100%;

    max-width:950px;

    margin:0 auto;

    padding:
        10px 15px;

    position:relative;

    z-index:5;

    text-align:center;
}

.surprise-symbol{

    font-size:58px;

    margin-bottom:15px;

    animation:
        heartGlow 2s infinite alternate;
}

.surprise-page h1,
.surprise-page h2,
.surprise-page h3{

    width:100%;

    max-width:850px;

    margin-left:auto;
    margin-right:auto;

    text-align:center;
}

.surprise-page p{

    width:100%;

    max-width:720px;

    margin-left:auto;
    margin-right:auto;

    text-align:center;
}


/* ================================================= */
/* GLASS SECTIONS */
/* ================================================= */

.glass-section{

    width:100%;

    max-width:800px;

    margin:
        45px auto;

    padding:
        40px 30px;

    background:
        rgba(255,246,250,.84);

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

    border-radius:30px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 50px
        rgba(72,25,55,.16),
        inset 0 1px 0
        rgba(255,255,255,.78);

    text-align:center;
}


/* ================================================= */
/* SURPRISE TEASER */
/* ================================================= */

.surprise-teaser{

    width:min(900px,94%);

    margin:
        12px auto 18px;

    padding:
        15px 20px;

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(91,48,125,.98),
            rgba(190,49,108,.98)
        );

    color:#fff !important;

    box-shadow:
        0 14px 34px
        rgba(70,25,75,.24),
        inset 0 1px 0
        rgba(255,255,255,.34);

    animation:
        teaserPulse 3.2s ease-in-out infinite;

    position:relative;

    z-index:20;
}

.surprise-teaser .teaser-text,
.surprise-teaser span{

    color:#fff !important;

    font-size:16px;

    font-weight:800;

    letter-spacing:.25px;

    text-shadow:
        0 2px 7px
        rgba(40,8,35,.32);
}

.teaser-button{

    margin:0;

    padding:
        12px 22px;

    border-radius:28px;

    background:#fff !important;

    color:#632b60 !important;

    font-size:15px;

    font-weight:800;

    box-shadow:
        0 8px 20px
        rgba(45,10,40,.2);

    text-shadow:none;
}

.teaser-button:hover{

    background:#fff7fc !important;

    color:#ad245f !important;
}

.final-teaser{

    background:
        linear-gradient(
            135deg,
            rgba(86,55,112,.93),
            rgba(160,60,106,.93)
        );
}

@keyframes teaserPulse{

    0%,100%{
        transform:translateY(0);
    }

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


/* ================================================= */
/* NAVIGATION */
/* ================================================= */

.page-navigation{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:
        translateX(-50%);

    width:100%;

    max-width:950px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:
        0 12px;

    z-index:20;
}

.nav-button{

    min-width:190px;

    min-height:56px;

    padding:
        15px 25px;

    border-radius:34px;

    font-size:18px;

    font-weight:800;

    background:
        linear-gradient(
            135deg,
            var(--nav-one),
            var(--nav-two)
        ) !important;

    color:#fff !important;

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

    box-shadow:
        0 12px 28px
        rgba(73,27,80,.25);
}

.nav-button:hover{

    background:
        linear-gradient(
            135deg,
            var(--nav-dark),
            #aa285e
        ) !important;

    color:#fff !important;

    transform:
        translateY(-4px)
        scale(1.04);
}

.nav-button.disabled{

    background:
        rgba(90,45,75,.24) !important;

    color:
        rgba(70,30,55,.55) !important;

    box-shadow:none;

    cursor:default;

    pointer-events:none;
}

.page-number{

    min-width:150px;

    padding:
        13px 17px;

    border-radius:30px;

    background:
        rgba(255,248,252,.94);

    color:#4b2038;

    font-size:16px;

    font-weight:800;

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

    box-shadow:
        0 9px 24px
        rgba(70,25,55,.14);
}


/* ================================================= */
/* MEMORY CARDS */
/* ================================================= */

#memories{

    width:100%;

    margin-top:50px;

    padding:
        30px 20px;

    text-align:center;
}

.memory-container{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:28px;

    flex-wrap:wrap;
}

.memory-card{

    width:250px;

    padding:20px;

    background:
        rgba(255,246,250,.84);

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

    border-radius:25px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 20px 50px
        rgba(72,25,55,.16);

    transition:
        transform .35s ease;

    text-align:center;
}

.memory-card:hover{

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

.memory-photo{

    width:100%;
    height:180px;

    overflow:hidden;

    border-radius:18px;
}

.memory-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    cursor:pointer;

    transition:
        transform .5s ease;
}

.memory-photo img:hover{
    transform:scale(1.08);
}

.memory-card h3{
    font-size:22px;
    color:#691f43 !important;
}

.memory-card p{
    font-size:16px;
    line-height:1.6;
}


/* ================================================= */
/* LOVE LETTER */
/* ================================================= */

#love-letter{

    width:100%;

    max-width:750px;

    margin:
        30px auto;

    padding:
        55px 45px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(255,220,235,.9)
        );

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

    border-radius:35px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 55px
        rgba(72,25,55,.18);

    text-align:center;

    position:relative;
}

#love-letter::before{

    content:"💗";

    position:absolute;

    top:-30px;
    left:50%;

    transform:
        translateX(-50%);

    font-size:50px;
}

#love-letter h2{

    text-align:center;

    font-size:42px;

    color:#691f43 !important;
}

#love-letter p{

    max-width:650px;

    margin:
        20px auto;

    font-size:20px;

    line-height:1.8;

    color:#382330 !important;

    font-weight:600;

    text-align:center;
}

#love-letter strong{
    color:#761c4b !important;
}

.signature{

    text-align:center !important;

    font-size:27px !important;

    color:#691f43 !important;
}


/* ================================================= */
/* BIRTHDAY SURPRISE */
/* ================================================= */

#birthday-surprise{

    margin-top:70px;

    text-align:center;
}

#birthday-message{

    display:none;

    width:100%;

    max-width:700px;

    margin:
        45px auto;

    padding:
        45px 35px;

    background:
        rgba(255,246,250,.9);

    border-radius:30px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 50px
        rgba(72,25,55,.16);

    animation:
        reveal 1s ease;

    text-align:center;
}

#birthday-message p{

    font-size:20px;

    line-height:1.8;

    text-align:center;

    color:#382330 !important;
}

#birthday-message h2{
    text-align:center;
}

.final-hearts{

    font-size:40px;

    letter-spacing:8px;
}

@keyframes reveal{

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

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


/* ================================================= */
/* BOUQUET */
/* ================================================= */

#bouquet{

    width:100%;

    max-width:900px;

    margin:
        30px auto;

    padding:
        50px 25px;

    background:
        rgba(255,246,250,.86);

    border-radius:35px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 50px
        rgba(72,25,55,.16);

    text-align:center;
}


/* ================================================= */
/* FLOWER GRID */
/* ================================================= */

.flower-grid{

    max-width:850px;

    margin:
        40px auto;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.flower-card{

    width:190px;

    min-height:210px;

    padding:
        25px 15px;

    background:
        rgba(255,246,250,.9);

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

    border-radius:25px;

    backdrop-filter:blur(10px);

    box-shadow:
        0 15px 35px
        rgba(72,25,55,.13);

    transition:
        transform .35s ease;

    text-align:center;
}

.flower-card:hover{

    transform:
        translateY(-8px)
        scale(1.03);
}

.flower-emoji{

    font-size:55px;

    margin-bottom:8px;
}

.flower-card h3{

    font-size:22px;

    margin:
        8px 0;

    color:#691f43 !important;
}

.flower-card p{

    font-size:16px;

    margin:
        5px auto;

    line-height:1.6;

    color:#382330 !important;
}

.bouquet-image{

    width:100%;

    max-width:650px;

    margin:
        35px auto;

    padding:15px;

    border-radius:30px;

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

    box-shadow:
        0 15px 35px
        rgba(72,25,55,.14);
}

.bouquet-image img{

    width:100%;

    max-height:550px;

    object-fit:cover;

    border-radius:22px;

    display:block;
}

.bouquet-message{

    max-width:700px;

    margin:
        25px auto;

    font-size:27px;

    color:#742047 !important;

    font-weight:800;

    text-align:center;
}


/* ================================================= */
/* REASONS */
/* ================================================= */

#reasons{

    width:100%;

    max-width:750px;

    margin:
        30px auto;

    padding:
        45px 25px;

    text-align:center;
}

#reason-box{

    width:100%;

    min-height:130px;

    padding:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(255,246,250,.9);

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

    border-radius:25px;

    box-shadow:
        0 15px 35px
        rgba(72,25,55,.13);

    color:#742047 !important;

    font-size:29px;

    font-weight:700;

    line-height:1.6;

    text-align:center;
}

.reason-animation{

    animation:
        reasonReveal .6s ease;
}

@keyframes reasonReveal{

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

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


/* ================================================= */
/* OTHER SECTIONS */
/* ================================================= */

#open-when,
#bucket-list,
#compliments,
#secret-password,
#future-letter{

    width:100%;

    max-width:800px;

    margin:
        30px auto;

    padding:
        45px 25px;

    background:
        rgba(255,246,250,.86);

    border-radius:30px;

    backdrop-filter:blur(12px);

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

    box-shadow:
        0 18px 45px
        rgba(72,25,55,.15);

    text-align:center;
}

#open-letter-message,
#future-letter-message{

    width:100%;

    max-width:650px;

    min-height:50px;

    margin:
        35px auto;

    padding:30px;

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

    border-radius:25px;

    color:#382330 !important;

    font-size:22px;

    line-height:1.8;

    text-align:center;

    box-shadow:
        0 10px 28px
        rgba(72,25,55,.1);
}


/* ================================================= */
/* BUCKET LIST */
/* ================================================= */

.bucket-item{

    width:100%;

    max-width:600px;

    margin:
        15px auto;

    padding:
        18px 20px;

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

    border-radius:20px;

    cursor:pointer;

    transition:
        transform .3s ease;

    font-size:18px;

    text-align:center;

    box-shadow:
        0 8px 22px
        rgba(72,25,55,.1);

    color:#382330 !important;
}

.bucket-item:hover{
    transform:scale(1.03);
}

.bucket-item.completed{

    text-decoration:line-through;

    opacity:.55;

    background:
        rgba(255,190,210,.45);
}


/* ================================================= */
/* COMPLIMENTS */
/* ================================================= */

#compliment-card{

    width:100%;

    min-height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,220,235,.85),
            rgba(235,220,255,.78)
        );

    border-radius:25px;

    color:#5f2142 !important;

    font-size:29px;

    font-weight:700;

    line-height:1.6;

    text-align:center;

    box-shadow:
        0 15px 35px
        rgba(72,25,55,.12);
}


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

#secretPassword{

    width:280px;

    max-width:85%;

    padding:
        14px 20px;

    border-radius:30px;

    border:
        2px solid
        rgba(150,60,110,.25);

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

    color:#382330;

    font-size:17px;

    outline:none;

    text-align:center;
}

#passwordMessage{

    min-height:45px;

    max-width:650px;

    margin:
        25px auto;

    color:#742047 !important;

    font-size:24px;

    font-weight:800;

    line-height:1.6;

    text-align:center;
}

#secretContent{

    display:none;

    width:100%;

    max-width:650px;

    margin:
        25px auto;

    padding:30px;

    background:
        rgba(255,220,235,.5);

    border-radius:25px;

    animation:
        reveal .8s ease;

    text-align:center;
}


/* ================================================= */
/* HER JOURNEY */
/* ================================================= */

#her-journey{

    width:100%;

    max-width:900px;

    margin:
        30px auto;

    padding:
        55px 25px;

    background:
        rgba(255,246,250,.86);

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

    border-radius:40px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 55px
        rgba(72,25,55,.16);

    text-align:center;
}

.journey-intro{

    max-width:700px;

    margin:
        20px auto 40px;

    color:#563042 !important;

    font-size:24px;

    line-height:1.7;

    text-align:center;
}

#journey-card{

    width:100%;

    max-width:850px;

    margin:0 auto;

    padding:25px;

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

    border-radius:30px;

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

    box-shadow:
        0 15px 38px
        rgba(72,25,55,.12);

    text-align:center;
}

.journey-photo-wrapper{

    width:100%;

    max-width:700px;

    height:500px;

    margin:
        25px auto;

    overflow:hidden;

    border-radius:20px;

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

    display:flex;

    align-items:center;

    justify-content:center;
}

#journey-photo{

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;

    display:none;

    border-radius:20px;
}

.journey-photo-show{

    display:block !important;

    animation:
        journeyPhotoAppear .6s ease;
}

@keyframes journeyPhotoAppear{

    from{
        opacity:0;
        transform:scale(.95);
    }

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

#journey-era{

    margin-top:30px;

    color:#742047 !important;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    text-align:center;
}

#journey-title{

    max-width:700px;

    margin:
        15px auto;

    color:#691f43 !important;

    font-size:34px;

    text-align:center;
}

#journey-message{

    max-width:700px;

    margin:
        20px auto;

    min-height:80px;

    color:#382330 !important;

    font-size:22px;

    line-height:1.7;

    text-align:center;
}

#journey-message small{

    color:#742047 !important;

    font-size:16px;

    font-weight:800;
}


/* ================================================= */
/* REMEMBER */
/* ================================================= */

#remember-section{

    width:100%;

    max-width:850px;

    margin:
        30px auto;

    padding:
        60px 30px;

    background:
        rgba(255,246,250,.86);

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

    border-radius:40px;

    backdrop-filter:blur(15px);

    box-shadow:
        0 20px 55px
        rgba(72,25,55,.16);

    text-align:center;
}

#remember-section h2{

    font-size:43px;

    color:#691f43 !important;

    margin-bottom:15px;

    text-align:center;
}

.remember-intro{

    max-width:700px;

    margin:
        0 auto 40px;

    font-size:22px;

    line-height:1.7;

    color:#563042 !important;

    text-align:center;
}

#remember-card{

    width:100%;

    max-width:650px;

    min-height:260px;

    margin:
        30px auto;

    padding:
        40px 30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

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

    border-radius:30px;

    box-shadow:
        0 15px 35px
        rgba(72,25,55,.12);

    text-align:center;
}

#remember-icon{

    font-size:55px;

    margin-bottom:20px;

    animation:
        rememberHeart 2s infinite alternate;
}

#remember-message{

    width:100%;

    max-width:600px;

    min-height:100px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#382330 !important;

    font-size:25px;

    font-weight:600;

    line-height:1.7;

    text-align:center;
}

#remember-button{
    margin-top:25px;
}

.remember-message-animation{

    animation:
        rememberMessageReveal .7s ease;
}

@keyframes rememberMessageReveal{

    0%{
        opacity:0;

        transform:
            translateY(20px)
            scale(.95);
    }

    100%{
        opacity:1;

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

@keyframes rememberHeart{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.12);
    }
}


/* ================================================= */
/* ENDING */
/* ================================================= */

#our-story{

    width:100%;

    max-width:850px;

    margin:
        30px auto;

    padding:
        50px 25px;

    text-align:center;
}

.universe-ending{

    width:100%;

    padding:
        50px 30px;

    background:
        rgba(255,246,250,.88);

    border-radius:35px;

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

    backdrop-filter:blur(12px);

    box-shadow:
        0 20px 50px
        rgba(72,25,55,.15);

    text-align:center;
}

.ending-heart{

    font-size:70px;

    animation:
        heartGlow 2s infinite alternate;
}


/* ================================================= */
/* TEXT READABILITY OVERRIDES */
/* ================================================= */

h1,
h2,
h3,
p,
label,
span,
.memory-card,
.flower-card,
.bucket-item,
.journey-intro,
#journey-message,
#remember-message,
#open-letter-message,
#future-letter-message,
#secretMessage,
#memory-message,
.bouquet-message,
#passwordMessage{

    text-rendering:optimizeLegibility;
}

#love-letter p,
#birthday-message p,
#journey-message,
#remember-message,
#open-letter-message,
#future-letter-message,
.flower-card p,
.memory-card p,
.bucket-item{

    color:#382330 !important;

    font-weight:600;
}

#secretMessage,
#memory-message,
.bouquet-message,
#passwordMessage,
#heartMessage{

    color:#742047 !important;

    font-weight:800;
}


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

@media(max-width:900px){

    .welcome-bouquet{
        width:190px;
        min-height:145px;
    }

    .welcome-bouquet span{
        font-size:30px;
    }

    .welcome-mini-bouquet{
        width:145px;
        font-size:25px;
    }

    .mini-left{
        left:2%;
    }

    .mini-right{
        right:2%;
    }
}


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

@media(max-width:768px){

    h1{
        font-size:40px;
    }

    h2{
        font-size:34px;
    }

    .journey-photo-wrapper{
        height:400px;
    }

    .flower-card{
        width:170px;
    }
}

@media(max-width:600px){

    body{
        font-size:16px;
    }

    h1{
        font-size:34px;
        line-height:1.25;
    }

    h2{
        font-size:30px;
        line-height:1.3;
    }

    h3{
        font-size:21px;
    }

    p{
        font-size:17px;
        line-height:1.7;
        padding:0 10px;
    }


    /* Welcome */

    #welcome{
        padding:
            30px 15px;
    }

    .welcome-bouquet{
        width:118px;
        min-height:105px;

        padding:9px;

        gap:3px;

        border-radius:35px;
    }

    .welcome-bouquet span{
        font-size:21px;
    }

    .bouquet-left-top{
        left:-18px;
        top:7%;
    }

    .bouquet-right-top{
        right:-18px;
        top:7%;
    }

    .bouquet-left-bottom{
        left:-18px;
        bottom:8%;
    }

    .bouquet-right-bottom{
        right:-18px;
        bottom:8%;
    }

    .welcome-mini-bouquet{
        width:92px;
        padding:8px;
        font-size:19px;
        letter-spacing:2px;
    }

    .mini-left{
        left:-12px;
        top:30%;
    }

    .mini-right{
        right:-12px;
        top:30%;
    }

    .garden-top{
        top:2%;
        font-size:18px;
        gap:4px;
        letter-spacing:1px;
    }

    .garden-bottom{
        bottom:2%;
        font-size:17px;
        gap:3px;
        letter-spacing:1px;
    }

    .welcome-flower-ring{
        width:96%;
        font-size:17px;
        letter-spacing:2px;
        bottom:2%;
    }

    #welcome h1{
        font-size:38px;
    }

    #welcome>p:not(#heartMessage){
        font-size:18px;
    }

    #heartMessage{
        font-size:23px;
    }


    /* Heart */

    .heart-box{
        width:100px;
        height:100px;
    }

    .big-heart{
        font-size:52px;
    }


    /* Buttons */

    button{
        font-size:15px;
        padding:
            12px 21px;
    }


    /* Pages */

    .surprise-page{
        padding:
            45px 12px
            155px;
    }

    .surprise-symbol{
        font-size:45px;
    }

    .surprise-content{
        padding:
            5px 8px;
    }


    /* Cards */

    .glass-section{
        width:94%;
        padding:
            30px 18px;
    }

    .memory-card{
        width:88%;
    }

    .flower-grid{
        gap:12px;
    }

    .flower-card{
        width:145px;
        padding:
            20px 10px;
    }

    .flower-emoji{
        font-size:45px;
    }

    .flower-card h3{
        font-size:19px;
    }

    .flower-card p{
        font-size:14px;
    }


    /* Letter */

    #love-letter{
        width:92%;
        padding:
            40px 22px;
    }

    #love-letter h2{
        font-size:32px;
    }

    #love-letter p{
        font-size:18px;
        line-height:1.8;
    }

    .signature{
        font-size:24px !important;
    }


    /* Birthday */

    #birthday-message{
        width:90%;
        padding:
            30px 18px;
    }

    #birthday-message p{
        font-size:18px;
    }


    /* Bouquet */

    .bouquet-image{
        width:92%;
    }


    /* Reasons */

    #reason-box{
        font-size:23px;
        min-height:120px;
    }


    /* Other sections */

    #open-when,
    #bucket-list,
    #compliments,
    #secret-password,
    #future-letter{

        width:92%;

        padding:
            35px 18px;
    }

    #open-letter-message,
    #future-letter-message{

        padding:
            24px 18px;

        font-size:19px;
    }

    #compliment-card{
        font-size:23px;
    }

    #secretPassword{
        width:75%;
    }

    #passwordMessage{
        font-size:21px;
    }


    /* Journey */

    #journey-card{
        width:94%;
        padding:15px;
    }

    .journey-photo-wrapper{
        height:400px;
    }

    #journey-title{
        font-size:28px;
        line-height:1.3;
    }

    #journey-message{
        font-size:19px;
        line-height:1.7;
    }

    .journey-intro{
        font-size:20px;
    }


    /* Remember */

    #remember-section{

        width:92%;

        padding:
            45px 18px;

        margin:
            40px auto;
    }

    #remember-section h2{
        font-size:33px;
    }

    .remember-intro{
        font-size:19px;
    }

    #remember-card{
        min-height:280px;
        padding:
            30px 18px;
    }

    #remember-message{
        font-size:21px;
    }

    #remember-icon{
        font-size:48px;
    }


    /* Teaser */

    .surprise-teaser{
        width:94%;

        padding:
            12px 10px;

        gap:9px;
    }

    .surprise-teaser span{
        font-size:13px;
        line-height:1.45;
    }

    .teaser-button{
        width:100%;
        font-size:13px;
        padding:
            11px 14px;
    }


    /* Navigation */

    .page-navigation{
        gap:6px;
        padding:
            0 7px;
    }

    .nav-button{
        min-width:0;
        flex:1;
        min-height:50px;
        padding:
            12px 6px;
        font-size:13px;
    }

    .page-number{
        min-width:88px;
        padding:
            10px 5px;
        font-size:11px;
    }

}


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

@media(max-width:480px){

    .welcome-bouquet{
        width:90px;
        min-height:80px;
    }

    .welcome-bouquet span{
        font-size:18px;
    }

    .welcome-mini-bouquet{
        display:none;
    }

    .welcome-flower-ring{
        display:none;
    }

    .journey-photo-wrapper{
        height:320px;
        border-radius:14px;
    }

    #journey-photo{
        border-radius:14px;
    }

    .flower-card{
        width:135px;
    }

    .flower-emoji{
        font-size:40px;
    }

    .nav-button{
        font-size:12px;
    }
}