/* ============================================================
   EX.CSS - Interactive Slide Deck Styles
   ============================================================ */

/* === RESET & BASE === */
*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --bg: #08080c;
    --bg-el: #111118;
    --fg: #f0e8ea;
    --fg-m: #8a8490;
    --accent: #e84393;
    --accent-s: #fd79a8;
    --accent-glow: rgba(232, 67, 147, 0.3);
    --card: #0e0e15;
    --card-b: rgba(255, 255, 255, 0.06);
    --line-c: rgba(255, 255, 255, 0.06);
    --dark: #000;

    /* Luxurious palette for Section 4 */
    --rose-gold: #e8b4b8;
    --champagne: #f7e7ce;
    --crimson: #9b2335;
    --deep-burgundy: #5c1a1a;
    --blush-pink: #fcdde5;
    --gold-accent: #d4af37;

     --champagne:#fff1f7;
    --rose-gold:#ff5ca8;
    --gold-accent:#ffc1de;

}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* === MUSIC CONTROL UI === */
.music-control {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 9999;
    opacity: 0;
    transform: translateX(3rem);
    pointer-events: none;
    /* Transisi halus dengan efek elastic cubic-bezier agar lebih dinamis */
    transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.music-control.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* --- Spinning Vinyl Disc (Piringan Hitam) --- */
.music-disc {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    /* Menggunakan tema Glassmorphism transparan selaras dengan tombol utama */
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    animation: spinDisc 4s linear infinite;
    animation-play-state: paused;
}

/* Mengaktifkan pendar cahaya (glow) merah muda mewah ketika musik berputar */
.music-disc.playing {
    animation-play-state: running;
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
}

.music-disc i {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.4s ease, filter 0.4s ease;
}

/* Warna ikon piringan saat aktif mengikuti warna aksen romantis */
.music-disc.playing i {
    color: var(--accent);
    filter: drop-shadow(0 0 5px var(--accent-glow));
}

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

/* --- Control Button (Tombol Kontrol) --- */
.music-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    /* Struktur glassmorphic dengan posisi relatif untuk efek slide-in gradient */
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--fg);
}

/* Overlay gradient warna pink-rose romantis menyala tipis saat dihover */
.music-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-s));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
    z-index: 0;
}

.music-btn i {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

/* Efek Hover Glass-Glow Mewah */
.music-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-2px);
}

.music-btn:hover::before {
    opacity: 0.15;
}

/* Efek Klik (Active) yang responsif */
.music-btn:active {
    transform: translateY(0) scale(0.95);
}

/* === INTRO GATE === */
.gate-screen {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 12, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.gate-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gate-card {
    width: min(92vw, 440px);
    padding: 2rem 1.4rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(17, 17, 24, 0.96);
    text-align: center;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.5);
    animation: gatePopIn 0.45s ease;
}

.gate-step {
    animation: gatePopIn 0.35s ease;
}

.gate-step-hidden {
    display: none;
}

.gate-title {
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.4rem;
}

.gate-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1rem;
    min-height: 1.4rem;
}

.gate-stickers {
    pointer-events: none;
    position: relative;
    height: 24px;
    margin: 0.4rem 0 0;
}

.gate-sticker {
    position: absolute;
    bottom: 0;
    font-size: 1rem;
    animation: stickerFloat 1.8s ease forwards;
}

.gate-actions {
    position: relative;
    width: min(85vw, 330px);
    height: 120px;
    margin: 0 auto;
}

.gate-day-options,
.gate-special-actions {
    display: grid;
    gap: 0.7rem;
    height: auto;
}

.gate-btn {
    position: absolute;
    width: 120px;
    height: 46px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    letter-spacing: 0;
}

.gate-day-options .gate-btn,
.gate-special-actions .gate-btn {
    position: static;
    width: 100%;
}

.gate-day-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.gate-day-btn:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: var(--accent-s);
    box-shadow: 0 0.8rem 1.8rem rgba(232, 67, 147, 0.18);
}

.gate-btn-yes {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-s));
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0.8rem 2rem rgba(232, 67, 147, 0.25);
}

.gate-btn-yes:hover {
    transform: translateY(-2px);
}

.gate-btn-no {
    left: 190px;
    top: 34px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.cute-toasts {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000010;
    pointer-events: none;
}

.cute-toast {
    margin-top: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(17, 17, 24, 0.88);
    color: #fff;
    font-size: 0.78rem;
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.35);
    animation: toastInOut 2.1s ease forwards;
}

@keyframes gatePopIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes stickerFloat {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.6);
    }
    25% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(0.9);
    }
}

@keyframes toastInOut {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.9);
    }
    18%,
    78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* === OPTIMASI RESPONSIVE (MOBILE FRIENDLY) === */
@media (max-width: 576px) {
    .music-control {
        top: 1rem;
        right: 1rem;
        gap: 0.5rem;
    }

    /* Sedikit memperkecil ukuran CD di HP agar tidak terlalu memakan tempat */
    .music-disc {
        width: 2.4rem;
        height: 2.4rem;
        border-width: 1px;
    }

    .music-disc i {
        font-size: 1.1rem;
    }

    /* Menyesuaikan ukuran tombol kontrol musik agar tetap mudah ditekan (touch-friendly) */
    .music-btn {
        width: 2.2rem;
        height: 2.2rem;
        border-width: 1px;
    }

    .music-btn i {
        font-size: 0.75rem;
    }

    .gate-actions {
        width: min(86vw, 310px);
    }

    .gate-btn {
        width: 108px;
        height: 44px;
    }

    .gate-day-options .gate-btn,
    .gate-special-actions .gate-btn {
        width: 100%;
    }

    .gate-btn-no {
        left: 174px;
    }
}

