/* Heartbeat — Romantic Minimal Premium Web Experience */

/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-offwhite: #fdf9f6;
    --bg-nude: #f7efea;
    --rose-muted: #c48795;
    --wine-deep: #6b1f33;
    --ink: #2c2326;
    --ink-soft: rgba(44, 35, 38, 0.70);
    --ink-faint: rgba(44, 35, 38, 0.50);

    --p: 0;

    --tHero: 1;
    --tBuild: 0;
    --tQuiet: 0;
    --tFinal: 0;
    --heroLs: 0;

    --heartScale: 1;
    --heartRot: 0deg;
    --heartSkew: 0deg;
    --glow: 0;
    --aura: 0;
    --specX: 0px;
    --specY: 0px;

    --bgWarm: 0;
    --vignette: 0.18;
    --bgShift: 0;

    --petalShift: 0px;
    --petalRot: 0deg;

    --roseIntensity: 0;
    --roseDrift: 0px;
    --roseTwist: 0deg;
}

body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg-offwhite);
    color: var(--ink);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    height: 100%;
}

.container {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.page {
    position: relative;
    z-index: 2;
}

/* Cinematic backdrop (all 2D) */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.backdrop__gradient {
    position: absolute;
    inset: 0;
}

.backdrop__gradient--base {
    background:
        url(images/background.png) center/cover no-repeat,
        radial-gradient(1200px 700px at 50% calc(30% + (var(--bgShift) * 1%)), rgba(196, 135, 149, 0.18), transparent 60%),
        linear-gradient(180deg, var(--bg-offwhite), var(--bg-nude));
}

.backdrop__gradient--warm {
    opacity: clamp(0, var(--bgWarm), 1);
    background:
        radial-gradient(1000px 650px at 50% calc(35% + (var(--bgShift) * 0.8%)), rgba(107, 31, 51, 0.10), transparent 62%),
        linear-gradient(180deg, rgba(250, 240, 236, 0.75), rgba(246, 232, 227, 0.90));
    mix-blend-mode: multiply;
}

.backdrop__vignette {
    position: absolute;
    inset: -10%;
    opacity: clamp(0, var(--vignette), 0.35);
    background: radial-gradient(circle at 50% 35%, transparent 45%, rgba(20, 10, 12, 0.30) 100%);
}

.backdrop__grain {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 2px);
    mix-blend-mode: overlay;
}

.backdrop__bokeh {
    position: absolute;
    inset: 0;
    opacity: calc(0.22 + (clamp(0, var(--bgWarm), 1) * 0.10));
}

.bokeh {
    position: absolute;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    filter: blur(10px);
}

.bokeh--1 { width: 240px; height: 240px; left: 8%; top: 12%; opacity: 0.22; }
.bokeh--2 { width: 180px; height: 180px; left: 68%; top: 18%; opacity: 0.18; }
.bokeh--3 { width: 280px; height: 280px; left: 18%; top: 72%; opacity: 0.14; }
.bokeh--4 { width: 160px; height: 160px; left: 78%; top: 68%; opacity: 0.16; }
.bokeh--5 { width: 210px; height: 210px; left: 46%; top: 52%; opacity: 0.10; }

/* Floating petals (2D overlay) */
.petals {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.petal {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 22px;
    height: 18px;
    opacity: calc(0.12 + (0.08 * (1 - var(--d))));
    transform:
        translate(-50%, -50%)
        translateY(calc(var(--petalShift) * var(--d)))
        translateX(calc(var(--petalShift) * -0.10 * var(--d)))
        rotate(calc((var(--r) * 1deg) + var(--petalRot)))
        scale(var(--s));
    filter: blur(calc(0.35px + (var(--d) * 0.95px)));
    will-change: transform;
}

.petal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px 999px 999px 18px;
    transform: rotate(45deg);
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at 70% 70%, rgba(107, 31, 51, 0.10), rgba(107, 31, 51, 0) 62%),
        linear-gradient(135deg, rgba(196, 135, 149, 0.55), rgba(107, 31, 51, 0.22));
}

