/* Love website — cinematic styles (Hostinger-friendly static asset) */

:root {
    --font-serif: 'Cormorant Garamond', ui-serif, Georgia, serif;
    --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --color-wine: #5c1a24;
    --color-wine-deep: #3d1018;
    --color-blush: #e8c4c4;
    --color-rose: #c48b8b;
    --color-dusty: #a66d6d;
    --color-ivory: #f7f1ea;
    --color-champagne: #d4b896;
    --color-charcoal: #2a2224;
    --color-soft-white: #fffcf8;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection {
    background: color-mix(in srgb, var(--color-wine) 35%, transparent);
    color: var(--color-soft-white);
}

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

.text-wine { color: var(--color-wine); }
.text-wine-deep { color: var(--color-wine-deep); }
.text-blush { color: var(--color-blush); }
.text-rose { color: var(--color-rose); }
.text-dusty { color: var(--color-dusty); }
.text-ivory { color: var(--color-ivory); }
.text-champagne { color: var(--color-champagne); }
.text-charcoal { color: var(--color-charcoal); }
.text-soft-white { color: var(--color-soft-white); }
.text-champagne\/80 { color: color-mix(in srgb, var(--color-champagne) 80%, transparent); }
.text-champagne\/90 { color: color-mix(in srgb, var(--color-champagne) 90%, transparent); }
.text-soft-white\/85 { color: color-mix(in srgb, var(--color-soft-white) 85%, transparent); }
.text-soft-white\/90 { color: color-mix(in srgb, var(--color-soft-white) 90%, transparent); }
.text-charcoal\/50 { color: color-mix(in srgb, var(--color-charcoal) 50%, transparent); }
.text-charcoal\/60 { color: color-mix(in srgb, var(--color-charcoal) 60%, transparent); }
.text-charcoal\/70 { color: color-mix(in srgb, var(--color-charcoal) 70%, transparent); }
.text-charcoal\/75 { color: color-mix(in srgb, var(--color-charcoal) 75%, transparent); }
.text-charcoal\/80 { color: color-mix(in srgb, var(--color-charcoal) 80%, transparent); }

.bg-wine { background-color: var(--color-wine); }
.bg-wine-deep { background-color: var(--color-wine-deep); }
.bg-ivory { background-color: var(--color-ivory); }
.bg-soft-white { background-color: var(--color-soft-white); }
.bg-\[\#f3e8df\] { background-color: #f3e8df; }
.bg-wine\/90 { background-color: color-mix(in srgb, var(--color-wine) 90%, transparent); }
.bg-wine\/85 { background-color: color-mix(in srgb, var(--color-wine) 85%, transparent); }
.bg-wine-deep\/40 { background-color: color-mix(in srgb, var(--color-wine-deep) 40%, transparent); }
.bg-wine-deep\/45 { background-color: color-mix(in srgb, var(--color-wine-deep) 45%, transparent); }
.bg-wine-deep\/55 { background-color: color-mix(in srgb, var(--color-wine-deep) 55%, transparent); }
.bg-wine-deep\/60 { background-color: color-mix(in srgb, var(--color-wine-deep) 60%, transparent); }
.bg-wine-deep\/70 { background-color: color-mix(in srgb, var(--color-wine-deep) 70%, transparent); }
.bg-wine-deep\/75 { background-color: color-mix(in srgb, var(--color-wine-deep) 75%, transparent); }
.bg-wine-deep\/80 { background-color: color-mix(in srgb, var(--color-wine-deep) 80%, transparent); }
.bg-wine-deep\/85 { background-color: color-mix(in srgb, var(--color-wine-deep) 85%, transparent); }
.bg-wine-deep\/88 { background-color: color-mix(in srgb, var(--color-wine-deep) 88%, transparent); }
.bg-wine-deep\/90 { background-color: color-mix(in srgb, var(--color-wine-deep) 90%, transparent); }
.bg-wine-deep\/92 { background-color: color-mix(in srgb, var(--color-wine-deep) 92%, transparent); }
.bg-soft-white\/5 { background-color: color-mix(in srgb, var(--color-soft-white) 5%, transparent); }
.bg-soft-white\/10 { background-color: color-mix(in srgb, var(--color-soft-white) 10%, transparent); }
.bg-ivory\/85 { background-color: color-mix(in srgb, var(--color-ivory) 85%, transparent); }
.bg-ivory\/95 { background-color: color-mix(in srgb, var(--color-ivory) 95%, transparent); }
.bg-rose { background-color: var(--color-rose); }

.border-champagne\/20 { border-color: color-mix(in srgb, var(--color-champagne) 20%, transparent); }
.border-champagne\/30 { border-color: color-mix(in srgb, var(--color-champagne) 30%, transparent); }
.border-champagne\/40 { border-color: color-mix(in srgb, var(--color-champagne) 40%, transparent); }
.border-soft-white\/25 { border-color: color-mix(in srgb, var(--color-soft-white) 25%, transparent); }
.border-wine\/10 { border-color: color-mix(in srgb, var(--color-wine) 10%, transparent); }
.border-wine\/15 { border-color: color-mix(in srgb, var(--color-wine) 15%, transparent); }
.border-transparent { border-color: transparent; }

.love-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 1.25rem; }
@media (min-width: 640px) { .love-container { padding-inline: 2rem; } }