/* === SECTION SYSTEM === */
.sections-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.section {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(4vh);
    pointer-events: none;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.section.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.section.leaving {
    opacity: 0;
    transform: translateY(-4vh);
}

/* === SHARED BUTTON === */
.btn-next {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 2.2rem;
    background: transparent;
    color: var(--fg);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    z-index: 1000;
    flex-shrink: 0;
}

.btn-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-s));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

.btn-next:hover {
    border-color: var(--accent);
    box-shadow: 0 0 3rem var(--accent-glow);
    transform: translateY(-0.15rem);
}

.btn-next:hover::before {
    opacity: 0.15;
}

.btn-next span,
.btn-next i {
    position: relative;
    z-index: 1;
}

.btn-next i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.btn-next:hover i {
    transform: translateX(0.25rem);
}

/* === PARTICLES === */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

/* === SECTION 1: FLOWERS === */
.section-1 {
    background: var(--bg);
    overflow: hidden;
}

.flower-scene {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 100px;
}

.flower-scene,
.flower-scene * {
    pointer-events: none;
}

.flower-scene * {
    animation-play-state: running !important;
}

.flower-scene .main-title {
    position: absolute;
    top: 12%; /* <-- Ubah dari 7% ke 12% atau sesuai selera */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 999;
    pointer-events: none;
    animation: fadeInText 3s ease forwards;
    opacity: 0;
}

.flower-scene .main-title h1 {
    font-family: 'Sacramento', cursive;
    font-size: clamp(3rem, 8vmin, 7rem);
    color: #fff;
    text-shadow: 0 0 1rem #ff9ff3, 0 0 2.5rem #ff9ff3, 0 0 5rem #ff9ff3;
    margin: 0;
    font-weight: 400;
}

.flower-scene .main-title p {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.4rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: clamp(0.55rem, 1.6vmin, 0.9rem);
    margin-top: 0.5rem;
    text-transform: uppercase;
    font-weight: 300;
}

@keyframes fadeInText {
    0% { opacity: 0; transform: translate(-50%, -40%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

.section-1 .btn-next {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeInBtn 1.5s 3.5s ease forwards;
    opacity: 0;
}

.section-1 .btn-next:hover {
    transform: translate(-50%, -0.15rem);
}

.section-1 .btn-next:active {
    transform: translate(-50%, 0);
}

@keyframes fadeInBtn {
    to { opacity: 1; }
}

/* === FLOWER CSS === */
.night {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    filter: blur(0.1vmin);
    background-image:
        radial-gradient(ellipse at top, transparent 0%, var(--dark)),
        radial-gradient(ellipse at bottom, var(--dark), rgba(145, 233, 255, 0.2)),
        repeating-linear-gradient(220deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px),
        repeating-linear-gradient(189deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px),
        repeating-linear-gradient(148deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px),
        linear-gradient(90deg, rgb(7, 107, 42), rgb(240, 240, 240));
    z-index: 0;
}

.night::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 50% 10%, white, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.6), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 5s ease-in-out infinite;
    z-index: 1;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.flowers {
    position: relative;
    transform: scale(0.9);
}

.flower {
    position: absolute;
    bottom: 10vmin;
    transform-origin: bottom center;
    z-index: 10;
    --fl-speed: 0.3s;
}

.flower--1 { animation: mf1 4s linear infinite; }
.flower--1 .flower__line { height: 70vmin; animation-delay: 0.3s; }

.flower--2 {
    left: 50%;
    transform: rotate(20deg);
    animation: mf2 4s linear infinite;
}

.flower--2 .flower__line { height: 60vmin; animation-delay: 0.6s; }

.flower--3 {
    left: 50%;
    transform: rotate(-15deg);
    animation: mf3 4s linear infinite;
}

.flower--3 .flower__line { animation-delay: 0.9s; }

.flower__leafs {
    position: relative;
    animation: bf 2s backwards;
}

.flower__leafs--1 { animation-delay: 1.1s; }
.flower__leafs--2 { animation-delay: 1.4s; }
.flower__leafs--3 { animation-delay: 1.7s; }

.flower__leafs::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    width: 8vmin;
    height: 8vmin;
    background-color: #6bf0ff;
    filter: blur(10vmin);
}

.flower__leaf {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 8vmin;
    height: 11vmin;
    border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%;
    background-color: #f672b0;
    background-image: linear-gradient(to top, #ee5286, #ee5286);
    transform-origin: bottom center;
    opacity: 0.9;
    box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}

.flower__leaf--1 { transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); }
.flower__leaf--2 { transform: translate(-50%, -4%) rotateX(40deg); }
.flower__leaf--3 { transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); }
.flower__leaf--4 {
    width: 8vmin;
    height: 8vmin;
    transform-origin: bottom left;
    border-radius: 4vmin 10vmin 4vmin 4vmin;
    transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
    background-image: linear-gradient(to top, #ee5286, #ee5286);
    z-index: 1;
    opacity: 0.8;
}

.flower__white-circle {
    position: absolute;
    left: -3.5vmin;
    top: -3vmin;
    width: 9vmin;
    height: 4vmin;
    border-radius: 50%;
    background-color: #fff;
}

.flower__line {
    height: 55vmin;
    width: 1.5vmin;
    background-image:
        linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)),
        linear-gradient(to top, transparent 10%, #583e08, #944415);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    animation: gft 4s backwards;
}