/* Rose rain (edges, scroll-driven) */
.rose-rain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: clamp(0, var(--roseIntensity), 1);
}

.rose {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    opacity: var(--o, 0);
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--tr, 0deg)) scale(var(--ts, 1));
    will-change: transform, opacity;
    filter: blur(calc(var(--blur, 0.2px)));
}

.rose::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at 55% 60%, rgba(196, 135, 149, 0.78), rgba(196, 135, 149, 0) 62%),
        radial-gradient(circle at 55% 55%, rgba(107, 31, 51, 0.22), rgba(107, 31, 51, 0) 66%),
        linear-gradient(135deg, rgba(250, 243, 240, 0.80), rgba(240, 206, 214, 0.70));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.rose::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 55% 55%, rgba(107, 31, 51, 0.16), rgba(107, 31, 51, 0) 70%),
        radial-gradient(circle at 55% 55%, rgba(196, 135, 149, 0.65), rgba(196, 135, 149, 0) 68%);
    opacity: 0.85;
}

/* Fixed center stage */
.stage {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.heart-wrap {
    position: absolute;
    left: 50%;
    top: 44%;
    width: min(56vmin, 260px);
    aspect-ratio: 1;
    transform:
        translate(-50%, -50%)
        rotate(var(--heartRot))
        skewX(var(--heartSkew))
        scale(var(--heartScale));
    transform-origin: center;
    will-change: transform, filter;
    filter:
        drop-shadow(0 10px 26px rgba(0, 0, 0, 0.06))
        drop-shadow(0 0 calc(10px + (var(--glow) * 28px)) rgba(196 135 149 / calc(0.10 + (var(--glow) * 0.28))));
}

.heart-aura {
    position: absolute;
    inset: -14%;
    background: radial-gradient(circle at 50% 55%, rgba(196, 135, 149, 0.55), transparent 62%);
    opacity: calc(0.04 + (var(--aura) * 0.48));
    filter: blur(18px);
}

.heart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter:
        drop-shadow(0 0 calc(6px + (var(--glow) * 22px)) rgba(196 135 149 / calc(0.12 + (var(--glow) * 0.30))));
}

.heart-specular {
    transform: translate(var(--specX), var(--specY));
}

/* Scenes */
.scene {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 16vh 9vw;
    position: relative;
    z-index: 3;
}

.copy {
    max-width: 38rem;
    text-align: center;
}

.accent {
    font-family: "Allura", cursive;
    font-size: 1.65rem;
    letter-spacing: 0.02em;
    color: rgba(107, 31, 51, 0.55);
    margin-bottom: 0.35rem;
    transform: translateY(calc((1 - var(--tHero)) * 10px));
    opacity: var(--tHero);
}

.headline {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: clamp(2.0rem, 5.2vw, 3.2rem);
    line-height: 1.12;
    color: rgba(44, 35, 38, 0.92);
    letter-spacing: calc(0.01em + (var(--heroLs) * 0.06em));
    opacity: var(--tHero);
    transform: translateY(calc((1 - var(--tHero)) * 18px));
}

.subline {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    line-height: 1.65;
    color: var(--ink-soft);
    opacity: var(--tBuild);
    transform: translateY(calc((1 - var(--tBuild)) * 18px));
}

.quiet-line {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.35rem, 3.6vw, 2.1rem);
    line-height: 1.32;
    color: rgba(44, 35, 38, 0.78);
    opacity: var(--tQuiet);
    transform: translateY(calc((1 - var(--tQuiet)) * 14px));
    filter: blur(calc((1 - var(--tQuiet)) * 4px));
}

/* Final CTA */
.cta {
    text-align: center;
    max-width: 42rem;
}

