/* =========================================
   GLOBAL SETTINGS
========================================= */

:root {
    --background: #0c0b16;
    --background-light: #151321;
    --card: #1a1726;

    --pink: #e9a8bc;
    --pink-light: #f8dce5;
    --pink-dark: #b86e89;

    --cream: #fff4ec;
    --text: #f5eaf0;
    --muted: #b7a8b8;

    --border: rgba(255, 255, 255, 0.09);

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Poppins", Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    background: var(--background);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.8;
    overflow-x: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 5px;
}

::selection {
    background: var(--pink-dark);
    color: white;
}

.hidden {
    display: none !important;
}


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

.background-glow {
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(131, 70, 112, 0.13),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(77, 76, 146, 0.13),
            transparent 35%
        );

    pointer-events: none;
    z-index: -2;
}

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

.star {
    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;
    background: white;

    opacity: 0.35;

    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from {
        opacity: 0.12;
        transform: scale(0.8);
    }

    to {
        opacity: 0.7;
        transform: scale(1.5);
    }
}


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

.intro {
    position: fixed;
    inset: 0;

    min-height: 100vh;
    min-height: 100svh;

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

    padding: 30px 20px;

    background:
        radial-gradient(
            ellipse at center,
            #21172b 0%,
            #100d1c 48%,
            #090812 100%
        );

    z-index: 100;
    overflow-y: auto;

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

.intro.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-content {
    width: 100%;
    max-width: 650px;

    text-align: center;
}

.eyebrow {
    color: var(--pink);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;
    line-height: 1.8;
}

.intro h1 {
    margin-top: 20px;

    font-family: var(--serif);
    font-size: clamp(38px, 7vw, 66px);

    font-weight: 400;
    line-height: 1.1;
}

.intro h1 span {
    display: block;

    color: var(--pink);
    font-style: italic;
}

.intro-description {
    margin-top: 20px;

    color: var(--muted);
    font-size: 13px;
}

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

    height: 210px;
    margin: 25px auto 10px;

    perspective: 1000px;
}

.envelope {
    position: relative;

    width: 230px;
    height: 145px;

    background: #d49aae;
    border-radius: 3px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.35),
        0 0 45px rgba(233, 168, 188, 0.12);

    transform-style: preserve-3d;

    transition: transform 0.8s ease;
}

.envelope-back {
    position: absolute;
    inset: 0;

    background: #c78aa1;
    border-radius: 3px;
}

.envelope-front {
    position: absolute;
    inset: 0;

    background: #e5b0c1;

    clip-path: polygon(
        0 100%,
        0 0,
        50% 57%,
        100% 0,
        100% 100%
    );

    z-index: 3;
}

.envelope-flap {
    position: absolute;
    inset: 0;

    background: #f0c3d0;

    clip-path: polygon(
        0 0,
        100% 0,
        50% 64%
    );

    transform-origin: top center;

    transition: transform 0.8s ease;

    z-index: 4;
}

.envelope-seal {
    position: absolute;

    left: 50%;
    top: 57%;

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

    width: 37px;
    height: 37px;

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

    background: #9e526f;
    color: #fff1f5;

    border: 2px solid #f4d1dc;
    border-radius: 50%;

    font-size: 18px;

    z-index: 5;

    transition: opacity 0.3s ease;
}

.letter-inside {
    position: absolute;

    width: 185px;
    height: 115px;

    left: 50%;
    bottom: 10px;

    transform: translateX(-50%);

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

    background: #fff4ec;
    color: #9e526f;

    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;

    z-index: 2;

    transition:
        transform 0.9s ease,
        bottom 0.9s ease;
}

.envelope.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.envelope.open .envelope-seal {
    opacity: 0;
}

.envelope.open .letter-inside {
    bottom: 75px;
    transform: translateX(-50%) translateY(-25px);
}

