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

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #080612;
    color: #f8eef4;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================
   BACKGROUND
========================================= */

.background {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(113, 63, 117, 0.25),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #090615 0%,
            #0d0819 50%,
            #05040c 100%
        );
}

.stars {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);

    background-size:
        90px 90px,
        150px 150px;

    background-position:
        10px 20px,
        50px 70px;

    opacity: .45;
}

.moon {
    position: absolute;

    width: clamp(80px, 12vw, 150px);
    height: clamp(80px, 12vw, 150px);

    right: 8%;
    top: 10%;

    border-radius: 50%;

    background: #fff5f8;

    box-shadow:
        0 0 30px rgba(255, 214, 231, .4),
        0 0 90px rgba(255, 150, 200, .12);
}

.moon-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;

    background: rgba(255, 200, 225, .06);

    filter: blur(15px);
}

.mountains {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 35%;

    clip-path: polygon(
        0 100%,
        12% 55%,
        21% 75%,
        34% 30%,
        44% 70%,
        55% 35%,
        66% 72%,
        78% 40%,
        89% 70%,
        100% 50%,
        100% 100%
    );
}

.mountain-back {
    background: #151023;
    opacity: .8;
}

.mountain-front {
    height: 25%;
    background: #08060e;
}


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

.heart-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.floating-heart {
    position: absolute;

    color: rgba(255, 157, 198, .45);

    font-size: 15px;

    animation:
        floatHeart linear infinite;

    user-select: none;
}

@keyframes floatHeart {

    0% {
        transform:
            translateY(110vh)
            rotate(0deg)
            scale(.7);

        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform:
            translateY(-20vh)
            rotate(30deg)
            scale(1.2);

        opacity: 0;
    }
}


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

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;

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

    background: #07050e;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.loading-screen.hide {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    width: min(85%, 350px);
    text-align: center;
}

.loading-heart {
    font-family: serif;
    font-size: 55px;
    color: #f6aacd;

    margin-bottom: 20px;

    animation:
        heartbeat 1.5s infinite;
}

.loading-content p {
    font-size: 13px;
    color: #b7a8b1;
    letter-spacing: .08em;
}

.loading-line {
    width: 100%;
    height: 2px;

    margin-top: 20px;

    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.loading-line span {
    display: block;
    width: 30%;
    height: 100%;

    background: #f6aacd;

    animation: loading 1.5s infinite;
}

@keyframes loading {

    from {
        transform: translateX(-150%);
    }

    to {
        transform: translateX(450%);
    }
}

@keyframes heartbeat {

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

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


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

.section {
    position: relative;

    min-height: 100vh;

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

    padding:
        100px
        20px;
}

.section-inner {
    width: min(1100px, 100%);
    margin: auto;
    text-align: center;
}

.eyebrow {
    margin-bottom: 15px;

    color: #e6a9c6;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .22em;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    font-family: "Cormorant Garamond", serif;
}

h2 {
    font-size: clamp(2.3rem, 6vw, 4.5rem);

    line-height: .98;

    font-weight: 500;

    margin-bottom: 25px;
}

p {
    line-height: 1.8;
}


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

.hero {
    min-height: 100svh;
}

.hero-content {
    width: min(850px, 100%);
}

.hero h1 {
    font-size: clamp(
        3.3rem,
        10vw,
        8rem
    );

    line-height: .85;

    font-weight: 500;

    margin-bottom: 30px;
}

.hero h1 span {
    display: block;

    color: #f2adc9;

    font-style: italic;
}

.hero-subtitle {
    width: min(500px, 100%);
    margin: auto;

    color: #c5b9c1;

    font-size: clamp(
        .95rem,
        2vw,
        1.15rem
    );
}

.main-button {
    margin-top: 35px;

    border: 1px solid rgba(255, 190, 218, .45);

    background:
        rgba(255, 160, 200, .08);

    color: #fff;

    padding:
        15px
        32px;

    border-radius: 999px;

    cursor: pointer;

    letter-spacing: .12em;

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

.main-button:hover,
.main-button:active {
    transform: translateY(-3px);

    background:
        rgba(255, 160, 200, .16);

    box-shadow:
        0 10px 35px rgba(255, 100, 170, .15);
}

.tiny-text {
    margin-top: 12px;

    color: #756b75;

    font-size: 10px;
}

.scroll-hint {
    position: absolute;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    color: #9f8794;

    animation: scrollHint 2s infinite;
}

@keyframes scrollHint {

    0%,100% {
        transform:
            translate(-50%, 0);
    }

    50% {
        transform:
            translate(-50%, 8px);
    }
}


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

.story {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(19, 10, 27, .65),
            transparent
        );
}

.note-card {
    width: min(500px, 100%);

    margin:
        50px auto
        45px;

    padding: 22px;

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

    border-radius: 20px;

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

    backdrop-filter: blur(15px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.3);

    text-align: left;
}

.note-top {
    display: flex;
    align-items: center;
}

.instagram-user strong {
    display: block;

    font-size: 14px;
}

.instagram-user small {
    display: block;

    margin-top: 4px;

    color: #8f838d;

    font-size: 11px;
}

.note-body {
    display: flex;

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

    gap: 20px;

    margin-top: 25px;
}

.note-body p {
    color: #eee3e9;

    font-size: 15px;
}

.note-body span {
    font-size: 25px;
}

.story-text {
    max-width: 600px;

    margin: auto;

    color: #bdb0b9;

    font-size: 16px;
}

.story-text p {
    margin: 10px 0;
}

.story-text .highlight {
    color: #efadca;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 30px;
}


/* =========================================
   TIMELINE
========================================= */

.timeline {
    width: min(700px, 100%);

    margin: 60px auto 0;

    text-align: left;
}

.timeline-item {
    position: relative;

    padding-left: 45px;

    padding-bottom: 50px;
}

.timeline-item::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 10px;
    bottom: -10px;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(241, 165, 199, .5),
            transparent
        );
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;

    left: 0;
    top: 7px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #e9a7c6;

    box-shadow:
        0 0 20px rgba(238, 153, 193, .5);
}

