@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Playfair+Display:wght@400;500;600;700&family=Special+Elite&display=swap');

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

html {
    scroll-behavior: smooth;
}

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

    font-family: "Cormorant Garamond", serif;

    color: #4b2635;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 184, 205, 0.65),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(207, 184, 255, 0.45),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(255, 211, 170, 0.55),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fff3f5,
            #ffe3eb 45%,
            #f5e7ff
        );

    position: relative;
}


/* =========================
   SOFT VINTAGE TEXTURE
========================= */

.paper-texture {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    opacity: 0.22;

    background-image:
        radial-gradient(
            rgba(150, 70, 100, 0.12) 1px,
            transparent 1px
        );

    background-size: 5px 5px;

    mix-blend-mode: multiply;
}


/* =========================
   MAIN CONTAINERS
========================= */

.intro-page,
.surprise-container,
.memories-container,
.letter-container,
.final-container {

    position: relative;

    z-index: 2;

    width: min(1100px, 92%);

    margin: auto;

    min-height: 100vh;

    padding: 70px 20px;
}


/* =========================
   ORNAMENT
========================= */

.ornament {

    text-align: center;

    font-family: "Playfair Display", serif;

    font-size: 18px;

    letter-spacing: 4px;

    color: #b84d72;

    margin-bottom: 28px;

    animation: fadeDown 1.5s ease both;
}

.bottom-ornament {
    margin-top: 60px;
}


/* =========================
   SMALL TEXT
========================= */

.small-text {

    text-align: center;

    font-family: "Special Elite", monospace;

    font-size: 12px;

    letter-spacing: 5px;

    color: #a54a6c;

    margin-bottom: 25px;

    animation: fadeUp 1.2s ease both;
}


/* =========================
   INTRO
========================= */

.intro-page {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.main-title {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 8vw, 90px);

    line-height: 0.95;

    font-weight: 600;

    color: #56283b;

    text-shadow:
        2px 3px 0 rgba(255,255,255,0.7);

    animation: titleReveal 1.8s ease both;
}


.main-title span {

    font-family: "Great Vibes", cursive;

    font-weight: 400;

    font-size: 1.2em;

    color: #d33f69;

    text-shadow:
        0 5px 20px rgba(211,63,105,0.25);
}


.intro-message {

    font-size: 21px;

    line-height: 1.7;

    max-width: 650px;

    margin: 25px auto;

    color: #704052;

    animation: fadeUp 2s ease both;
}


.date-text {

    font-family: "Special Elite", monospace;

    font-size: 13px;

    letter-spacing: 4px;

    margin: 15px 0 35px;

    color: #a54a6c;
}


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

.surprise-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    position: relative;

    overflow: hidden;

    min-width: 235px;

    padding: 16px 30px;

    border-radius: 50px;

    text-decoration: none;

    color: white;

    font-family: "Playfair Display", serif;

    font-size: 16px;

    letter-spacing: 1px;

    background:
        linear-gradient(
            135deg,
            #d93668,
            #bd467f,
            #8f5ab5
        );

    border: 2px solid rgba(255,255,255,0.65);

    box-shadow:
        0 10px 30px rgba(188, 57, 105, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.5);

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


.surprise-button::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 80%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.5),
            transparent
        );

    transform: skewX(-25deg);

    transition: left 0.7s ease;
}


.surprise-button:hover::before {
    left: 130%;
}


.surprise-button:hover {

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

    box-shadow:
        0 18px 40px rgba(188, 57, 105, 0.4),
        0 0 25px rgba(225, 83, 140, 0.25);
}


.arrow {

    font-size: 23px;

    transition:
        transform 0.3s ease;
}


.surprise-button:hover .arrow {

    transform:
        translateX(7px);
}


/* =========================
   DIVIDER
========================= */

.divider {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin: 28px 0;

    color: #d33f69;

    font-size: 28px;
}


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

.floating {

    position: fixed;

    z-index: 1;

    pointer-events: none;

    opacity: 0.75;

    font-size: 30px;

    filter:
        drop-shadow(
            0 5px 10px rgba(180,60,100,0.15)
        );
}


.flower-1 {
    top: 10%;
    left: 5%;
    animation: floatOne 8s ease-in-out infinite;
}

.flower-2 {
    top: 22%;
    right: 6%;
    animation: floatTwo 10s ease-in-out infinite;
}

.flower-3 {
    bottom: 18%;
    left: 7%;
    animation: floatThree 9s ease-in-out infinite;
}