.flower__line__leaf {
    --w: 7vmin;
    --h: calc(var(--w) + 2vmin);
    position: absolute;
    top: 20%;
    left: 90%;
    width: var(--w);
    height: var(--h);
    border-top-right-radius: var(--h);
    border-bottom-left-radius: var(--h);
    background-image: linear-gradient(to top, rgba(20, 117, 122, 0.4), #095721);
}

.flower__line__leaf--1 { transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--2 { top: 45%; transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--3, .flower__line__leaf--4, .flower__line__leaf--6 {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: var(--h);
    border-bottom-right-radius: var(--h);
    left: -460%;
    top: 12%;
    transform: rotate(-70deg) rotateY(30deg);
}

.flower__line__leaf--4 { top: 40%; }
.flower__line__leaf--5 { top: 0; transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0.6); }
.flower__line__leaf--6 { top: -2%; left: -450%; transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0.6); }

.flower__light {
    position: absolute;
    bottom: 0vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: rgb(255, 251, 0);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: la 4s linear infinite backwards;
}

.flower__light:nth-child(odd) { background-color: #f76baf; }
.flower__light--1 { left: -2vmin; animation-delay: 1s; }
.flower__light--2 { left: 3vmin; animation-delay: 0.5s; }
.flower__light--3 { left: -6vmin; animation-delay: 0.3s; }
.flower__light--4 { left: 6vmin; animation-delay: 0.9s; }
.flower__light--5 { left: -1vmin; animation-delay: 1.5s; }
.flower__light--6 { left: -4vmin; animation-delay: 3s; }
.flower__light--7 { left: 3vmin; animation-delay: 2s; }
.flower__light--8 { left: -6vmin; animation-delay: 3.5s; }

.flower--2 .flower__leaf {
    background-color: #ff4757;
    background-image: linear-gradient(to top, #ff6b81, #ff4757);
}

.flower--2 .flower__light { background-color: #fffa65 !important; }

.flower--3 .flower__leaf {
    background-color: #ffa502;
    background-image: linear-gradient(to top, #ffbe76, #ffa502);
}

.flower--3 .flower__light { background-color: #fff !important; }
.flower--3 .flower__white-circle { background-color: #eccc68; }

.flower__grass {
    --c: #04661f;
    --line-w: 1.5vmin;
    position: absolute;
    bottom: 12vmin;
    left: -7vmin;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 20;
    transform-origin: bottom center;
    transform: rotate(-48deg) rotateY(40deg);
}

.flower__grass--1 { animation: mg1 2s linear infinite; }

.flower__grass--2 {
    left: 2vmin;
    bottom: 10vmin;
    transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
    opacity: 0.8;
    z-index: 0;
    animation: mg2 1.5s linear infinite;
}

.flower__grass--top {
    width: 7vmin;
    height: 10vmin;
    border-top-right-radius: 100%;
    border-right: var(--line-w) solid var(--c);
    transform-origin: bottom center;
    transform: rotate(-2deg);
}

.flower__grass--bottom {
    margin-top: -2px;
    width: var(--line-w);
    height: 25vmin;
    background-image: linear-gradient(to top, transparent, var(--c));
}

.flower__grass__leaf {
    --size: 10vmin;
    position: absolute;
    width: calc(var(--size) * 2.1);
    height: var(--size);
    border-top-left-radius: var(--size);
    border-top-right-radius: var(--size);
    background-image: linear-gradient(to top, transparent, transparent 30%, var(--c));
    z-index: 100;
}

.flower__grass__leaf--1 { top: -6%; left: 30%; --size: 6vmin; transform: rotate(-20deg); animation: gg1 2s 2.6s backwards; }
.flower__grass__leaf--2 { top: -5%; left: -110%; --size: 6vmin; transform: rotate(10deg); animation: gg2 2s 2.4s backwards; }
.flower__grass__leaf--3 { top: 5%; left: 60%; --size: 8vmin; transform: rotate(-18deg) rotateX(-20deg); animation: gg3 2s 2.2s backwards; }
.flower__grass__leaf--4 { top: 6%; left: -135%; --size: 8vmin; transform: rotate(2deg); animation: gg4 2s 2s backwards; }
.flower__grass__leaf--5 { top: 20%; left: 60%; --size: 10vmin; transform: rotate(-24deg) rotateX(-20deg); animation: gg5 2s 1.8s backwards; }
.flower__grass__leaf--6 { top: 22%; left: -180%; --size: 10vmin; transform: rotate(10deg); animation: gg6 2s 1.6s backwards; }
.flower__grass__leaf--7 { top: 39%; left: 70%; --size: 10vmin; transform: rotate(-10deg); animation: gg7 2s 1.4s backwards; }
.flower__grass__leaf--8 { top: 40%; left: -215%; --size: 11vmin; transform: rotate(10deg); animation: gg8 2s 1.2s backwards; }

.flower__grass__overlay {
    position: absolute;
    top: -10%;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    filter: blur(1.5vmin);
    z-index: 100;
}

.flower__g-long {
    --w: 2vmin;
    --h: 6vmin;
    --c: #0e5b3c;
    position: absolute;
    bottom: 10vmin;
    left: -3vmin;
    transform-origin: bottom center;
    transform: rotate(-30deg) rotateY(-20deg);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: fghan 3s linear infinite;
}

.flower__g-long__top {
    top: calc(var(--h) * -1);
    width: calc(var(--w) + 1vmin);
    height: var(--h);
    border-top-right-radius: 100%;
    border-right: 0.7vmin solid var(--c);
    transform: translate(-0.7vmin, 1vmin);
}

.flower__g-long__bottom {
    width: var(--w);
    height: 50vmin;
    transform-origin: bottom center;
    background-image: linear-gradient(to top, transparent 30%, var(--c));
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
}

.flower__g-right {
    position: absolute;
    bottom: 6vmin;
    left: -2vmin;
    transform-origin: bottom left;
    transform: rotate(20deg);
}

.flower__g-right .leaf {
    width: 30vmin;
    height: 50vmin;
    border-top-left-radius: 100%;
    border-left: 2vmin solid #217005;
    background-image: linear-gradient(to bottom, transparent, var(--dark) 60%);
    -webkit-mask-image: linear-gradient(to top, transparent 30%, #24803e 60%);
    mask-image: linear-gradient(to top, transparent 30%, #24803e 60%);
}

.flower__g-right--1 { animation: fgr1 2.5s linear infinite; }
.flower__g-right--2 { left: 5vmin; transform: rotateY(-180deg); animation: fgr2 3s linear infinite; }
.flower__g-right--2 .leaf { height: 75vmin; filter: blur(0.3vmin); opacity: 0.8; }

.flower__g-front {
    position: absolute;
    bottom: 6vmin;
    left: 2.5vmin;
    z-index: 100;
    transform-origin: bottom center;
    transform: rotate(-28deg) rotateY(30deg) scale(1.04);
    animation: fgfa 2s linear infinite;
}

.flower__g-front__line {
    width: 0.3vmin;
    height: 20vmin;
    background-image: linear-gradient(to top, transparent, #042e0b, transparent 100%);
    position: relative;
}

.flower__g-front__leaf-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: bottom left;
    transform: rotate(10deg);
}

.flower__g-front__leaf-wrapper:nth-child(even) {
    left: 0vmin;
    transform: rotateY(-180deg) rotate(5deg);
    animation: fefl 1s ease-in backwards;
}

.flower__g-front__leaf-wrapper:nth-child(odd) {
    animation: fefr 1s ease-in backwards;
}

.flower__g-front__leaf-wrapper--1 { top: -8vmin; transform: scale(0.7); animation: fefr 1s 5.5s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--2 { top: -8vmin; transform: rotateY(-180deg) scale(0.7) !important; animation: fefl2 1s 4.6s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--3 { top: -3vmin; animation: fefr 1s 4.6s ease-in backwards; }
.flower__g-front__leaf-wrapper--4 { top: -3vmin; transform: rotateY(-180deg) scale(0.9) !important; animation: fefl2 1s 4.6s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--5,
.flower__g-front__leaf-wrapper--6 { top: 2vmin; }
.flower__g-front__leaf-wrapper--7,
.flower__g-front__leaf-wrapper--8 { top: 6.5vmin; }

.flower__g-front__leaf-wrapper--2 { animation-delay: 5.2s !important; }
.flower__g-front__leaf-wrapper--3 { animation-delay: 4.9s !important; }
.flower__g-front__leaf-wrapper--5 { animation-delay: 4.3s !important; }
.flower__g-front__leaf-wrapper--6 { animation-delay: 4.1s !important; }
.flower__g-front__leaf-wrapper--7 { animation-delay: 3.8s !important; }
.flower__g-front__leaf-wrapper--8 { animation-delay: 3.5s !important; }

.flower__g-front__leaf {
    width: 10vmin;
    height: 10vmin;
    border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
    box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2);
    background-image:
        linear-gradient(to bottom left, transparent, var(--dark)),
        linear-gradient(to bottom right, #064f0a 50%, transparent 50%, transparent);
    -webkit-mask-image: linear-gradient(to bottom right, #097149 50%, transparent 50%, transparent);
    mask-image: linear-gradient(to bottom right, #0e8723 50%, transparent 50%, transparent);
}

.flower__g-fr {
    position: absolute;
    bottom: -4vmin;
    left: 0vmin;
    transform-origin: bottom left;
    z-index: 10;
    animation: fgfra 2s linear infinite;
}

.flower__g-fr .leaf {
    width: 30vmin;
    height: 50vmin;
    border-top-left-radius: 100%;
    border-left: 2vmin solid #147b47;
    -webkit-mask-image: linear-gradient(to top, transparent 25%, #0e4e2a 50%);
    mask-image: linear-gradient(to top, transparent 25%, #0e4e2a 50%);
    position: relative;
    z-index: 1;
}

.flower__g-fr__leaf {
    position: absolute;
    top: 0;
    left: 0;
    width: 10vmin;
    height: 10vmin;
    border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
    box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2);
    background-image:
        linear-gradient(to bottom left, transparent, var(--dark) 98%),
        linear-gradient(to bottom right, #106e18 45%, transparent 50%, transparent);
    -webkit-mask-image: linear-gradient(135deg, #175f22 40%, transparent 50%, transparent);
    mask-image: linear-gradient(135deg, #175f22 40%, transparent 50%, transparent);
}

.flower__g-fr__leaf--1 { left: 20vmin; transform: rotate(45deg); animation: gf1 0.5s 5.2s backwards; }
.flower__g-fr__leaf--2 { left: 12vmin; top: -7vmin; transform: rotate(25deg) rotateY(-180deg); animation: gf6 0.5s 5s backwards; }
.flower__g-fr__leaf--3 { left: 15vmin; top: 6vmin; transform: rotate(55deg); animation: gf5 0.5s 4.8s backwards; }
.flower__g-fr__leaf--4 { left: 6vmin; top: -2vmin; transform: rotate(25deg) rotateY(-180deg); animation: gf6 0.5s 4.6s backwards; }
.flower__g-fr__leaf--5 { left: 10vmin; top: 14vmin; transform: rotate(55deg); animation: gf5 0.5s 4.4s backwards; }
.flower__g-fr__leaf--6 { left: 0vmin; top: 6vmin; transform: rotate(25deg) rotateY(-180deg); animation: gf6 0.5s 4.2s backwards; }
.flower__g-fr__leaf--7 { left: 5vmin; top: 22vmin; transform: rotate(45deg); animation: gf7 0.5s 4s backwards; }
.flower__g-fr__leaf--8 { left: -4vmin; top: 15vmin; transform: rotate(15deg) rotateY(-180deg); animation: gf8 0.5s 3.8s backwards; }

.long-g {
    position: absolute;
    bottom: 25vmin;
    left: -42vmin;
    transform-origin: bottom left;
}

.long-g--1 { bottom: 0vmin; transform: scale(0.8) rotate(-5deg); }
.long-g--2, .long-g--3 { bottom: -3vmin; left: -35vmin; transform-origin: center; transform: scale(0.6) rotateX(60deg); }
.long-g--3 { left: -17vmin; bottom: 0vmin; }
.long-g--4 { left: 25vmin; bottom: -3vmin; transform-origin: center; transform: scale(0.6) rotateX(60deg); }
.long-g--5 { left: 42vmin; bottom: 0vmin; transform: scale(0.8) rotate(2deg); }
.long-g--6 { left: 0vmin; bottom: -20vmin; z-index: 100; filter: blur(0.3vmin); transform: scale(0.8) rotate(2deg); }
.long-g--7 { left: 35vmin; bottom: 20vmin; z-index: -1; filter: blur(0.3vmin); transform: scale(0.6) rotate(2deg); opacity: 0.7; }

.long-g .leaf {
    --w: 15vmin;
    --h: 40vmin;
    --c: #1aaa15;
    position: absolute;
    bottom: 0;
    width: var(--w);
    height: var(--h);
    border-top-left-radius: 100%;
    border-left: 2vmin solid var(--c);
    -webkit-mask-image: linear-gradient(to top, transparent 20%, var(--dark));
    mask-image: linear-gradient(to top, transparent 20%, var(--dark));
    transform-origin: bottom center;
}

.long-g .leaf--0 { left: 2vmin; animation: la1 4s linear infinite; }
.long-g .leaf--1 { --w: 5vmin; --h: 60vmin; animation: la1 4s linear infinite; }
.long-g .leaf--2 { --w: 10vmin; --h: 40vmin; left: -0.5vmin; bottom: 5vmin; transform-origin: bottom left; transform: rotateY(-180deg); animation: la2 3s linear infinite; }
.long-g .leaf--3 { --w: 5vmin; --h: 30vmin; left: -1vmin; bottom: 3.2vmin; transform-origin: bottom left; transform: rotate(-10deg) rotateY(-180deg); animation: la3 3s linear infinite; }

.grow-ans { animation: ga 2s var(--d) backwards; }
.growing-grass { animation: gga 1s 2s backwards; }

@keyframes ga { 0% { transform: scale(0); opacity: 0; } }
@keyframes gga { 0% { transform: scale(0); } }

@keyframes la {
    0% { opacity: 0; transform: translateY(0vmin); }
    25% { opacity: 1; transform: translateY(-5vmin) translateX(-2vmin); }
    50% { opacity: 1; transform: translateY(-15vmin) translateX(2vmin); filter: blur(0.2vmin); }
    75% { transform: translateY(-20vmin) translateX(-2vmin); filter: blur(0.2vmin); }
    100% { transform: translateY(-30vmin); opacity: 0; filter: blur(1vmin); }
}

@keyframes mf1 { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
@keyframes mf2 { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(14deg); } }
@keyframes mf3 { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-20deg) rotateY(-10deg); } }

@keyframes blr { 0% { transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0); } }
@keyframes bll { 0% { transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0); } }
@keyframes gft { 0% { height: 0; border-radius: 1vmin; } }
@keyframes bf { 0% { transform: scale(0); } }
@keyframes mg1 { 0%, 100% { transform: rotate(-48deg) rotateY(40deg); } 50% { transform: rotate(-50deg) rotateY(40deg); } }
@keyframes mg2 { 0%, 100% { transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); } 50% { transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); } }
@keyframes fghan { 0%, 100% { transform: rotate(-30deg) rotateY(-20deg); } 50% { transform: rotate(-32deg) rotateY(-20deg); } }
@keyframes fgr1 { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(24deg) rotateX(-20deg); } }
@keyframes fgr2 { 0%, 100% { transform: rotateY(-180deg) rotate(0) rotateX(-20deg); } 50% { transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); } }
@keyframes fgfa { 0%, 100% { transform: rotate(-28deg) rotateY(30deg) scale(1.04); } 50% { transform: rotate(-35deg) rotateY(40deg) scale(1.04); } }
@keyframes fefr { 0% { transform: rotate(10deg) scale(0); } }
@keyframes fefl { 0% { transform: rotateY(-180deg) rotate(5deg) scale(0); } }
@keyframes fefl2 { 0% { transform: rotateY(-180deg) scale(0); } }
@keyframes fgfra { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(4deg); } }
@keyframes gf1 { 0% { transform-origin: left; transform: rotate(45deg) scale(0); } }
@keyframes gf5 { 0% { transform-origin: left; transform-origin: left; transform: rotate(55deg) scale(0); } }
@keyframes gf6 { 0% { transform-origin: right; transform: rotate(25deg) rotateY(-180deg) scale(0); } }
@keyframes gf7 { 0% { transform-origin: left; transform: rotate(45deg) scale(0); } }
@keyframes gf8 { 0% { transform-origin: right; transform: rotate(15deg) rotateY(-180deg) scale(0); } }
@keyframes la1 { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.1); } }
@keyframes la2 { 0%, 100% { transform: rotateY(-180deg) rotate(5deg); } 50% { transform: rotateY(-180deg) rotate(0) scale(1.1); } }
@keyframes la3 { 0%, 100% { transform: rotate(-10deg) rotateY(-180deg); } 50% { transform: rotate(-20deg) rotateY(-180deg); } }
@keyframes gg1 { 0% { transform-origin: bottom left; transform: rotate(-20deg) scale(0); } }
@keyframes gg2 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } }
@keyframes gg3 { 0% { transform-origin: bottom left; transform: rotate(-18deg) rotateX(-20deg) scale(0); } }
@keyframes gg4 { 0% { transform-origin: bottom right; transform: rotate(2deg) scale(0); } }
@keyframes gg5 { 0% { transform-origin: bottom left; transform: rotate(-24deg) rotateX(-20deg) scale(0); } }
@keyframes gg6 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } }
@keyframes gg7 { 0% { transform-origin: bottom left; transform: rotate(-10deg) scale(0); } }
@keyframes gg8 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } }

/* Butterflies */
.butterfly {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 1000;
    animation: fp 15s linear infinite;
}

.wing {
    position: absolute;
    width: 15px;
    height: 20px;
    border-radius: 50% 50% 0;
    opacity: 0.9;
}

.wing.left { transform-origin: right center; right: 0; animation: fl 0.2s infinite; }
.wing.right { transform-origin: left center; left: 0; transform: rotateY(180deg); animation: fr 0.2s infinite; }

@keyframes fp {
    0% { transform: translate(0, 0) rotate(10deg); }
    25% { transform: translate(100px, -200px) rotate(-10deg); }
    50% { transform: translate(-50px, -350px) rotate(5deg); }
    75% { transform: translate(80px, -150px) rotate(15deg); }
    100% { transform: translate(0, 0) rotate(10deg); }
}

@keyframes fl { 0%, 100% { transform: rotateY(0) skewY(20deg); } 50% { transform: rotateY(70deg) skewY(0); } }
@keyframes fr { 0%, 100% { transform: rotateY(180deg) skewY(-20deg); } 50% { transform: rotateY(110deg) skewY(0); } }

/* Heart particles */
.heart-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: none;
    z-index: 998;
}