.timeline-card {
    padding: 25px;

    border-radius: 18px;

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

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

.timeline-card span {
    color: #a98497;

    font-size: 9px;

    letter-spacing: .16em;
}

.timeline-card h3 {
    margin:
        8px 0
        10px;

    font-size: 30px;
}

.timeline-card p {
    color: #aaa0a8;

    font-size: 14px;
}


/* =========================================
   LOVE CARDS
========================================= */

.love-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 55px;
}

.love-card {
    min-height: 280px;

    padding: 30px 23px;

    border-radius: 22px;

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

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

    transition:
        transform .3s ease,
        background .3s ease;
}

.love-card:hover {
    transform: translateY(-7px);

    background:
        rgba(255, 160, 200, .055);
}

.love-icon {
    font-size: 30px;

    margin-bottom: 20px;
}

.love-card h3 {
    font-size: 29px;

    margin-bottom: 15px;
}

.love-card p {
    color: #aaa0aa;

    font-size: 13px;
}


/* =========================================
   INTERESTS
========================================= */

.interest-list {
    width: min(750px, 100%);

    margin:
        45px auto;

    display: grid;

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

    gap: 12px;
}

.interest-list div {
    padding: 18px;

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

    border-radius: 15px;

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

    color: #d7ccd3;

    font-size: 14px;
}

.interest-list span {
    margin-right: 7px;
}

.future-description {
    max-width: 550px;

    margin: auto;

    color: #9e929b;
}


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

.photo-frame {
    position: relative;

    width: min(380px, 85vw);

    margin:
        55px auto
        0;

    padding: 14px 14px 25px;

    background: #eee5df;

    transform:
        rotate(-2deg);

    box-shadow:
        0 30px 70px rgba(0,0,0,.45);

    transition:
        transform .4s ease;
}

.photo-frame:hover {
    transform:
        rotate(0deg)
        scale(1.02);
}

.photo-frame img {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;
}

.photo-caption {
    color: #342c2f;

    padding-top: 14px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;
}

.tape {
    position: absolute;

    z-index: 3;

    width: 80px;
    height: 22px;

    top: -10px;

    background:
        rgba(235, 193, 203, .7);

    transform: rotate(-7deg);
}

.tape-left {
    left: -20px;
}

.tape-right {
    right: -20px;

    transform: rotate(7deg);
}


/* =========================================
   PROMISE
========================================= */

.promise-opening {
    color: #e3a8c3;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 28px;
}

