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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #fff5f7;
    color: #3d1f29;
    line-height: 1.6;
}


/* =========================
   COMMON
========================= */

section {
    min-height: 100vh;
    padding: 80px 20px;

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

    text-align: center;
}

h1,
h2 {
    line-height: 1.2;
}

h2 {
    font-size: clamp(2rem, 8vw, 4rem);
    margin-bottom: 25px;
}

p {
    font-size: 1.05rem;
    max-width: 650px;
}


/* =========================
   HERO
========================= */

.hero {
    position: relative;
    overflow: hidden;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 20%,
            #ffdce5,
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            #ffc8d6,
            transparent 30%
        ),
        #fff7f9;
}

.hero-content {
    max-width: 800px;
    animation: fadeUp 1.2s ease;
}

.small-text {
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
    color: #b4234d;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.intro {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    margin-bottom: 35px;
}


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

button {
    border: none;
    cursor: pointer;

    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;

    padding: 15px 28px;
    border-radius: 50px;

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

button:hover {
    transform: translateY(-4px);
}

#startBtn {
    background: #b4234d;
    color: white;

    box-shadow: 0 10px 30px rgba(180, 35, 77, 0.25);
}

#startBtn:hover {
    box-shadow: 0 15px 35px rgba(180, 35, 77, 0.35);
}


/* =========================
   STORY
========================= */

.story {
    background: #ffffff;
}

.story p {
    font-size: 1.2rem;
}


/* =========================
   PHOTOS
========================= */

.photos {
    background: #fff0f4;
}

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

.photos {
    background: #fff0f4;
}

.section-label {
    color: #b4234d;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.gallery-intro {
    margin-bottom: 35px;
    color: #6b4a54;
}

.photo-grid {
    width: 100%;
    max-width: 1050px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.photo-card {
    position: relative;

    overflow: hidden;

    border-radius: 25px;

    background: white;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12);

    opacity: 0;
    transform: translateY(50px) scale(0.95);

    animation: photoReveal 1s ease forwards;
}

.photo-card:nth-child(1) {
    animation-delay: 0.2s;
}

.photo-card:nth-child(2) {
    animation-delay: 0.4s;
}

.photo-card:nth-child(3) {
    animation-delay: 0.6s;
}

.photo-card img {
    display: block;

    width: 100%;
    height: 380px;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

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

.photo-card::after {
    content: "❤️";

    position: absolute;

    inset: 0;

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

    font-size: 2.5rem;

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

    opacity: 0;

    transition: opacity 0.4s ease;
}

.photo-card:hover::after {
    opacity: 1;
}


/* Gallery animation */

@keyframes photoReveal {

    from {
        opacity: 0;
        transform:
            translateY(50px)
            scale(0.95);
    }

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

}


/* Mobile */

@media (max-width: 700px) {

    .photo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .photo-card img {
        height: 350px;
    }

}

.photo-grid img:hover {
    transform: translateY(-10px) scale(1.02);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.18);
}


/* =========================
   PROPOSAL
========================= */

.proposal {
    background:
        radial-gradient(circle at center, #ffd6e0, #fff5f7);
}

.question-intro {
    margin-bottom: 20px;
}

.proposal h2 {
    color: #b4234d;
    font-size: clamp(2.5rem, 10vw, 6rem);
}

.buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
    margin-top: 35px;
}

#yesBtn {
    background: #b4234d;
    color: white;

    min-width: 130px;

    box-shadow:
        0 10px 30px rgba(180, 35, 77, 0.25);
}

#noBtn {
    background: white;
    color: #555;

    min-width: 130px;

    border: 2px solid #ddd;
}


/* =========================
   FINAL MESSAGE
========================= */

.final-message {
    display: none;

    background:
        radial-gradient(circle at center, #ffc5d4, #fff5f7);
}

.final-message.show {
    display: flex;

    animation: fadeUp 1s ease;
}

.final-message h2 {
    color: #b4234d;
}

.final-message p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}


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

@keyframes fadeUp {

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

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

}


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

@media (max-width: 700px) {

    section {
        padding: 60px 18px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .photo-grid img {
        height: 320px;
    }

    .buttons {
        flex-direction: column;
    }

    #yesBtn,
    #noBtn {
        width: 180px;
    }

}


/* =========================
   LOADING SCREEN
========================= */

#loader {
    position: fixed;

    inset: 0;

    z-index: 10000;

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

    text-align: center;

    background: #fff5f7;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

#loader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    animation: loaderAppear 1s ease;
}

.loader-heart {
    font-size: 4rem;

    margin-bottom: 20px;

    animation: heartbeat 1.2s infinite;
}

.loader-content h2 {
    font-size: 2rem;

    color: #b4234d;

    margin-bottom: 10px;
}

.loader-content p {
    color: #6b4a54;

    font-size: 1rem;

    margin: auto;
}

.loader-line {
    width: 180px;
    height: 4px;

    margin: 25px auto 0;

    border-radius: 10px;

    background: #f3c4d0;

    overflow: hidden;

    position: relative;
}

.loader-line::after {
    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;
    height: 100%;

    background: #b4234d;

    animation: loadingLine 2s ease forwards;
}


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

@keyframes heartbeat {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes loadingLine {

    from {
        left: -100%;
    }

    to {
        left: 0;
    }

}

@keyframes loaderAppear {

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

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

}

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

#hearts-container {
    position: fixed;
    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 999;
}

.floating-heart {
    position: absolute;

    bottom: -40px;

    font-size: 20px;

    opacity: 0;

    animation: floatHeart linear forwards;
}

@keyframes floatHeart {

    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform:
            translateY(-110vh)
            scale(1.3)
            rotate(20deg);

        opacity: 0;
    }

}


/* =========================
   CELEBRATION
========================= */

#celebration {
    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 9998;
}

.confetti {
    position: absolute;

    top: -20px;

    width: 10px;
    height: 18px;

    opacity: 0;

    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {

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

        opacity: 1;
    }

    100% {
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;
    }

}


/* Big final heart */

.final-heart {
    font-size: 5rem;

    margin-bottom: 20px;

    animation: finalHeart 1s ease infinite;
}

@keyframes finalHeart {

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

    50% {
        transform: scale(1.2);
    }

}