.love-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--color-champagne);
}
.love-eyebrow.\!.text-dusty,
.\!text-dusty { color: var(--color-dusty) !important; }

.love-display {
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.love-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-champagne) 40%, transparent);
    background: color-mix(in srgb, var(--color-soft-white) 10%, transparent);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-soft-white);
    backdrop-filter: blur(8px);
    transition: transform 0.5s ease, background 0.5s ease, border-color 0.5s ease;
    text-decoration: none;
    cursor: pointer;
}
.love-btn:hover {
    transform: translateY(-2px);
    border-color: var(--color-champagne);
    background: color-mix(in srgb, var(--color-soft-white) 20%, transparent);
}

.love-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 0;
    background: var(--color-wine);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-soft-white);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-wine) 28%, transparent);
    transition: transform 0.5s ease, background 0.5s ease;
    cursor: pointer;
}
.love-btn-solid:hover {
    transform: translateY(-2px);
    background: var(--color-wine-deep);
}

.section-pad { padding-block: 5rem; }
@media (min-width: 640px) { .section-pad { padding-block: 7rem; } }
@media (min-width: 1024px) { .section-pad { padding-block: 8rem; } }

.img-cover { height: 100%; width: 100%; object-fit: cover; }

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

.text-reveal {
    clip-path: inset(0 0 100% 0);
    transform: translateY(20%);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-reveal.is-visible { clip-path: inset(0 0 0 0); transform: none; }

.ken-burns {
    animation: kenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
}

.float-heart {
    position: absolute;
    color: color-mix(in srgb, var(--color-blush) 55%, transparent);
    font-size: 0.85rem;
    animation: floatUp linear infinite;
    pointer-events: none;
    user-select: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-champagne) 70%, white);
    opacity: 0.35;
    animation: drift 12s linear infinite;
    pointer-events: none;
}

.glow-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-champagne);
    box-shadow: 0 0 12px var(--color-champagne);
    opacity: 0.4;
    animation: glowFloat 8s ease-in-out infinite;
    pointer-events: none;
}

.polaroid {
    background: var(--color-soft-white);
    padding: 0.75rem 0.75rem 2.5rem;
    box-shadow: 0 20px 40px rgba(42, 34, 36, 0.15);
    transform: rotate(-1.5deg);
    transition: transform 0.6s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); }
.polaroid-alt { transform: rotate(2deg); }

.memory-blur {
    filter: blur(14px) saturate(0.7);
    transform: scale(1.05);
    transition: filter 0.9s ease, transform 0.9s ease;
}
.memory-blur.is-revealed { filter: none; transform: none; }

.hero-scrim {
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-wine-deep) 78%, transparent) 0%,
            color-mix(in srgb, var(--color-wine-deep) 35%, transparent) 38%,
            color-mix(in srgb, var(--color-wine-deep) 45%, transparent) 62%,
            color-mix(in srgb, var(--color-wine-deep) 88%, transparent) 100%
        );
}

.hero-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.moment-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.chapter-photo {
    object-fit: contain;
    object-position: center;
    background: #3d1018;
}