.heart-particle::before,
.heart-particle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ff4757;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 10px #ff4757;
}

.heart-particle::before {
    left: -50%;
    transform: rotate(-45deg);
    transform-origin: 100% 100%;
}

.heart-particle::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 0 100%;
}

@keyframes floatUp {
    0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-300px) scale(1) rotate(20deg); }
}

/* === SECTION 2: THE LETTER === */
.section-2 {
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 67, 147, 0.04) 0%, transparent 60%), var(--bg);
}

.letter-card {
    background: var(--card);
    background-image: repeating-linear-gradient(transparent, transparent 31px, var(--line-c) 31px, var(--line-c) 32px);
    border: 1px solid var(--card-b);
    border-radius: 14px;
    padding: 2.25rem 2.25rem 2.25rem 3.5rem;
    max-width: 580px;
    width: 90%;
    max-height: 65vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 2.5rem 8rem rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s 0.2s ease, transform 0.7s 0.2s ease;
}

.section-2.active .letter-card {
    opacity: 1;
    transform: translateY(0);
}

.letter-card::before {
    content: '';
    position: absolute;
    left: 2.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(232, 67, 147, 0.2);
    border-radius: 1px;
}

.letter-card::after {
    content: '\f0e0';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 0.9rem;
    color: rgba(232, 67, 147, 0.2);
}