.flower-4 {
    bottom: 10%;
    right: 8%;
    animation: floatOne 11s ease-in-out infinite;
}


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

.surprise-page {
    text-align: center;
}


.surprise-container {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.surprise-title {

    font-family: "Playfair Display", serif;

    font-size: clamp(44px, 7vw, 78px);

    line-height: 1;

    color: #56283b;

    margin-bottom: 45px;

    animation: titleReveal 1.4s ease both;
}


.surprise-title span {

    font-family: "Great Vibes", cursive;

    color: #d33f69;

    font-weight: 400;

    font-size: 1.2em;
}


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

.photo-frame {

    width: min(410px, 90%);

    padding: 15px 15px 28px;

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #ffe8ef
        );

    border: 1px solid rgba(190,70,110,0.25);

    box-shadow:
        0 20px 45px rgba(150,50,90,0.25),
        0 0 35px rgba(255,170,195,0.3);

    transform: rotate(-2deg);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;

    animation: photoReveal 1.6s ease both;
}


.photo-frame:hover {

    transform:
        rotate(0deg)
        scale(1.04);

    box-shadow:
        0 25px 55px rgba(150,50,90,0.32),
        0 0 45px rgba(255,170,195,0.45);
}


.photo-inner {
    position: relative;
    overflow: hidden;
}


.photo-inner img {

    width: 100%;

    height: 400px;

    object-fit: cover;

    display: block;

    filter:
        saturate(0.95)
        contrast(0.98);
}


.photo-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            rgba(210,55,105,0.18),
            rgba(120,50,150,0.2)
        );

    opacity: 0;

    transition:
        opacity 0.4s ease;
}


.photo-frame:hover .photo-overlay {
    opacity: 1;
}


.photo-overlay span {

    font-size: 65px;

    color: #fff;

    text-shadow:
        0 0 20px #ff91b5;

    animation:
        heartbeat 1.3s infinite;
}


.photo-caption {

    font-size: 18px;

    font-style: italic;

    color: #754052;

    margin-top: 17px;
}


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

.message-card {

    max-width: 750px;

    margin: 55px auto 20px;

    padding: 38px;

    border-radius: 20px;

    background:
        rgba(255, 247, 250, 0.75);

    border:
        1px solid rgba(200,75,115,0.2);

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

    backdrop-filter: blur(8px);

    font-size: 21px;

    line-height: 1.8;

    animation: fadeUp 1.8s ease both;
}


.message-card p {
    margin-bottom: 20px;
}


.message-card h2 {

    font-family: "Great Vibes", cursive;

    font-size: 44px;

    font-weight: 400;

    color: #d33f69;

    text-shadow:
        0 0 18px rgba(211,63,105,0.18);
}


/* =========================
   LETTER PAGE
========================= */

.letter-page {
    min-height: 100vh;
}


.letter-container {

    text-align: center;

    width: min(1000px, 94%);

    margin: auto;

    padding: 70px 20px;
}


.letter-title {

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 8vw, 90px);

    line-height: 0.9;

    color: #56283b;

    margin-bottom: 20px;

    animation:
        titleReveal 1.5s ease both;
}


.letter-title span {

    font-family: "Great Vibes", cursive;

    color: #d33f69;

    font-weight: 400;
}


.letter-subtitle {

    font-size: 21px;

    font-style: italic;

    color: #754052;

    margin-bottom: 45px;
}


.envelope-section {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.envelope-hint {

    font-family: "Special Elite", monospace;

    font-size: 12px;

    letter-spacing: 3px;

    color: #a54a6c;

    margin-bottom: 25px;

    animation:
        pulseText 2s infinite;
}


/* =========================
   ENVELOPE
========================= */

.envelope {

    position: relative;

    width: min(600px, 90vw);

    height: 380px;

    margin: 30px auto 120px;

    cursor: pointer;

    perspective: 1500px;
}


.envelope-back {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #d85c82,
            #b94470
        );

    border-radius: 8px;

    box-shadow:
        0 25px 50px rgba(140,45,80,0.35);

    z-index: 1;
}


/* =========================
   LETTER PAPER
========================= */

.letter-paper {

    position: absolute;

    width: 94%;

    left: 3%;

    bottom: 5px;

    height: 350px;

    background:
        linear-gradient(
            135deg,
            #fffaf5,
            #fff0f4 55%,
            #f9edff
        );

    border:
        1px solid rgba(190,100,130,0.35);

    border-radius: 5px;

    z-index: 2;

    overflow-y: auto;

    text-align: left;

    box-shadow:
        0 10px 30px rgba(100,40,70,0.2);

    scrollbar-width: thin;

    scrollbar-color:
        #d15a82
        #f7dbe5;

    transition:
        transform 1.4s cubic-bezier(.2,.8,.2,1),
        width 1.2s ease,
        height 1.2s ease,
        left 1.2s ease,
        z-index 0s linear 0.6s;
}