.hero-copy {
    text-shadow:
        0 1px 2px color-mix(in srgb, var(--color-wine-deep) 70%, transparent),
        0 8px 28px color-mix(in srgb, var(--color-wine-deep) 55%, transparent);
}

.hero-copy-stack {
    padding-block: 0.5rem;
}

.hero-copy-stack .love-display {
    letter-spacing: 0.01em;
}

.nav-glass {
    border-bottom: 1px solid transparent;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-wine-deep) 88%, transparent),
        color-mix(in srgb, var(--color-wine-deep) 55%, transparent) 70%,
        color-mix(in srgb, var(--color-wine-deep) 20%, transparent)
    );
    backdrop-filter: blur(6px);
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.nav-brand,
.nav-link,
.nav-lock,
.nav-toggle {
    color: var(--color-soft-white);
    text-shadow: 0 1px 10px color-mix(in srgb, var(--color-wine-deep) 55%, transparent);
}

.nav-link {
    opacity: 0.88;
}
.nav-link:hover,
.nav-link.is-active,
.nav-brand:hover,
.nav-lock:hover {
    color: var(--color-blush);
    opacity: 1;
}

.nav-toggle {
    border: 1px solid color-mix(in srgb, var(--color-soft-white) 35%, transparent);
    background: color-mix(in srgb, var(--color-wine-deep) 25%, transparent);
}

.nav-mobile-panel {
    border-color: color-mix(in srgb, var(--color-soft-white) 18%, transparent);
    background: color-mix(in srgb, var(--color-wine-deep) 92%, transparent);
    backdrop-filter: blur(14px);
}

.nav-mobile-link {
    color: var(--color-soft-white);
}

.nav-glass.is-scrolled {
    border-bottom-color: color-mix(in srgb, var(--color-wine) 10%, transparent);
    background: color-mix(in srgb, var(--color-ivory) 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-wine-deep) 8%, transparent);
}

.nav-glass.is-scrolled .nav-brand,
.nav-glass.is-scrolled .nav-link,
.nav-glass.is-scrolled .nav-lock,
.nav-glass.is-scrolled .nav-toggle,
.nav-glass.is-scrolled .nav-mobile-link {
    color: var(--color-wine);
    text-shadow: none;
}

.nav-glass.is-scrolled .nav-link {
    color: color-mix(in srgb, var(--color-charcoal) 70%, transparent);
    opacity: 1;
}

.nav-glass.is-scrolled .nav-link:hover,
.nav-glass.is-scrolled .nav-link.is-active,
.nav-glass.is-scrolled .nav-brand:hover,
.nav-glass.is-scrolled .nav-lock:hover {
    color: var(--color-wine);
}

.nav-glass.is-scrolled .nav-lock {
    color: color-mix(in srgb, var(--color-charcoal) 60%, transparent);
}

.nav-glass.is-scrolled .nav-toggle {
    border-color: color-mix(in srgb, var(--color-wine) 15%, transparent);
    background: transparent;
}

.nav-glass.is-scrolled .nav-mobile-panel {
    border-color: color-mix(in srgb, var(--color-wine) 10%, transparent);
    background: color-mix(in srgb, var(--color-ivory) 95%, transparent);
}

.countdown-digit {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 300;
    color: var(--color-soft-white);
    font-variant-numeric: tabular-nums;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
@media (min-width: 640px) { .countdown-digit { font-size: 3.75rem; } }
@media (min-width: 1024px) { .countdown-digit { font-size: 4.5rem; } }
.countdown-digit.is-changing { opacity: 0.35; transform: translateY(-8px); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-wine-deep) 92%, transparent);
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    transition: opacity 0.4s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-image {
    max-height: 82vh;
    max-width: 92vw;
    border-radius: 2px;
    object-fit: contain;
    box-shadow: 0 25px 50px rgba(0,0,0,0.35);
    transform: scale(0.95);
    transition: transform 0.5s ease;
}
.lightbox.is-open .lightbox-image { transform: scale(1); }

.music-btn.is-playing { animation: softPulse 2.4s ease-in-out infinite; }

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    height: 2px;
    background: linear-gradient(to right, var(--color-wine), var(--color-rose), var(--color-champagne));
    width: 0%;
}