.promise-letter {
    width: min(700px, 100%);

    margin:
        50px auto
        0;

    padding:
        clamp(30px, 6vw, 60px);

    text-align: left;

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

    border-radius: 25px;

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.2);
}

.promise-letter p {
    margin-bottom: 25px;

    color: #b8acb4;

    font-size: 15px;
}

.promise-big {
    padding:
        25px 0;

    color: #d8cbd2 !important;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px !important;

    text-align: center;
}

.promise-big strong {
    color: #edabc8;
}

.promise-ending {
    text-align: center;

    color: #bbaab4 !important;
}


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

.bouquet-section {
    overflow: hidden;
}

.bouquet-intro {
    color: #a89ba3;

    margin-bottom: 30px;
}

.bouquet-wrapper {
    position: relative;

    width: min(360px, 90vw);

    height: 420px;

    margin: auto;
}

.bouquet {
    position: absolute;

    width: 100%;
    height: 100%;

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.bouquet.open {
    opacity: 0;

    transform:
        translateY(-30px)
        scale(.8);

    pointer-events: none;
}

.flower {
    position: absolute;

    width: 90px;
    height: 90px;

    left: 50%;
    top: 45px;

    transform:
        translateX(-50%);
}

.flower i {
    position: absolute;

    width: 35px;
    height: 55px;

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

    background:
        linear-gradient(
            135deg,
            #f3aac8,
            #a66a91
        );

    left: 27px;
    top: 15px;

    transform-origin:
        50% 70%;
}

.flower i:nth-child(1) {
    transform: rotate(0deg) translateY(-20px);
}

.flower i:nth-child(2) {
    transform: rotate(72deg) translateY(-20px);
}

.flower i:nth-child(3) {
    transform: rotate(144deg) translateY(-20px);
}

.flower i:nth-child(4) {
    transform: rotate(216deg) translateY(-20px);
}

.flower i:nth-child(5) {
    transform: rotate(288deg) translateY(-20px);
}

.flower::after {
    content: "";

    position: absolute;

    width: 22px;
    height: 22px;

    left: 34px;
    top: 34px;

    border-radius: 50%;

    background: #f0d08b;
}

.flower-one {
    transform:
        translateX(-95px)
        rotate(-12deg)
        scale(.85);
}

.flower-two {
    transform:
        translateX(5px)
        rotate(10deg);
}

.flower-three {
    transform:
        translateX(-10px)
        translateY(60px)
        rotate(-3deg)
        scale(.8);
}

.stem {
    position: absolute;

    width: 5px;
    height: 220px;

    background: #60715e;

    left: 50%;
    top: 100px;

    transform-origin: top;
}

.stem-one {
    transform:
        translateX(-50px)
        rotate(-12deg);
}

.stem-two {
    transform:
        translateX(10px)
        rotate(8deg);
}

.stem-three {
    transform:
        translateX(-15px)
        rotate(-2deg);
}

.paper-wrap {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform:
        translateX(-50%);

    width: 230px;
    height: 160px;

    background:
        linear-gradient(
            135deg,
            #e9d9d3,
            #bca6a9
        );

    clip-path:
        polygon(
            0 15%,
            50% 0,
            100% 15%,
            85% 100%,
            15% 100%
        );
}

.ribbon {
    position: absolute;

    bottom: 20px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        12px 20px;

    border-radius: 999px;

    background:
        #c06c91;

    color: white;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(192,108,145,.3);

    animation:
        ribbonPulse 2s infinite;

    touch-action: manipulation;
}

@keyframes ribbonPulse {

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

    50% {
        transform:
            translateX(-50%)
            scale(1.05);
    }
}


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

.photo-pop {
    position: absolute;

    inset: 0;

    display: flex;

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

    opacity: 0;

    transform:
        translateY(40px)
        scale(.7)
        rotate(-4deg);

    pointer-events: none;

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.2,.8,.2,1);
}

.photo-pop.show {
    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotate(-2deg);
}

.photo-pop-inner {
    width: min(270px, 75vw);

    padding:
        10px
        10px
        20px;

    background: #eee5df;

    box-shadow:
        0 25px 70px rgba(0,0,0,.5);
}

.photo-pop-inner img {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;
}

.photo-pop-inner p {
    padding-top: 10px;

    color: #342c2f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 19px;
}