.letter-paper::-webkit-scrollbar {
    width: 8px;
}

.letter-paper::-webkit-scrollbar-track {
    background: #f7dbe5;
}

.letter-paper::-webkit-scrollbar-thumb {
    background: #d15a82;
    border-radius: 10px;
}


/* =========================
   LETTER CONTENT
========================= */

.letter-content {

    padding: 55px 60px 80px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    line-height: 1.9;

    color: #4b2635;

    max-width: 900px;

    margin: auto;
}


.letter-content p {
    margin-bottom: 25px;
}


.letter-date {

    text-align: right;

    font-family:
        "Special Elite",
        monospace;

    font-size: 12px;

    letter-spacing: 2px;

    color: #a54a6c;
}


.dear {

    font-family:
        "Great Vibes",
        cursive;

    font-size: 48px;

    color: #d33f69;

    margin-bottom: 25px !important;
}


/* =========================
   SPECIAL WISH
========================= */

.special-wish {

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

    font-style: italic;

    text-align: center;

    color: #bd426d;

    padding: 30px 25px;

    margin: 40px 0 !important;

    border-top:
        1px solid #e1a2b7;

    border-bottom:
        1px solid #e1a2b7;

    background:
        rgba(255,220,231,0.25);

    border-radius: 15px;
}


/* =========================
   LETTER HIGHLIGHT
========================= */

.letter-highlight {

    text-align: center;

    font-family:
        "Great Vibes",
        cursive;

    font-size: 45px;

    line-height: 1.35;

    font-weight: 400;

    color: #d33f69;

    margin: 45px 0;

    text-shadow:
        0 4px 18px rgba(211,63,105,0.2);
}


.letter-ending {

    text-align: right;

    margin-top: 55px;

    font-style: italic;
}


.letter-ending span {

    font-family:
        "Great Vibes",
        cursive;

    font-size: 36px;

    color: #d33f69;
}


/* =========================
   ENVELOPE FLAP
========================= */

.envelope-flap {

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 0;

    border-left:
        300px solid transparent;

    border-right:
        300px solid transparent;

    border-top:
        205px solid #ee7697;

    transform-origin:
        top center;

    transition:
        transform 1s ease;

    z-index: 5;

    filter:
        drop-shadow(
            0 3px 4px rgba(120,30,60,0.2)
        );
}


/* =========================
   ENVELOPE FRONT
========================= */

.envelope-front {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 0;

    border-left:
        300px solid transparent;

    border-right:
        300px solid transparent;

    border-bottom:
        205px solid #c54c73;

    z-index: 4;

    pointer-events: none;
}


/* =========================
   WAX HEART
========================= */

.wax-seal {

    position: absolute;

    left: 50%;

    top: 52%;

    transform:
        translate(-50%, -50%);

    width: 72px;

    height: 72px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ff91ad,
            #c72f5d 65%,
            #8f2445
        );

    border:
        4px solid #ffb6c8;

    z-index: 6;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 28px;

    box-shadow:
        0 7px 20px rgba(120,30,60,0.35),
        0 0 20px rgba(255,105,150,0.25);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}


.envelope.open .envelope-flap {

    transform:
        rotateX(180deg);

    z-index: 1;
}


.envelope.open .letter-paper {

    width: min(900px, 94vw);

    height: min(75vh, 700px);

    left: 50%;

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

    z-index: 10;

    transition-delay:
        0.45s;
}


.envelope.open .wax-seal {

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.4);
}


/* =========================
   FINAL PAGE
========================= */

.final-page {
    text-align: center;
}


.final-container {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.birthday-for {

    font-family:
        "Special Elite",
        monospace;

    font-size: 12px;

    letter-spacing: 5px;

    margin-top: 20px;

    color: #a54a6c;
}


.birthday-name {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(55px, 10vw, 110px);

    line-height: 0.85;

    margin: 20px 0 45px;

    color: #56283b;

    animation:
        birthdayReveal 2s ease both,
        glowText 3s ease-in-out infinite alternate;
}


.birthday-name span {

    font-family:
        "Great Vibes",
        cursive;

    color: #d33f69;

    font-weight: 400;
}


/* =========================
   CAKE
========================= */

.cake-area {

    position: relative;

    width: 330px;

    height: 300px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    margin-bottom: 35px;
}


.cake-glow {

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,120,170,0.3),
            rgba(190,120,255,0.12),
            transparent 70%
        );

    filter:
        blur(25px);

    animation:
        cakeGlow 2s infinite alternate;
}