.loader-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--color-wine-deep);
    color: var(--color-soft-white);
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-heart {
    animation: heartBeat 1.4s ease-in-out infinite;
    color: var(--color-blush);
    font-size: 2rem;
}

.page-enter { animation: pageFade 0.7s ease both; }

.story-rail {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: none;
}
.story-rail::-webkit-scrollbar { display: none; }
.story-card {
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: center;
    overflow: hidden;
    width: min(78vw, 420px);
    aspect-ratio: 3 / 4;
}

.timeline-line {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-rose) 50%, transparent), transparent);
}
@media (min-width: 640px) {
    .timeline-line { left: 50%; }
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.7; }
    100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}
@keyframes drift {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    100% { transform: translateY(-40vh) translateX(20px); opacity: 0; }
}
@keyframes glowFloat {
    0%, 100% { transform: translateY(0); opacity: 0.25; }
    50% { transform: translateY(-18px); opacity: 0.7; }
}
@keyframes softPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-champagne) 40%, transparent); }
    50% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes pageFade {
    from { opacity: 0; filter: blur(4px); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ken-burns, .float-heart, .particle, .glow-particle, .music-btn.is-playing, .loader-heart, .page-enter {
        animation: none !important;
    }
    .reveal, .text-reveal {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

/* ── Soft page ambiance ─────────────────────────────── */

.love-ambiance {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.love-ambiance .amb-item {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

main.page-enter {
    position: relative;
    z-index: 1;
}

/* Unlock — soft breathing orbs + tiny sparkles */
.love-ambiance--unlock .amb-orb {
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(232, 196, 196, 0.18), transparent 70%);
    animation: ambBreathe 9s ease-in-out infinite;
}
.love-ambiance--unlock .amb-spark {
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background: rgba(212, 184, 150, 0.45);
    box-shadow: 0 0 8px rgba(212, 184, 150, 0.25);
    animation: ambTwinkle 5.5s ease-in-out infinite;
}

/* Home — soft petals drifting diagonally */
.love-ambiance--home .amb-petal {
    width: 9px;
    height: 12px;
    border-radius: 70% 0 70% 0;
    background: rgba(232, 196, 196, 0.28);
    animation: ambPetalDrift linear infinite;
    opacity: 0;
}
.love-ambiance--home .amb-shimmer {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(212, 184, 150, 0.28), transparent);
    animation: ambShimmerFall linear infinite;
    opacity: 0;
}

/* Birthday — soft floating hearts */
.love-ambiance--birthday .amb-heart {
    color: rgba(196, 139, 139, 0.22);
    font-size: 0.85rem;
    animation: ambHeartFloat linear infinite;
    opacity: 0;
}
.love-ambiance--birthday .amb-dot {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(232, 196, 196, 0.35);
    animation: ambSoftBob 7s ease-in-out infinite;
}

/* Wedding — champagne sparkles + soft rings */
.love-ambiance--wedding .amb-spark {
    width: 2px;
    height: 2px;
    border-radius: 9999px;
    background: rgba(212, 184, 150, 0.55);
    box-shadow: 0 0 8px rgba(212, 184, 150, 0.3);
    animation: ambTwinkle 6s ease-in-out infinite;
}
.love-ambiance--wedding .amb-ring {
    border: 1px solid rgba(212, 184, 150, 0.14);
    border-radius: 9999px;
    animation: ambRingPulse 10s ease-in-out infinite;
}

.soft-sheen {
    position: relative;
    overflow: hidden;
}
.soft-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 252, 248, 0.14) 50%, transparent 60%);
    transform: translateX(-130%);
    animation: ambSheen 14s ease-in-out infinite;
    pointer-events: none;
}

.page-enter--home { animation: pageFadeHome 0.8s ease both; }
.page-enter--birthday { animation: pageFadeBirthday 0.85s ease both; }
.page-enter--wedding { animation: pageFadeWedding 0.85s ease both; }
.page-enter--unlock { animation: pageFadeUnlock 0.9s ease both; }