.primary-button {
    display: inline-block;

    padding: 13px 25px;

    border: 1px solid rgba(233, 168, 188, 0.45);
    border-radius: 30px;

    background: rgba(233, 168, 188, 0.1);
    color: var(--pink-light);

    font-size: 12px;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.primary-button:hover {
    background: rgba(233, 168, 188, 0.22);
    border-color: var(--pink);

    transform: translateY(-3px);
}

.small-note {
    margin-top: 18px;

    color: #84778d;
    font-size: 10px;
    letter-spacing: 1px;
}


/* =========================================
   MAIN WEBSITE
========================================= */

.website {
    opacity: 1;
    animation: revealWebsite 1.3s ease;
}

@keyframes revealWebsite {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


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

.navbar {
    position: sticky;
    top: 0;

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

    padding: 18px 7%;

    background: rgba(12, 11, 22, 0.88);
    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(15px);

    z-index: 50;
}

.logo {
    font-family: var(--serif);
    font-size: 23px;
    font-style: italic;
}

.logo span {
    color: var(--pink);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    color: var(--muted);
    font-size: 11px;

    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--pink);
}


/* =========================================
   MUSIC PLAYER
========================================= */

.music-player {
    position: fixed;

    right: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 15px;

    background: rgba(27, 22, 39, 0.94);
    border: 1px solid rgba(233, 168, 188, 0.25);
    border-radius: 40px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(15px);

    z-index: 80;
}

.music-icon {
    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    background: rgba(233, 168, 188, 0.15);
    color: var(--pink);

    font-size: 19px;
}

.music-icon.playing {
    animation: musicPulse 2s ease-in-out infinite;
}

@keyframes musicPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(233, 168, 188, 0.1);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(233, 168, 188, 0.07);
    }
}

.music-information {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.music-label {
    color: var(--pink);
    font-size: 8px;
    letter-spacing: 1.5px;
}

.music-title {
    color: var(--cream);
    font-family: var(--serif);
    font-size: 16px;
}

.music-toggle {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: var(--pink);
    color: #271421;

    cursor: pointer;

    font-size: 13px;
}


/* =========================================
   SECTION DEFAULTS
========================================= */

.section {
    position: relative;

    max-width: 1200px;
    margin: 0 auto;

    padding: 115px 7%;
}

.section-heading {
    max-width: 650px;
    margin: 0 auto 55px;

    text-align: center;
}

.section-heading h2 {
    margin-top: 14px;

    font-family: var(--serif);
    font-size: clamp(40px, 6vw, 65px);

    font-weight: 400;
    line-height: 1.1;
}

.section-heading h2 span {
    color: var(--pink);
    font-style: italic;
}

.section-subtitle {
    margin-top: 18px;

    color: var(--muted);
    font-size: 12px;
}


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

.hero {
    min-height: 670px;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;
    gap: 40px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    margin-top: 20px;

    font-family: var(--serif);
    font-size: clamp(45px, 6vw, 76px);

    font-weight: 400;
    line-height: 1.08;
}

.hero h1 span {
    color: var(--pink);
    font-style: italic;
}

.hero-description {
    max-width: 420px;

    margin: 25px 0 30px;

    color: var(--muted);
    font-size: 13px;
    line-height: 2.1;
}

.scroll-indicator {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 65px;

    color: #83788f;
    font-size: 9px;
    letter-spacing: 2px;
}

.scroll-arrow {
    color: var(--pink);
    font-size: 17px;

    animation: arrowBounce 1.5s ease-in-out infinite;
}

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

    50% {
        transform: translateY(5px);
    }
}


/* Hero decoration */

.hero-decoration {
    position: relative;

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

    min-height: 380px;
}

.orbit {
    position: absolute;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(233, 168, 188, 0.18);
    border-radius: 50%;
}

.orbit-one {
    width: 260px;
    height: 260px;

    animation: orbitSpin 25s linear infinite;
}

.orbit-two {
    width: 320px;
    height: 320px;

    border-style: dashed;
    border-color: rgba(233, 168, 188, 0.12);

    animation: orbitSpin 40s linear infinite reverse;
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

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

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(233, 168, 188, 0.18),
            rgba(233, 168, 188, 0.02)
        );

    color: var(--pink);

    font-size: 80px;

    animation: heartBeat 3s ease-in-out infinite;
}

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

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