.letter-card::-webkit-scrollbar { width: 4px; }
.letter-card::-webkit-scrollbar-track { background: transparent; }
.letter-card::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.letter-header {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.letter-header i {
    font-size: 2rem;
    color: var(--accent);
    animation: heartFloat 2s ease infinite;
}

@keyframes heartFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.5rem); }
}


#typewriterText {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    line-height: 2rem;
    color: var(--fg);
    font-weight: 400;
    min-height: 100px;
}

.cursor-blink {
    display: inline-block;
    color: var(--accent);
    font-weight: 200;
    animation: cb 0.7s infinite;
    margin-left: 1px;
}

@keyframes cb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.section-2 .btn-next {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
}

.section-2 .btn-next.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* === SECTION 3: PHOTO GALLERY -Large & Responsive === */
.section-3 {
    background: radial-gradient(ellipse at 50% 20%, rgba(232, 67, 147, 0.03) 0%, transparent 50%), var(--bg);
    justify-content: flex-start;
    padding-top: 6vh;
    gap: 3vh;
}

.section-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.4rem;
    text-transform: uppercase;
    color: var(--fg-m);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-label i { color: var(--accent); font-size: 0.9rem; }

.section-3.active .section-label {
    opacity: 1;
    transform: translateY(0);
}

/* NEW: Large Photo Showcase - Side by Side on Desktop, Stacked on Mobile */
.photo-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 90%;
    max-width: 900px;
    padding: 0 2rem;
}