.cake {

    position: relative;

    width: 250px;

    height: 220px;
}


.candles {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    display: flex;

    justify-content: center;

    gap: 35px;

    z-index: 5;
}


.candle {

    width: 18px;

    height: 65px;

    background:
        linear-gradient(
            90deg,
            #ffc0d2,
            #fff0f5,
            #e99bb5
        );

    border:
        2px solid #bd6684;

    position: relative;

    border-radius: 4px;
}


.candle-two {

    height: 78px;

    margin-top: -13px;
}


.flame {

    position: absolute;

    width: 18px;

    height: 26px;

    left: 50%;

    top: -28px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 50% 70%,
            #fff7a8,
            #ff9b54 55%,
            #ff5b79
        );

    border-radius:
        50% 50% 50% 50%;

    box-shadow:
        0 0 18px rgba(255,140,80,0.8);

    animation:
        flame 0.8s ease-in-out infinite alternate;
}


.cake-top {

    position: absolute;

    bottom: 120px;

    left: 15px;

    width: 220px;

    height: 55px;

    border-radius:
        50% 50% 10px 10px;

    background:
        linear-gradient(
            135deg,
            #ffc5d6,
            #f59bb8
        );

    border:
        3px solid #bd6684;
}


.cake-middle {

    position: absolute;

    bottom: 55px;

    left: 15px;

    width: 220px;

    height: 75px;

    background:
        linear-gradient(
            135deg,
            #e66b91,
            #bd4d78
        );

    border:
        3px solid #9c3c62;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    color: #fff;

    font-size: 20px;
}


.cake-bottom {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 250px;

    height: 65px;

    background:
        linear-gradient(
            135deg,
            #b9436e,
            #873554
        );

    border:
        3px solid #713047;

    border-radius:
        0 0 15px 15px;
}


.cake-plate {

    position: absolute;

    bottom: -15px;

    left: -20px;

    width: 290px;

    height: 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #f4c8d8,
            #fff0f5,
            #d9c4f5
        );

    border:
        2px solid #b57998;
}


/* =========================
   BIRTHDAY MESSAGE
========================= */

.birthday-message {

    max-width: 750px;

    margin-top: 30px;
}


.celebrate-text {

    font-size: 20px;

    font-style: italic;

    color: #754052;

    margin-bottom: 15px;
}


.birthday-message h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(55px, 9vw, 100px);

    line-height: 0.8;

    color: #56283b;

    margin-bottom: 30px;
}


.birthday-message h2 span {

    font-family:
        "Great Vibes",
        cursive;

    font-weight: 400;

    color: #d33f69;

    font-size: 1.15em;
}


.final-message {

    font-size: 21px;

    line-height: 1.8;

    color: #704052;
}


/* =========================
   QUOTE
========================= */

.final-quote {

    max-width: 700px;

    margin: 70px auto 30px;

    font-family:
        "Great Vibes",
        cursive;

    font-size: 34px;

    color: #bd426d;
}


.quote-line {

    height: 1px;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d78ba5,
            transparent
        );

    margin: 20px 0;
}


.heart-animation {

    font-size: 50px;

    color: #e33d6c;

    margin: 20px;

    animation:
        heartbeat 1.2s infinite;

    filter:
        drop-shadow(
            0 0 15px rgba(227,61,108,0.4)
        );
}


.signature {

    font-size: 19px;

    margin-bottom: 40px;

    color: #704052;
}


.signature h3 {

    font-family:
        "Great Vibes",
        cursive;

    font-size: 38px;

    font-weight: 400;

    color: #d33f69;

    margin-top: 8px;
}


/* =========================
   CONFETTI
========================= */

.confetti-container {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 10;
}


.confetti {

    position: absolute;

    top: -20px;

    width: 8px;

    height: 15px;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #ff5f91,
            #b65be0
        );

    animation:
        confettiFall 5s linear infinite;
}


.c1 { left: 5%; animation-delay: 0s; }
.c2 { left: 15%; animation-delay: 1s; }
.c3 { left: 25%; animation-delay: 2s; }
.c4 { left: 35%; animation-delay: .5s; }
.c5 { left: 45%; animation-delay: 1.5s; }
.c6 { left: 55%; animation-delay: 2.5s; }
.c7 { left: 65%; animation-delay: .8s; }
.c8 { left: 75%; animation-delay: 1.8s; }
.c9 { left: 85%; animation-delay: 2.8s; }
.c10 { left: 95%; animation-delay: 1.2s; }