.orbit-caption {
    position: absolute;
    bottom: 0;

    color: var(--muted);
    font-family: var(--serif);
    font-size: 17px;
    font-style: italic;

    text-align: center;
}


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

.letter-section {
    max-width: 950px;
}

.letter-card {
    max-width: 720px;
    margin: 0 auto;

    padding: 45px 55px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 244, 236, 0.98),
            rgba(246, 224, 227, 0.97)
        );

    color: #493744;

    border-radius: 3px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(233, 168, 188, 0.04);
}

.letter-top {
    display: flex;
    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(120, 70, 100, 0.2);

    color: #a26b83;
    font-size: 10px;
    letter-spacing: 3px;
}

.letter-content {
    padding-top: 30px;

    font-family: var(--serif);
    font-size: 19px;

    line-height: 1.9;
}

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

.letter-greeting {
    font-size: 30px;
    font-style: italic;
}

.letter-ending {
    margin-top: 35px;

    color: #8e4e6c;

    font-size: 23px;
    font-style: italic;
}

.letter-signature {
    margin-top: 35px;

    font-size: 19px;
    font-style: italic;
}

.letter-signature span {
    color: #9d5e7b;
    font-size: 24px;
}

.secret-button {
    display: block;

    margin: 30px auto 0;
    padding: 12px 18px;

    background: transparent;

    border: 1px solid rgba(157, 94, 123, 0.45);
    border-radius: 30px;

    color: #8e4e6c;

    font-size: 11px;

    cursor: pointer;

    transition: background 0.2s ease;
}

.secret-button:hover {
    background: rgba(157, 94, 123, 0.1);
}

.secret-message {
    margin-top: 25px;
    padding: 25px;

    background: rgba(157, 94, 123, 0.08);
    border-radius: 3px;

    text-align: center;

    animation: revealWebsite 0.5s ease;
}

.secret-message p {
    margin-bottom: 12px;

    font-family: var(--serif);
    font-size: 21px;
    font-style: italic;
}

.secret-message span {
    display: inline-block;
    margin-top: 8px;

    color: #b86e89;
    font-size: 25px;
}


/* =========================================
   MEMORIES GALLERY
========================================= */

.memory-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 25px;
}

.memory-card {
    overflow: hidden;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.memory-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233, 168, 188, 0.3);
}

.memory-image {
    height: 320px;

    overflow: hidden;
    background: #211a2a;
}

.memory-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.memory-card:hover .memory-image img {
    transform: scale(1.04);
}

.memory-caption {
    padding: 22px 25px 28px;
}

.memory-number {
    color: var(--pink);
    font-size: 10px;
    letter-spacing: 2px;
}

.memory-caption h3 {
    margin-top: 5px;

    font-family: var(--serif);
    font-size: 27px;

    font-weight: 400;
}

.memory-caption p {
    margin-top: 8px;

    color: var(--muted);
    font-size: 11px;
}


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

.timeline-heading {
    margin-top: 110px;
    margin-bottom: 45px;

    text-align: center;
}

.timeline-heading h3 {
    margin-top: 10px;

    font-family: var(--serif);
    font-size: 42px;
    font-weight: 400;
}

.timeline {
    position: relative;

    max-width: 700px;
    margin: 0 auto;
}

.timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 8px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--pink-dark),
            var(--pink),
            transparent
        );
}

.timeline-item {
    position: relative;

    padding-left: 40px;
    padding-bottom: 40px;
}

.timeline-dot {
    position: absolute;

    left: 2px;
    top: 7px;

    width: 13px;
    height: 13px;

    background: var(--pink);
    border: 3px solid var(--background);

    border-radius: 50%;

    box-shadow: 0 0 15px rgba(233, 168, 188, 0.25);
}

.timeline-date {
    color: var(--pink);
    font-size: 9px;
    letter-spacing: 2px;
}

.timeline-content h4 {
    margin-top: 5px;

    font-family: var(--serif);
    font-size: 29px;
    font-weight: 400;
}