.photo-card {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-3.active .photo-card {
    opacity: 1;
    transform: translateY(0);
}

.photo-card:nth-child(2) {
    transition-delay: 0.15s;
}

.photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 0 3px rgba(232, 67, 147, 0.15),
        0 0 0 6px rgba(232, 67, 147, 0.05);
    transition: all 0.4s ease;
}

.photo-frame:hover {
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(232, 67, 147, 0.3),
        0 0 0 8px rgba(232, 67, 147, 0.1);
    transform: translateY(-0.5rem);
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

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

.photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.photo-overlay i {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.photo-caption {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--fg-m);
    text-align: center;
    letter-spacing: 0.05rem;
    font-style: italic;
}

.section-3 .btn-next {
    margin-top: auto;
    margin-bottom: 5vh;
}

/* Lightbox */
/* =========================================================
   LIGHTBOX FINAL FIX
========================================================= */

.lightbox {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.35s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.94);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* IMAGE */
.lightbox img {
    position: relative;
    z-index: 2;

    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 0 40px rgba(232, 67, 147, 0.15),
        0 3rem 8rem rgba(0, 0, 0, 0.8);

    transform: scale(0.88);

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    display: block;
}

.lightbox.active img {
    transform: scale(1);
}

/* CLOSE BUTTON */
.lightbox-close {
    position: absolute;

    top: 1.5rem;
    right: 1.5rem;

    z-index: 5;

    width: 3rem;
    height: 3rem;

    border-radius: 50%;

    border: 1.5px solid rgba(255,255,255,.15);

    background: rgba(0,0,0,.45);

    color: white;

    font-size: 1rem;

    cursor: pointer;

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

    backdrop-filter: blur(10px);

    transition: all .3s ease;
}

.lightbox-close:hover{
    background: rgba(232,67,147,.2);

    border-color: rgba(255,92,168,.7);

    transform: rotate(90deg);
}

/* MOBILE */
@media(max-width:768px){

    .lightbox img{
        max-width:95vw;
        max-height:80vh;

        border-radius:14px;
    }

    .lightbox-close{
        width:2.6rem;
        height:2.6rem;

        top:1rem;
        right:1rem;
    }
}

/* === SECTION 4: ELEGANT I LOVE YOU - REDESIGN === */

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

.section-4{
    position: relative;

    min-height: 100vh;
    width: 100%;

    overflow: hidden;

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

    padding: clamp(1rem, 3vw, 3rem);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 72, 145, 0.18) 0%,
            rgba(255, 72, 145, 0.10) 16%,
            rgba(255, 72, 145, 0.04) 28%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #070707 0%,
            #020202 45%,
            #000000 100%
        );
}