.cta-text {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: clamp(2.0rem, 6vw, 3.0rem);
    line-height: 1.1;
    color: rgba(107, 31, 51, 0.92);
    opacity: var(--tFinal);
    transform:
        translateY(calc((1 - var(--tFinal)) * 20px))
        scale(calc(0.98 + (var(--tFinal) * 0.02)));
}

.cta-actions {
    margin-top: 2.2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: var(--tFinal);
    transform: translateY(calc((1 - var(--tFinal)) * 14px));
}

.love-button {
    pointer-events: auto;
    border: 1px solid rgba(107, 31, 51, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
    color: rgba(44, 35, 38, 0.88);
    padding: 0.95rem 1.6rem;
    min-width: 148px;
    border-radius: 999px;
    cursor: pointer;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
    backdrop-filter: blur(8px);
}

.love-button:hover {
    transform: translateY(-1px);
    border-color: rgba(107, 31, 51, 0.26);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.40) inset;
}

.love-button:active {
    transform: translateY(0);
}

.love-button.yes {
    background: linear-gradient(135deg, rgba(196, 135, 149, 0.20), rgba(107, 31, 51, 0.10));
}

.love-button.always {
    background: linear-gradient(135deg, rgba(107, 31, 51, 0.10), rgba(196, 135, 149, 0.18));
}

.love-button.no {
    --noX: 0px;
    --noY: 0px;
    transform: translate3d(var(--noX), var(--noY), 0);
    transition: transform 220ms cubic-bezier(0.18, 0.90, 0.22, 1), box-shadow 160ms ease, border-color 160ms ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(250, 243, 240, 0.40));
}

.love-button.no:hover {
    transform: translate3d(var(--noX), var(--noY), 0);
}

.love-button.no:active {
    transform: translate3d(var(--noX), var(--noY), 0);
}

.confirmation {
    margin-top: 1.4rem;
    min-height: 1.4em;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    color: var(--ink-faint);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 300ms ease, transform 300ms ease;
}

body.is-confirmed .confirmation {
    opacity: 1;
    transform: translateY(0);
}

/* Confetti */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 6px;
    border-radius: 999px 999px 999px 6px;
    opacity: 0;
}

.burst-piece {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
}

.burst-piece.heart {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: rgba(196, 135, 149, 0.90);
    border-radius: 2px;
}

.burst-piece.heart::before,
.burst-piece.heart::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: inherit;
}

.burst-piece.heart::before {
    top: -6px;
    left: 0;
}

.burst-piece.heart::after {
    left: -6px;
    top: 0;
}

.burst-piece.petal {
    width: 10px;
    height: 8px;
    border-radius: 999px 999px 999px 8px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, rgba(240, 206, 214, 0.95), rgba(196, 135, 149, 0.65));
}

.burst-piece.sparkle {
    width: 2px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.40);
}

.burst-piece.sparkle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: inherit;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 10px);
    padding: 0.75rem 1.0rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(107, 31, 51, 0.14);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    color: rgba(44, 35, 38, 0.78);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .petals {
        display: none !important;
    }

    .rose-rain {
        display: none !important;
    }

    .cursor-heart {
        display: none !important;
    }
}

/* Cursor Heart Animation */
.cursor-heart {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    filter: drop-shadow(0 0 0.5em rgba(196, 135, 149, 0.4));
    will-change: transform, opacity;
}

.cursor-heart::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(images/heart.png) center/cover no-repeat;
    animation: cursorHeartAnim 1s linear forwards;
}

@keyframes cursorHeartAnim {
    0% {
        opacity: 0;
        transform: translate(0) rotate(0deg) scale(0.3);
    }
    20%, 80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(20em) rotate(360deg) scale(0.8);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .scene {
        padding: 15vh 8vw;
    }

    .heart-wrap {
        top: 46%;
        width: min(70vmin, 240px);
    }
}

@media (max-width: 480px) {
    .heart-wrap {
        width: min(78vmin, 220px);
    }

    .cta-actions {
        flex-direction: column;
    }
}