/* =========================
   FOOTER
========================= */

footer {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 25px 10px 35px;

    font-family:
        "Special Elite",
        monospace;

    font-size: 10px;

    letter-spacing: 2px;

    color: #a54a6c;
}


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

@keyframes fadeUp {

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

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


@keyframes fadeDown {

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

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


@keyframes titleReveal {

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

        filter: blur(8px);
    }

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

        filter: blur(0);
    }
}


@keyframes buttonReveal {

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

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


@keyframes photoReveal {

    from {
        opacity: 0;
        transform:
            translateY(50px)
            rotate(-8deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            rotate(-2deg);
    }
}


@keyframes birthdayReveal {

    from {
        opacity: 0;

        transform:
            scale(0.5)
            translateY(40px);

        letter-spacing: 15px;
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        letter-spacing: normal;
    }
}


@keyframes glowText {

    from {
        text-shadow:
            0 0 0
            rgba(211,63,105,0);
    }

    to {
        text-shadow:
            0 0 30px
            rgba(211,63,105,0.3);
    }
}


@keyframes floatOne {

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

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


@keyframes floatTwo {

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

    50% {
        transform:
            translate(-25px,-40px)
            rotate(-15deg);
    }
}


@keyframes floatThree {

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

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


@keyframes heartbeat {

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

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


@keyframes pulseText {

    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cakeGlow {

    from {
        transform:
            scale(0.9);

        opacity: 0.3;
    }

    to {
        transform:
            scale(1.1);

        opacity: 0.7;
    }
}


@keyframes flame {

    from {
        transform:
            translateX(-50%)
            scale(0.85)
            rotate(-3deg);
    }

    to {
        transform:
            translateX(-50%)
            scale(1.1)
            rotate(3deg);
    }
}


@keyframes confettiFall {

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

        opacity: 1;
    }

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

        opacity: 0;
    }
}


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

@media (max-width: 700px) {

    .intro-page,
    .surprise-container,
    .letter-container,
    .final-container {

        width: 94%;

        padding:
            55px
            10px
            70px;
    }


    .main-title {
        font-size: 50px;
    }


    .intro-message {
        font-size: 18px;
    }


    .surprise-title {
        font-size: 48px;
    }


    .photo-frame {
        width: 92%;
    }


    .photo-inner img {
        height: 360px;
    }


    .message-card {
        padding: 28px 20px;
        font-size: 18px;
    }


    .message-card h2 {
        font-size: 38px;
    }


    .letter-title {
        font-size: 55px;
    }


    .letter-subtitle {
        font-size: 18px;
    }


    .envelope {

        width: 330px;

        height: 230px;
    }


    .envelope-flap {

        border-left-width: 165px;

        border-right-width: 165px;

        border-top-width: 125px;
    }


    .envelope-front {

        border-left-width: 165px;

        border-right-width: 165px;

        border-bottom-width: 125px;
    }


    .letter-paper {

        width: 90%;

        left: 5%;

        height: 215px;
    }


    .letter-content {

        padding:
            35px
            25px
            70px;

        font-size: 19px;

        line-height: 1.75;
    }


    .envelope.open .letter-paper {

        width: 94vw;

        height: 78vh;

        left: 50%;

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


    .dear {
        font-size: 42px;
    }


    .special-wish {
        font-size: 20px;
    }


    .letter-highlight {
        font-size: 37px;
    }


    .letter-ending span {
        font-size: 31px;
    }


    .birthday-name {
        font-size: 65px;
    }


    .cake-area {

        transform: scale(0.8);

        margin-top: -15px;

        margin-bottom: -15px;
    }


    .birthday-message h2 {
        font-size: 58px;
    }


    .final-message {
        font-size: 18px;
    }


    .final-quote {
        font-size: 28px;
    }


    .floating {
        font-size: 21px;
        opacity: 0.55;
    }
}


@media (max-width: 380px) {

    .envelope {

        width: 290px;

        height: 195px;
    }


    .envelope-flap {

        border-left-width: 145px;

        border-right-width: 145px;

        border-top-width: 105px;
    }


    .envelope-front {

        border-left-width: 145px;

        border-right-width: 145px;

        border-bottom-width: 105px;
    }


    .letter-paper {
        height: 180px;
    }


    .envelope.open .letter-paper {

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


    .cake-area {
        transform: scale(0.7);
    }
}