/* =========================================================
   CENTER GLOW
========================================================= */

.love-glow{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            ellipse 40% 30% at center,
            rgba(255, 72, 145, 0.20) 0%,
            rgba(255, 72, 145, 0.10) 25%,
            transparent 70%
        );

    filter: blur(40px);

    animation: glowBreathe 5s ease-in-out infinite;

    pointer-events:none;
}

@keyframes glowBreathe{

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

    50%{
        opacity:1;
        transform:scale(1.08);
    }
}

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

.sparkle-container{
    position:absolute;
    inset:0;

    overflow:hidden;
    pointer-events:none;
}

.sparkle{
    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--champagne);

    box-shadow:
        0 0 6px var(--champagne),
        0 0 12px var(--rose-gold),
        0 0 22px rgba(255,92,168,.45);

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

@keyframes sparkleFloat{

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

    20%{
        opacity:1;
        transform:translateY(-2vmin) scale(1);
    }

    80%{
        opacity:.7;
        transform:translateY(-15vmin) scale(.6);
    }

    100%{
        opacity:0;
        transform:translateY(-20vmin) scale(0);
    }
}

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

.love-content{
    position:relative;
    z-index:10;

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

    gap:2rem;

    width:100%;
    max-width:100%;

    padding-inline:1rem;

    animation:fadeInLove 2s ease forwards;

    opacity:0;
    transform:translateY(3rem);
}

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

/* =========================================================
   TITLE
========================================================= */