@keyframes ambBreathe {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.12); opacity: 0.5; }
}
@keyframes ambTwinkle {
    0%, 100% { opacity: 0.12; transform: scale(0.85); }
    50% { opacity: 0.55; transform: scale(1.1); }
}
@keyframes ambPetalDrift {
    0% { transform: translate3d(0, -8vh, 0) rotate(20deg); opacity: 0; }
    15% { opacity: 0.35; }
    100% { transform: translate3d(28px, 105vh, 0) rotate(120deg); opacity: 0; }
}
@keyframes ambShimmerFall {
    0% { transform: translateY(-15vh); opacity: 0; }
    25% { opacity: 0.4; }
    100% { transform: translateY(105vh); opacity: 0; }
}
@keyframes ambHeartFloat {
    0% { transform: translateY(15vh) scale(0.9); opacity: 0; }
    18% { opacity: 0.32; }
    100% { transform: translateY(-105vh) scale(1.05); opacity: 0; }
}
@keyframes ambSoftBob {
    0%, 100% { transform: translateY(0); opacity: 0.2; }
    50% { transform: translateY(-10px); opacity: 0.45; }
}
@keyframes ambRingPulse {
    0%, 100% { transform: scale(0.94); opacity: 0.12; }
    50% { transform: scale(1.05); opacity: 0.28; }
}
@keyframes ambSheen {
    0%, 72% { transform: translateX(-130%); }
    88% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}
@keyframes pageFadeHome {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes pageFadeBirthday {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes pageFadeWedding {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pageFadeUnlock {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .love-ambiance {
        display: none !important;
    }
    .soft-sheen::after,
    .page-enter--home,
    .page-enter--birthday,
    .page-enter--wedding,
    .page-enter--unlock,
    .page-enter {
        animation: none !important;
    }
}

/* ── Sealed letter + portal cards ───────────────────── */

.sealed-letter-section {
    background: #f6e9ef;
}

.sealed-letter-stage {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}

.sealed-float-heart {
    position: absolute;
    left: var(--x);
    top: 10%;
    color: rgba(196, 139, 164, 0.45);
    font-size: 1.1rem;
    animation: sealedHeartDrift 6s ease-in-out infinite;
    animation-delay: var(--d);
    pointer-events: none;
}

.sealed-letter-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.sealed-letter-image {
    width: min(92vw, 460px);
    height: auto;
    display: block;
    animation: sealedFloat 4.5s ease-in-out infinite;
    transition: transform 0.45s ease;
}

.sealed-letter-btn:hover .sealed-letter-image {
    transform: translateY(-6px) scale(1.02);
}

.sealed-envelope,
.sealed-envelope__body,
.sealed-envelope__flap,
.sealed-envelope__stamp,
.sealed-envelope__seal {
    display: none !important;
}

.sealed-open-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 9999px;
    border: 1px solid rgba(166, 109, 125, 0.45);
    background: rgba(255, 248, 250, 0.9);
    color: #5c1a24;
    padding: 0.7rem 1.35rem;
    font-family: Manrope, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: none;
    box-shadow: 0 8px 20px rgba(92, 26, 36, 0.08);
    transition: transform 0.3s ease, background 0.3s ease;
}

.sealed-letter-btn:hover .sealed-open-pill {
    transform: translateY(-2px);
    background: #fff;
}

.sealed-letter-panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sealed-letter-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sealed-letter-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(30, 12, 16, 0.72);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.sealed-letter-paper {
    --letter-line: 2rem;
    --letter-pad-top: 2.5rem;
    position: relative;
    z-index: 1;
    width: min(100%, 26rem);
    max-height: min(86vh, 40rem);
    border-radius: 18px;
    background-color: #f7f0e4;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(36px) scale(0.92);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    overflow: hidden;
}

.sealed-letter-panel.is-open .sealed-letter-paper {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.sealed-letter-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(42, 34, 36, 0.15);
    background: #fff;
    color: #2a2224;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sealed-letter-scroll {
    max-height: min(86vh, 40rem);
    overflow-y: auto;
    padding: var(--letter-pad-top) 1.75rem 2rem;
    text-align: left;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--letter-line) - 1px),
        rgba(120, 100, 90, 0.22) calc(var(--letter-line) - 1px),
        rgba(120, 100, 90, 0.22) var(--letter-line)
    );
    background-attachment: local;
    background-origin: content-box;
    background-clip: border-box;
    background-position: 0 0;
}

.sealed-letter-scroll::-webkit-scrollbar {
    width: 8px;
}
.sealed-letter-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sealed-letter-scroll::-webkit-scrollbar-thumb {
    background: #5c1a24;
    border-radius: 9999px;
}