.bouquet-message {
    margin-top: 10px;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.bouquet-message.show {
    opacity: 1;

    transform:
        translateY(0);
}

.bouquet-message p {
    color: #a99ca5;
}

.bouquet-message strong {
    display: block;

    margin-top: 8px;

    color: #e8adc6;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;
}


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

.confetti {
    position: fixed;

    z-index: 999;

    width: 8px;
    height: 12px;

    pointer-events: none;

    animation:
        confettiFall 1.8s ease-out forwards;
}

@keyframes confettiFall {

    0% {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(0);
    }

    100% {
        opacity: 0;

        transform:
            translate(var(--x), var(--y))
            rotate(720deg);
    }
}


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

.final-section {
    min-height: 100svh;
}

.terminal-box {
    width: min(800px, 100%);

    margin: auto;

    text-align: left;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        rgba(3,2,7,.7);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    backdrop-filter: blur(15px);
}

.terminal-top {
    display: flex;

    gap: 7px;

    padding: 14px 17px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.terminal-top span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #5d515b;
}

.terminal-content {
    min-height: 400px;

    padding:
        30px;

    white-space: pre-wrap;

    color: #d9cdd5;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            11px,
            1.7vw,
            14px
        );

    line-height: 1.9;
}


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

.ending-section {
    min-height: 100svh;

    text-align: center;
}

.ending-inner {
    width: min(800px, 100%);
}

.ending-heart {
    font-family: serif;

    font-size: 70px;

    color: #f0aac8;

    margin-bottom: 20px;

    animation:
        heartbeat 2s infinite;
}

.ending-section h2 {
    max-width: 700px;

    margin:
        0 auto
        30px;
}

.forever-line {
    color: #a99ca6;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            1.3rem,
            4vw,
            2rem
        );

    line-height: 1.5;
}

.signature-love {
    margin-top: 55px;

    color: #f0bdd3;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            1.35rem,
            4vw,
            1.8rem
        );

    line-height: 1.7;
}

.signature-love strong {
    color: #f4a9ca;

    font-weight: 600;
}

.signature-love span {
    color: #b89eab;

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

    font-size:
        clamp(
            .8rem,
            2.5vw,
            1rem
        );
}


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

@media (max-width: 800px) {

    .section {
        padding:
            85px
            18px;
    }

    .moon {
        right: 5%;
        top: 7%;
    }

    .mountains {
        height: 25%;
    }

    .mountain-front {
        height: 17%;
    }

    .love-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .love-card {
        min-height: 250px;
        padding: 24px 18px;
    }

    .interest-list {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .timeline-item {
        padding-left: 32px;
    }

    .timeline-card {
        padding: 20px;
    }

    .terminal-content {
        min-height: 500px;
        padding: 22px 18px;
    }

}


@media (max-width: 520px) {

    .section {
        padding:
            75px
            15px;
    }

    .hero h1 {
        font-size:
            clamp(
                3.2rem,
                17vw,
                5rem
            );
    }

    .hero-subtitle {
        font-size: 14px;

        padding:
            0 10px;
    }

    .main-button {
        padding:
            14px 28px;
    }

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

    .love-card {
        min-height: auto;

        padding: 28px 22px;
    }

    .interest-list {
        grid-template-columns: 1fr;
    }

    .interest-list div {
        padding: 16px;
    }

    .note-card {
        padding: 18px;
    }

    .note-body p {
        font-size: 13px;
    }

    .promise-letter {
        padding: 27px 21px;
    }

    .promise-letter p {
        font-size: 14px;
    }

    .promise-big {
        font-size: 22px !important;
    }

    .bouquet-wrapper {
        height: 390px;
    }

    .terminal-content {
        min-height: 550px;

        font-size:
            10px;

        line-height: 1.8;
    }

    .signature-love {
        margin-top: 45px;
    }

}


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

@media (max-width: 360px) {

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

    h2 {
        font-size: 2.2rem;
    }

    .section {
        padding:
            65px 12px;
    }

    .terminal-content {
        padding:
            18px 13px;

        font-size:
            9px;
    }

}


/* =========================================
   IOS SAFE AREA
========================================= */

@supports (padding: max(0px)) {

    .section {
        padding-left:
            max(
                18px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                18px,
                env(safe-area-inset-right)
            );
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}