.love-title{
    position:relative;
    z-index:10;

    font-family:'Playfair Display', serif;

    font-size:clamp(2.5rem, 9vw, 9rem);

    font-weight:600;

    color:var(--champagne);

    text-align:center;
    line-height:1.1;

    letter-spacing:clamp(.05em, .8vw, .15em);

    white-space:normal;
    word-break:break-word;

    text-shadow:
        0 0 12px rgba(255,255,255,.15),
        0 0 28px rgba(255,92,168,.25),
        0 0 60px rgba(255,92,168,.35);

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

@keyframes textPulse{

    0%,100%{
        text-shadow:
            0 0 12px rgba(255,255,255,.15),
            0 0 28px rgba(255,92,168,.25),
            0 0 60px rgba(255,92,168,.35);
    }

    50%{
        text-shadow:
            0 0 18px rgba(255,255,255,.25),
            0 0 40px rgba(255,92,168,.45),
            0 0 90px rgba(255,92,168,.55);
    }
}

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

.love-heart{
    animation:heartBeat 1.5s ease infinite;

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

.love-heart i{
    font-size:clamp(2.5rem, 8vw, 6rem);

    color:var(--rose-gold);

    text-shadow:
        0 0 12px rgba(255,92,168,.45),
        0 0 28px rgba(255,92,168,.55),
        0 0 60px rgba(255,92,168,.35);
}

@keyframes heartBeat{

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

    12%{
        transform:scale(1.15);
    }

    24%{
        transform:scale(1);
    }

    36%{
        transform:scale(1.1);
    }

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

/* =========================================================
   DECORATION
========================================================= */

.love-decoration{
    position:relative;
    z-index:10;

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

    gap:1.2rem;

    margin-top:1rem;

    animation:fadeInLove 2s .5s ease forwards;

    opacity:0;
}

.deco-line{
    width:clamp(3rem, 15vw, 8rem);
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rose-gold),
            transparent
        );

    box-shadow:
        0 0 10px rgba(255,92,168,.35);
}

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

    animation:starSpin 6s linear infinite;
}

.deco-ornament i{
    font-size:.9rem;

    color:var(--gold-accent);

    text-shadow:
        0 0 10px rgba(255,193,222,.4);
}

@keyframes starSpin{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

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

html,
body{
    min-height:100vh;

    background:#000;

    font-size:62.5%;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

    overflow-x:hidden;
}

/* IMPORTANT FIX RESPONSIVE */
.container{
    width:min(90vw, 50rem);
    height:min(40vw, 20rem);

    position:relative;
}

.svg-container{
    z-index:2;
    position:absolute;

    width:100%;
    height:100%;
}

.mo-container{
    width:100%;
    height:100%;
}

/* SVG line */
.line{
    fill:none;

    stroke:#ffffff;

    stroke-width:8;
    stroke-linecap:round;
    stroke-miterlimit:10;

    filter:
        drop-shadow(0 0 8px rgba(255,92,168,.25));
}

/* Text */
.lttr{
    fill:#ff5ca8;

    filter:
        drop-shadow(0 0 10px rgba(255,92,168,.4));
}

/* Sound */
.sound{
    position:fixed;

    color:#ff85bb;

    font-size:1.4rem;

    bottom:1rem;
    right:1rem;

    text-decoration:underline;

    cursor:default;

    text-shadow:
        0 0 10px rgba(255,92,168,.35);

    z-index:999;
}

.sound--off{
    text-decoration:line-through;
}

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

@media (max-width:768px){

    .section-4{
        padding:1.5rem;
    }

    .container{
        width:min(92vw, 38rem);
        height:min(45vw, 18rem);
    }

    .love-title{
        font-size:clamp(2.2rem, 12vw, 5rem);
        line-height:1.15;
    }

    .sound{
        font-size:1.2rem;
    }
}

@media (max-width:480px){

    .section-4{
        min-height:100dvh;
        padding:1rem;
    }

    .container{
        width:94vw;
        height:42vw;
    }

    .love-title{
        font-size:clamp(2rem, 13vw, 4rem);
        letter-spacing:.04em;
    }

    .love-heart i{
        font-size:clamp(2rem, 10vw, 4rem);
    }

    .sound{
        font-size:1rem;
        bottom:.8rem;
        right:.8rem;
    }

    .line{
        stroke-width:6;
    }
}

/* =========================================================
   SECTION 3 MOBILE SCROLL FIX
========================================================= */

.section-3{
    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

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

    padding-bottom:8rem;
}

/* smooth pink scrollbar */
.section-3::-webkit-scrollbar{
    width:4px;
}

.section-3::-webkit-scrollbar-thumb{
    background:rgba(232,67,147,.5);
    border-radius:999px;
}

/* MOBILE */
@media(max-width:768px){

    .section-3{

        justify-content:flex-start;

        padding-top:4rem;

        padding-left:1rem;
        padding-right:1rem;

        padding-bottom:10rem;

        overflow-y:auto;
    }

    .photo-showcase{

        width:100%;

        padding:0;

        gap:2rem;
    }

    .photo-card{

        min-width:100%;
        max-width:100%;
    }

    .section-3 .btn-next{

        margin-top:2rem;

        margin-bottom:3rem;

        flex-shrink:0;
    }
}
.caption-from{
    display:block;

    margin-top:.45rem;

    font-size:.72rem;

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

    letter-spacing:.12rem;

    text-transform:uppercase;

    font-style:normal;

    opacity:.85;
}