.sealed-letter-greeting,
.sealed-letter-title-line,
.sealed-letter-line,
.sealed-letter-closing {
    font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    color: #2f2422;
    font-size: 1.125rem;
    line-height: var(--letter-line);
    margin: 0;
    padding: 0;
}

.sealed-letter-greeting {
    font-family: 'Caveat', 'Segoe Print', cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 1.65rem;
    line-height: var(--letter-line);
    margin-bottom: var(--letter-line);
    color: #5c1a24;
}

.sealed-letter-title-line {
    font-family: 'Caveat', 'Segoe Print', cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 1.45rem;
    line-height: var(--letter-line);
    margin-bottom: var(--letter-line);
    color: #5c1a24;
}

.sealed-letter-line {
    margin-bottom: var(--letter-line);
}

.sealed-letter-closing {
    font-family: 'Caveat', 'Segoe Print', cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: var(--letter-line);
    margin-top: var(--letter-line);
    color: #5c1a24;
}

.portal-card {
    position: relative;
    display: block;
    height: 28rem;
    min-height: 28rem;
    overflow: hidden;
    border-radius: 4px;
    background: #3d1018;
    color: #fffcf8;
    text-decoration: none;
}

@media (min-width: 768px) {
    .portal-card {
        height: 32rem;
        min-height: 32rem;
    }
}

.portal-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}

.portal-card--birthday .portal-card__image,
.portal-card--wedding .portal-card__image {
    object-fit: contain;
    object-position: center center;
}

.portal-card:hover .portal-card__image {
    transform: scale(1.05);
}

.portal-card--birthday:hover .portal-card__image,
.portal-card--wedding:hover .portal-card__image {
    transform: none;
}

.portal-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(61, 16, 24, 0.88), rgba(61, 16, 24, 0.25), transparent);
}

.portal-card__content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2rem;
    color: #fffcf8;
}

/* ── Birthday page body ─────────────────────────────── */

.birthday-memories {
    background: #f7f1ea;
}

.birthday-wish {
    background:
        radial-gradient(ellipse at top, rgba(232, 196, 196, 0.28), transparent 55%),
        linear-gradient(180deg, #f3e8df 0%, #f7f1ea 100%);
}

.birthday-wish__body {
    position: relative;
}

.birthday-wish__body::before {
    content: '';
    display: block;
    width: 3rem;
    height: 1px;
    margin: 0 auto 1.75rem;
    background: color-mix(in srgb, var(--color-dusty) 55%, transparent);
}

.birthday-surprise {
    background: linear-gradient(160deg, #3d1018 0%, #5c1a24 48%, #3d1018 100%);
}

.birthday-surprise__panel {
    border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
    background: color-mix(in srgb, var(--color-soft-white) 6%, transparent);
    backdrop-filter: blur(10px);
    padding: 2rem 1.5rem;
}

.birthday-wishes {
    background: #f7f1ea;
}

.birthday-wishes__list {
    display: grid;
    gap: 0;
}

.birthday-wishes__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem 1.75rem;
    padding: 2rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-wine) 12%, transparent);
}

.birthday-wishes__item:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-wine) 12%, transparent);
}

.birthday-wishes__number {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.75rem;
    line-height: 1;
    color: color-mix(in srgb, var(--color-dusty) 85%, transparent);
    letter-spacing: 0.06em;
    padding-top: 0.2rem;
}

@media (min-width: 640px) {
    .birthday-wishes__item {
        gap: 1.5rem 2.5rem;
        padding: 2.5rem 0;
    }

    .birthday-wishes__number {
        font-size: 2.15rem;
    }
}

.birthday-closing {
    background: linear-gradient(180deg, #3d1018 0%, #2a0c12 100%);
}

.birthday-closing__note {
    border-top: 1px solid color-mix(in srgb, var(--color-champagne) 28%, transparent);
    padding-top: 1.75rem;
}

@keyframes sealedFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sealedHeartDrift {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
    50% { transform: translateY(-14px) scale(1.1); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .sealed-letter-image,
    .sealed-float-heart {
        animation: none !important;
    }
    .sealed-letter-paper {
        transition: none !important;
    }
}