.timeline-content p {
    margin-top: 8px;

    color: var(--muted);
    font-size: 12px;
}


/* =========================================
   LITTLE THINGS
========================================= */

.little-things-grid {
    display: grid;

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

    gap: 18px;
}

.little-card {
    padding: 30px 25px;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.little-card:hover {
    background: rgba(233, 168, 188, 0.045);
    transform: translateY(-4px);
}

.little-icon {
    color: var(--pink);
    font-size: 25px;
}

.little-card h3 {
    margin-top: 15px;

    font-family: var(--serif);
    font-size: 25px;
    font-weight: 400;
}

.little-card p {
    margin-top: 10px;

    color: var(--muted);
    font-size: 11px;
    line-height: 2;
}


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

.ending-section {
    position: relative;

    padding: 130px 20px;

    text-align: center;

    background:
        radial-gradient(
            ellipse at center,
            rgba(113, 60, 98, 0.16),
            transparent 65%
        );
}

.ending-content {
    max-width: 700px;
    margin: 0 auto;
}

.ending-heart {
    display: inline-block;

    margin-bottom: 25px;

    color: var(--pink);
    font-size: 45px;

    animation: heartBeat 3s ease-in-out infinite;
}

.ending-content h2 {
    margin-top: 20px;

    font-family: var(--serif);
    font-size: clamp(42px, 7vw, 72px);

    font-weight: 400;
    line-height: 1.1;
}

.ending-content h2 span {
    color: var(--pink);
    font-style: italic;
}

.ending-description {
    margin-top: 30px;

    color: var(--muted);
    font-size: 12px;
    line-height: 2.2;
}

.ending-final {
    margin-top: 25px;

    color: var(--pink-light);

    font-family: var(--serif);
    font-size: 23px;
    font-style: italic;

    line-height: 1.8;
}

.ending-signature {
    margin: 30px 0;

    color: var(--pink);
    font-family: var(--serif);
    font-size: 19px;
    font-style: italic;
}

.ending-content .primary-button {
    margin-top: 10px;
}


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

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    padding: 25px 20px;

    border-top: 1px solid var(--border);

    color: #8f8396;
    font-size: 10px;

    text-align: center;
}

.footer span {
    color: var(--pink);
    font-size: 17px;
}


/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;
        text-align: center;

        padding-top: 90px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-description {
        max-width: 500px;
    }

    .scroll-indicator {
        margin-top: 35px;
    }

    .hero-decoration {
        min-height: 350px;
    }

    .little-things-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-links {
        gap: 15px;
    }

}

@media (max-width: 600px) {

    .navbar {
        padding: 15px 5%;

        flex-direction: column;
        gap: 12px;
    }

    .logo {
        font-size: 22px;
    }

    .nav-links {
        width: 100%;

        justify-content: center;
        flex-wrap: wrap;

        gap: 10px 20px;
    }

    .nav-links a {
        font-size: 10px;
    }

    .section {
        padding: 85px 6%;
    }

    .hero {
        min-height: auto;
        padding-top: 85px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero-decoration {
        min-height: 310px;
    }

    .orbit-one {
        width: 210px;
        height: 210px;
    }

    .orbit-two {
        width: 260px;
        height: 260px;
    }

    .hero-heart {
        width: 120px;
        height: 120px;

        font-size: 65px;
    }

    .letter-card {
        padding: 28px 23px;
    }

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

    .letter-greeting {
        font-size: 27px;
    }

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

    .memory-image {
        height: 300px;
    }

    .little-things-grid {
        grid-template-columns: 1fr;
    }

    .little-card {
        padding: 25px;
    }

    .music-player {
        right: 12px;
        bottom: 12px;

        padding: 8px 12px;
        gap: 9px;
    }

    .music-title {
        font-size: 14px;
    }

    .music-icon {
        width: 30px;
        height: 30px;
    }

    .music-toggle {
        width: 30px;
        height: 30px;
    }

    .ending-section {
        padding: 100px 20px;
    }

}


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

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

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

}