/* ========================================
   D&X Wedding — Custom Styles
   ======================================== */

/* --- Global overflow fix (prevent horizontal scroll on mobile) --- */
/* Desktop keeps clip for sticky behavior; mobile uses hidden for stable touch hit-testing */
html {
    overflow-x: clip;
}
body {
    overflow-x: clip;
}
@media (hover: none) and (pointer: coarse) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* --- Root Variables --- */
:root {
    --bg-gap: #F9F5EF;
    --color-crimson: #D91E18;
    --color-brass: #D4AF37;
}
html.dark {
    --bg-gap: #0C0A09;
}

/* --- Base --- */
body { font-feature-settings: "lnum"; }

/* --- Background Textures --- */
.noise-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
html.dark .noise-overlay { opacity: 0.015; }

.warm-vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 40;
    background: radial-gradient(circle at center, transparent 0%, transparent 60%, rgba(0,0,0,0.4) 100%);
}
html.dark .warm-vignette {
    background: radial-gradient(circle at center, transparent 0%, transparent 50%, rgba(0,0,0,0.8) 100%);
}

/* --- Scroll Progress --- */
#scrollProgress {
    position: fixed; top: 0; left: 0; height: 2.5px; z-index: 200; width: 0%;
    background: linear-gradient(90deg, #F9A8D4, #F472B6, #E11D48, #D4AF37);
    transition: width 80ms linear;
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.4);
}
#scrollProgress.completed {
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.6), 0 0 20px rgba(212, 175, 55, 0.3);
}
.progress-heart-burst {
    position: fixed;
    top: -5px;
    pointer-events: none;
    z-index: 201;
    font-size: 1.1rem;
    animation: progress-heart-pop 2.2s cubic-bezier(0.25, 0, 0.5, 1) forwards;
    user-select: none;
}
@keyframes progress-heart-pop {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    10% { transform: translateY(8px) scale(1.15); opacity: 1; }
    100% { transform: translateY(200px) scale(0.4); opacity: 0; }
}

/* --- Navigation --- */
#navbar {
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}
.nav-scrolled {
    background-color: rgba(249, 245, 239, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05);
}
html.dark .nav-scrolled {
    background-color: rgba(12, 10, 9, 0.85) !important;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.3);
}

/* --- Welcome Overlay --- */
.welcome-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(62, 28, 35, 0.92) 0%,
        rgba(50, 22, 30, 0.94) 40%,
        rgba(38, 18, 24, 0.95) 100%
    );
    backdrop-filter: blur(30px);
    cursor: pointer;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.welcome-overlay.dismissed {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.welcome-xi {
    font-size: clamp(2.5rem, 7vw, 4rem);
    color: var(--color-crimson);
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.welcome-title {
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 0.15em;
    color: #F0E4D7;
    text-shadow: 0 0 30px rgba(240, 228, 215, 0.15);
}
.welcome-sub {
    margin-top: 0.5rem;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    color: rgba(231, 229, 228, 0.6);
    letter-spacing: 0.3em;
}
.welcome-date {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(212, 175, 55, 0.5);
    margin-top: 0.5rem;
}
.welcome-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-brass), transparent);
    margin: 1.5rem 0;
}
.welcome-enter {
    margin-top: 2rem;
    padding: 0.75rem 2.5rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 9999px;
    color: var(--color-brass);
    font-size: 1rem;
    letter-spacing: 0.15em;
    transition: all 0.4s ease;
}
.welcome-enter:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--color-brass);
    transform: scale(1.05);
}

/* Welcome staggered entrance */
.welcome-overlay .welcome-line { opacity: 0; animation: welcome-line-expand 1s ease-out 0.3s forwards; }
.welcome-overlay .welcome-xi { opacity: 0; animation: welcome-fade-in 0.8s ease-out 0.5s forwards, welcome-xi-glow 4s ease-in-out 1.5s infinite; }
.welcome-overlay .welcome-title { opacity: 0; animation: welcome-fade-in 0.8s ease-out 0.8s forwards; }
.welcome-overlay .welcome-sub { opacity: 0; animation: welcome-fade-in 0.8s ease-out 1.1s forwards; }
.welcome-overlay .welcome-date { opacity: 0; animation: welcome-fade-in 0.8s ease-out 1.3s forwards; }
.welcome-overlay .welcome-enter { opacity: 0; animation: welcome-fade-in 0.8s ease-out 1.5s forwards, pulse-border 2.5s ease-in-out 2.3s infinite; }

@keyframes welcome-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes welcome-line-expand {
    from { width: 0; opacity: 0; }
    to { width: 80px; opacity: 0.4; }
}
@keyframes welcome-xi-glow {
    0%, 100% { text-shadow: 0 0 15px rgba(217, 30, 24, 0.1); }
    50% { text-shadow: 0 0 30px rgba(217, 30, 24, 0.2); }
}

.welcome-ripple {
    position: absolute; border-radius: 50%;
    transform: scale(0); opacity: 1;
    animation: ripple-bloom 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}
@keyframes ripple-bloom {
    0% { transform: scale(0); opacity: 0.9; }
    60% { opacity: 0.6; }
    100% { transform: scale(5); opacity: 0; }
}
.welcome-spark {
    position: fixed;
    width: 4px; height: 4px;
    border-radius: 50%;
    pointer-events: none;
    animation: spark-fly 0.8s ease-out forwards;
    z-index: 501;
}
@keyframes spark-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* --- Wedding Photo Effect (natural → enhanced) --- */
.wedding-photo {
    filter: brightness(0.97) saturate(0.95);
    transition: filter 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.photo-card:hover .wedding-photo,
.couple-photo:hover .wedding-photo {
    filter: brightness(1.05) saturate(1.1);
    transform: scale(1.02);
}

/* --- Arch-Top Frame --- */
.arch-frame {
    border-radius: 9999px 9999px 0 0;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.1),
        0 0 40px rgba(244, 114, 182, 0.06),
        0 0 60px rgba(244, 114, 182, 0.04),
        inset 0 0 30px rgba(0, 0, 0, 0.15);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
/* Romantic vignette + soft glow overlay */
.arch-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(244, 114, 182, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.2) 100%);
    box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.08);
}
/* Animated light sweep across frame */
.arch-frame::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 3;
    pointer-events: none;
    border-radius: 9999px 9999px 0 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(212, 175, 55, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );
    background-size: 250% 100%;
    animation: arch-light-sweep 5s ease-in-out infinite;
}
@keyframes arch-light-sweep {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
.arch-frame:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.15),
        0 0 60px rgba(244, 114, 182, 0.1),
        0 0 80px rgba(244, 114, 182, 0.06),
        inset 0 0 30px rgba(0, 0, 0, 0.12);
}

/* ============================
   Romantic Arch (Countdown)
   ============================ */
.arch-romantic {
    position: relative;
    border-radius: 9999px 9999px 0 0;
    padding: 6px;
    background: linear-gradient(
        160deg,
        rgba(212, 175, 55, 0.4) 0%,
        rgba(244, 114, 182, 0.3) 30%,
        rgba(212, 175, 55, 0.25) 60%,
        rgba(244, 114, 182, 0.35) 100%
    );
    box-shadow:
        0 0 25px rgba(244, 114, 182, 0.12),
        0 0 50px rgba(212, 175, 55, 0.08),
        0 0 80px rgba(244, 114, 182, 0.06);
    transition: box-shadow 0.5s ease;
}
.arch-romantic:hover {
    box-shadow:
        0 0 35px rgba(244, 114, 182, 0.18),
        0 0 60px rgba(212, 175, 55, 0.12),
        0 0 100px rgba(244, 114, 182, 0.08);
}

/* Animated gradient border */
.arch-romantic-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 6px;
    background: linear-gradient(
        var(--romantic-angle, 160deg),
        rgba(212, 175, 55, 0.5),
        rgba(244, 114, 182, 0.4),
        rgba(253, 230, 138, 0.4),
        rgba(244, 114, 182, 0.5),
        rgba(212, 175, 55, 0.4)
    );
    background-size: 300% 300%;
    animation: romantic-border-flow 6s ease-in-out infinite;
    z-index: 0;
}
@keyframes romantic-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Inner photo container */
.arch-romantic-inner {
    position: relative;
    z-index: 1;
    border-radius: 9999px 9999px 0 0;
    overflow: hidden;
    height: 100%;
}
.arch-romantic-inner .wedding-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}
.arch-romantic:hover .wedding-photo {
    transform: scale(1.03);
    filter: brightness(1.05) saturate(1.08);
}

/* Dreamy overlay */
.arch-romantic-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(244, 114, 182, 0.06) 0%, transparent 60%),
        linear-gradient(to top, rgba(217, 30, 24, 0.08) 0%, transparent 30%),
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
}

/* Sparkle dots along the arch */
.arch-romantic-sparkles::before,
.arch-romantic-sparkles::after {
    content: '✦';
    position: absolute;
    font-size: 10px;
    color: rgba(212, 175, 55, 0.5);
    z-index: 5;
    pointer-events: none;
    animation: romantic-sparkle-pulse 3s ease-in-out infinite;
}
.arch-romantic-sparkles::before {
    top: 12%;
    left: -4px;
    animation-delay: 0s;
}
.arch-romantic-sparkles::after {
    top: 12%;
    right: -4px;
    animation-delay: 1.5s;
}
@keyframes romantic-sparkle-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.2); }
}

/* Arch floating hearts */
.arch-heart {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    animation: arch-heart-float var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}
@keyframes arch-heart-float {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    15% { opacity: var(--peak-opacity); }
    50% { transform: translateY(var(--rise)) scale(1); }
    85% { opacity: var(--peak-opacity); }
    100% { transform: translateY(0) scale(0.8); opacity: 0; }
}

/* --- Cinematic Photo (Hero specific) --- */
.cinematic-photo {
    filter: contrast(1.05) saturate(1.05);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.group:hover .cinematic-photo {
    filter: contrast(1.1) saturate(1.15) brightness(1.1);
    transform: scale(1.03);
}
.festive-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(217, 30, 24, 0.1) 0%, transparent 40%);
    opacity: 0.5;
    transition: opacity 0.7s ease;
}

/* --- Pulse Divider (Canvas 心跳线) --- */
.pulse-divider {
    position: relative;
    margin: 3rem 0;
    height: 84px;
    overflow: hidden;
}
.heartbeat-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Couple Section --- */
.couple-card {
    opacity: 0;
    position: relative;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.couple-card.from-left {
    transform: translateX(-60px);
}
.couple-card.from-right {
    transform: translateX(60px);
}
.couple-card.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* --- Love Counter Background (responsive crop + opacity) --- */
.love-counter-bg {
    background-position: center top;
}
.love-counter-bg-desktop {
    background-position: 30% top;
    opacity: 0.50;
}
.love-counter-bg-mobile {
    background-position: left top;
    opacity: 0.40;
}

/* --- Love Counter Warm Tint (neutralize green bg) --- */
.love-counter-tint {
    background: linear-gradient(
        to bottom,
        rgba(28, 25, 23, 0.45) 0%,
        rgba(60, 30, 35, 0.35) 50%,
        rgba(28, 25, 23, 0.45) 100%
    );
}

/* --- Love Counter Elegant Card (desktop) --- */
.love-counter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.love-card-heart-top,
.love-card-heart-bottom {
    width: 36px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.love-card-heart-bottom {
    transform: rotate(180deg);
    margin-top: 4px;
}
.love-card-heart-top {
    margin-bottom: 4px;
}
.love-card-line {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
    margin: 0 auto;
}
.love-counter-card-body {
    position: relative;
}
/* Desktop: card body with subtle border sides */
@media (min-width: 768px) {
    .love-counter-card-body {
        border-left: 1px solid rgba(212,175,55,0.12);
        border-right: 1px solid rgba(212,175,55,0.12);
        background: radial-gradient(ellipse at center, rgba(28,25,23,0.18) 0%, transparent 70%);
    }
}

/* --- Love Counter (Romantic Shimmer) --- */
.counter-number {
    display: inline-block;
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(
        135deg,
        #F9A8D4 0%,
        #F472B6 30%,
        #E11D48 60%,
        #F9A8D4 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Timeline --- */
.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    top: 0; bottom: 0;
    background: rgba(212, 175, 55, 0.15);
}
.timeline-line-fill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    top: 0;
    height: 0;
    background: linear-gradient(to bottom, var(--color-crimson), var(--color-brass));
    transition: height 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.4), 0 0 12px rgba(212, 175, 55, 0.15);
}

/* Glowing pulse dot at fill endpoint */
.timeline-fill-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brass);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8), 0 0 20px rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: top 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}
.timeline-fill-dot.active {
    opacity: 1;
    animation: fill-dot-pulse 2s ease-in-out infinite;
}
@keyframes fill-dot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(212,175,55,0.8), 0 0 20px rgba(212,175,55,0.4); transform: translate(-50%,-50%) scale(1); }
    50% { box-shadow: 0 0 14px rgba(212,175,55,1), 0 0 30px rgba(212,175,55,0.6), 0 0 45px rgba(212,175,55,0.2); transform: translate(-50%,-50%) scale(1.3); }
}

/* Timeline heart burst at fill endpoint (positioned inside timeline, scrolls with page) */
.timeline-heart-burst {
    position: absolute;
    font-size: 1rem;
    pointer-events: none;
    z-index: 100;
    animation: tl-heart-pop 1.1s ease-out forwards;
}
@keyframes tl-heart-pop {
    0% { opacity: 1; transform: translate(0, 0) scale(0.3); }
    30% { opacity: 1; transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.4)) scale(1.1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6); }
}
.timeline-node {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-node.revealed {
    opacity: 1;
    transform: translateY(0);
}
.timeline-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: var(--bg-gap);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 2;
    transition: all 0.5s ease;
}
.timeline-node.revealed .timeline-dot {
    border-color: var(--color-brass);
    background: var(--color-brass);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
/* Future node: hollow pulsing dot */
.timeline-future.revealed .timeline-dot {
    border-color: var(--color-brass);
    background: var(--bg-gap);
    box-shadow: none;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { border-color: rgba(212, 175, 55, 0.4); box-shadow: none; }
    50% { border-color: var(--color-brass); box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
}
@media (max-width: 767px) {
    .timeline-line,
    .timeline-line-fill {
        left: 20px;
        transform: translateX(-50%);
    }
    .timeline-dot {
        left: 20px;
        transform: translateX(-50%);
    }
}

/* --- Polaroid Card --- */
.polaroid-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.polaroid-card:hover { transform: rotate(0deg) !important; }
.polaroid-caption {
    position: absolute;
    left: 50%;
    bottom: 0.62rem;
    transform: translateX(-50%);
    margin: 0;
    font-family: "Ma Shan Zheng", cursive;
    font-size: 0.86rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(120, 84, 26, 0.56);
    text-align: center;
    width: calc(100% - 1rem);
    pointer-events: none;
    white-space: nowrap;
}
.polaroid-caption-sm {
    font-size: 0.72rem;
    bottom: 0.45rem;
}
html.dark .polaroid-caption {
    color: rgba(214, 187, 122, 0.64);
}
.polaroid-heart-mark {
    position: absolute;
    left: 0.72rem;
    bottom: 0.58rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1;
    font-size: 1rem;
    color: rgba(236, 193, 206, 0.74);
    text-shadow: 0 0 8px rgba(250, 223, 232, 0.26), 0 0 10px rgba(242, 198, 213, 0.18);
    pointer-events: none;
    user-select: none;
}
.polaroid-heart-mark::after {
    content: '♡';
    font-size: 0.72rem;
    color: rgba(248, 223, 232, 0.86);
    transform: translateY(1px);
}
html.dark .polaroid-heart-mark {
    color: rgba(243, 209, 222, 0.86);
    text-shadow: 0 0 8px rgba(247, 221, 233, 0.22), 0 0 12px rgba(238, 197, 214, 0.17);
}
html.dark .polaroid-heart-mark::after {
    color: rgba(251, 229, 238, 0.8);
}

/* --- Vow Section (Scroll-driven BG) --- */
.vow-section {
    position: relative;
    background-size: cover;
    background-position: center top;
    pointer-events: none;
}
.vow-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(12,10,9,0.6) 0%, rgba(12,10,9,0.85) 100%);
    pointer-events: none;
}

/* --- Page Transition --- */
.page-transition {
    position: fixed; inset: 0;
    background: #0C0A09; z-index: 9999;
    opacity: 1; pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-transition.loaded { opacity: 0; }

/* --- Petals --- */
.petal {
    position: fixed; top: -20px; z-index: 45;
    pointer-events: none;
    border-radius: 50% 0 50% 0;
    animation: petal-fall linear forwards;
}
@keyframes petal-fall {
    0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0.7; }
    20%  { transform: translateY(20vh) rotate(108deg) translateX(35px); }
    40%  { transform: translateY(40vh) rotate(216deg) translateX(-28px); opacity: 0.5; }
    60%  { transform: translateY(60vh) rotate(324deg) translateX(32px); }
    80%  { transform: translateY(80vh) rotate(432deg) translateX(-18px); opacity: 0.2; }
    100% { transform: translateY(105vh) rotate(540deg) translateX(8px); opacity: 0; }
}

/* --- Scroll Reveal --- */
.reveal-on-scroll {
    opacity: 0; transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-visible { opacity: 1; transform: translateY(0); }
/* Guestbook form: fully disable reveal animation to avoid mobile touch hit-testing drift */
.guestbook-form.reveal-on-scroll,
.guestbook-form.reveal-visible {
    opacity: 1;
    transform: none;
    transition: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --- Tilt --- */
.tilt-card { transform-style: preserve-3d; transform: perspective(1000px); }
.tilt-inner { transform: translateZ(30px); }

/* --- Lightbox --- */
.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.96); z-index: 300;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-overlay.active { opacity: 1; pointer-events: all; }
.lightbox-content {
    max-width: 90vw; max-height: 85vh; position: relative;
}
.lightbox-content img {
    max-width: 90vw; max-height: 85vh; object-fit: contain;
    border-radius: 4px;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-overlay.active .lightbox-content img {
    transform: scale(1);
}
.lightbox-close, .lightbox-nav {
    position: absolute; color: white;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease; z-index: 310;
}
.lightbox-close:hover, .lightbox-nav:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.3);
}
.lightbox-close { top: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }
.lightbox-counter {
    position: absolute; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem; letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

/* --- Music Player --- */
.music-player {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 100;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;
    pointer-events: none;
}
.vinyl-btn {
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.25);
    background: rgba(12,10,9,0.7);
    backdrop-filter: blur(12px);
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(212,175,55,0);
    pointer-events: auto;
}
.vinyl-btn:hover {
    border-color: rgba(212,175,55,0.5);
    transform: scale(1.08);
}
.vinyl-btn.playing {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 20px rgba(212,175,55,0.15);
}
.vinyl-btn .vinyl-disc {
    width: 2.2rem; height: 2.2rem;
    transition: transform 0s linear;
}
.vinyl-btn.playing .vinyl-disc {
    animation: spin 3s linear infinite;
}
.vinyl-btn .vinyl-note {
    position: absolute; top: -2px; right: -2px;
    width: 1.1rem; height: 1.1rem;
    background: var(--color-crimson); color: white;
    border-radius: 50%; font-size: 0.55rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vinyl-btn.playing .vinyl-note {
    opacity: 1; transform: scale(1);
}

.music-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    background: rgba(28, 25, 23, 0.92);
    backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(212,175,55,0.12);
    border-radius: 1.25rem; padding: 1.5rem 1.75rem 1.25rem;
    width: 300px;
    transform: translateY(10px) scale(0.95);
    opacity: 0; pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.music-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1; pointer-events: all;
}
.music-panel.open * { pointer-events: auto; }
.music-info {
    text-align: center; margin-bottom: 1.25rem;
    position: relative;
}
.music-info::before {
    content: '\266B'; display: block;
    font-size: 1.4rem; opacity: 0.12;
    margin-bottom: 0.3rem;
}
.song-title {
    display: block; color: #E7E5E4; font-size: 0.95rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-serif);
    letter-spacing: 0.03em;
}
.song-artist {
    display: block; color: rgba(212,175,55,0.5); font-size: 0.72rem; margin-top: 0.25rem;
    font-family: var(--font-display);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.music-progress-wrap {
    width: 100%; height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px; cursor: pointer;
    transition: height 0.2s ease;
    position: relative;
}
.music-progress-wrap:hover { height: 5px; }
.music-progress-wrap.dragging { height: 5px; }
.music-progress-bar {
    height: 100%; border-radius: 3px; width: 0%;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-brass));
    transition: width 200ms linear;
    position: relative;
}
.music-progress-wrap.dragging .music-progress-bar {
    transition: none;
}
.music-progress-bar::after {
    content: '';
    position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-brass);
    box-shadow: 0 0 6px rgba(212,175,55,0.4);
    opacity: 0; transition: opacity 0.2s ease;
}
.music-progress-wrap:hover .music-progress-bar::after,
.music-progress-wrap.dragging .music-progress-bar::after { opacity: 1; }
.music-time {
    display: flex; justify-content: space-between;
    color: rgba(231,229,228,0.3); font-size: 0.6rem;
    margin-top: 0.35rem; font-variant-numeric: tabular-nums;
}
.music-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; margin-top: 0.85rem;
}
.music-controls button {
    color: rgba(231,229,228,0.5); background: none; border: none;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; align-items: center; justify-content: center; padding: 0.25rem;
}
.music-controls button:hover { color: var(--color-brass); transform: scale(1.2); }
.music-controls .play-main {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1.5px solid rgba(212,175,55,0.25); color: var(--color-brass);
    background: rgba(212,175,55,0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.music-controls .play-main:hover {
    background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.5);
    box-shadow: 0 0 16px rgba(212,175,55,0.12);
    transform: scale(1.1);
}

/* --- Song list in panel --- */
.music-playlist {
    margin-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 0.65rem;
    max-height: 140px; overflow-y: auto;
}
.music-playlist::-webkit-scrollbar { width: 2px; }
.music-playlist::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.15); border-radius: 2px; }
.music-pl-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem; border-radius: 0.4rem;
    cursor: pointer; transition: all 0.2s ease;
    font-size: 0.72rem; color: rgba(231,229,228,0.4);
}
.music-pl-item:hover { background: rgba(255,255,255,0.04); color: rgba(231,229,228,0.7); }
.music-pl-item.active { color: var(--color-brass); background: rgba(212,175,55,0.06); }
.music-pl-item .pl-num {
    width: 1.1rem; text-align: center; opacity: 0.4; font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
}
.music-pl-item.active .pl-num { opacity: 1; }
.music-pl-item .pl-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-pl-item .pl-artist { opacity: 0.5; font-size: 0.62rem; white-space: nowrap; }

/* --- Scroll Top Button --- */
#scrollTopBtn {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#scrollTopBtn:hover {
    transform: translateY(-2px);
}

/* --- Countdown Cards Hover --- */
.countdown-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.countdown-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(217, 30, 24, 0.06);
}

/* --- Keyframes --- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pulse-border {
    0%, 100% { border-color: rgba(212, 175, 55, 0.35); }
    50% { border-color: rgba(212, 175, 55, 0.65); }
}

/* --- Scroll Indicator --- */
.scroll-indicator {
    animation: float 3s ease-in-out infinite;
}

/* --- Romantic Frame 1: Organic Blob --- */
.romantic-frame-1 {
    position: relative;
}
.romantic-frame-1 .frame-glow {
    position: absolute;
    inset: -15px;
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    background: radial-gradient(circle, rgba(244,114,182,0.12) 0%, transparent 70%);
    animation: blob-morph 8s ease-in-out infinite, float 6s ease-in-out infinite;
    z-index: 0;
}
.romantic-frame-1 .frame-inner {
    position: relative;
    z-index: 1;
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 20px 50px rgba(217, 30, 24, 0.06), 0 0 0 2px rgba(212, 175, 55, 0.12);
    animation: blob-morph 8s ease-in-out infinite;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.romantic-frame-1:hover .frame-inner {
    transform: scale(1.03);
    box-shadow: 0 25px 60px rgba(217, 30, 24, 0.1), 0 0 0 3px rgba(212, 175, 55, 0.25);
}
@keyframes blob-morph {
    0%, 100% { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
    25% { border-radius: 45% 55% 60% 40% / 40% 60% 38% 62%; }
    50% { border-radius: 55% 45% 38% 62% / 56% 40% 60% 44%; }
    75% { border-radius: 40% 60% 55% 45% / 62% 38% 44% 56%; }
}

/* --- Romantic Frame 2: Cameo Circle with Rings --- */
.romantic-frame-2 {
    position: relative;
}
.romantic-frame-2 .frame-glow-2 {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
    animation: float 7s ease-in-out infinite;
    z-index: 0;
}
.romantic-frame-2 .frame-inner-2 {
    position: relative;
    z-index: 2;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.romantic-frame-2 .frame-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.2);
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.romantic-frame-2 .frame-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.1);
}
.romantic-frame-2 .frame-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.06);
}
.romantic-frame-2:hover .frame-inner-2 {
    transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.romantic-frame-2:hover .frame-ring {
    border-color: rgba(212, 175, 55, 0.4);
    transform: rotate(30deg);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

/* --- Poster Scroll Wrapper --- */
.poster-scroll-wrapper {
    position: relative;
    height: 300vh;
}
.poster-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
@media (max-width: 768px) {
    html.poster-sticky-active,
    body.poster-sticky-active {
        overflow-x: visible !important;
    }
    .poster-scroll-wrapper {
        height: 150vh;
        height: 150svh;
        height: 150lvh;
    }
    .poster-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        height: 100lvh;
        overflow: hidden;
    }
}

/* WeChat/Android mobile fallback: reduce compositor pressure and avoid drag-time overlay flicker */
@media (max-width: 768px) {
    body.low-perf-mobile .noise-overlay,
    body.low-perf-mobile .warm-vignette,
    body.low-perf-mobile .petal,
    body.low-perf-mobile .sparkle,
    body.low-perf-mobile .floating-heart,
    body.low-perf-mobile .cursor-sparkle,
    body.low-perf-mobile .counter-burst-heart,
    body.low-perf-mobile .progress-heart-burst {
        display: none !important;
    }

    body.low-perf-mobile #navbar.nav-scrolled,
    body.low-perf-mobile .music-panel,
    body.low-perf-mobile .gb-card,
    body.low-perf-mobile .gb-show-more {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.low-perf-mobile .poster-sticky {
        height: 100svh;
        height: 100lvh;
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: background-position;
    }

    body.low-perf-mobile .vow-overlay {
        inset: -2px 0;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* --- Photo Break Section --- */
.photo-break {
    position: relative;
    background-size: cover;
    background-position: center;
}
.photo-break-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(12,10,9,0.5) 0%, rgba(12,10,9,0.7) 100%);
}

/* --- Reveal Directions --- */
.reveal-from-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-from-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-from-left.reveal-visible,
.reveal-from-right.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale.reveal-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- Click Heart --- */
.click-heart {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    font-size: 1.2rem;
    animation: heart-float 1.5s ease-out forwards;
    user-select: none;
}
@keyframes heart-float {
    0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
    30% { opacity: 1; transform: translateY(-30px) scale(1.2) rotate(10deg); }
    100% { opacity: 0; transform: translateY(-120px) scale(0.6) rotate(-15deg); }
}

/* --- Floating Hearts (ambient) --- */
.floating-heart {
    position: fixed;
    bottom: -20px;
    z-index: 43;
    pointer-events: none;
    animation: heart-rise linear forwards;
    opacity: 0;
    text-shadow: 0 0 6px rgba(217,30,24,0.15);
}
@keyframes heart-rise {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.5; transform: translateY(-10vh) translateX(10px) scale(0.9); }
    30% { transform: translateY(-30vh) translateX(-20px) scale(1); }
    50% { opacity: 0.35; transform: translateY(-50vh) translateX(15px) scale(1.05); }
    70% { transform: translateY(-70vh) translateX(-10px) scale(0.9); }
    100% { opacity: 0; transform: translateY(-110vh) translateX(8px) scale(0.6); }
}

/* --- Welcome Click Transition: Watercolor Wash (desktop) / Circle Reveal (mobile) --- */

/* Mobile: clip-path circle reveal */
@media (max-width: 767px) {
    .welcome-overlay.circle-reveal {
        transition: none;
        clip-path: circle(150% at var(--cx) var(--cy));
    }
    .welcome-overlay.circle-reveal.dismissed {
        opacity: 1;
        visibility: visible;
        clip-path: circle(0% at var(--cx) var(--cy));
        transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    }
}

.welcome-overlay.transitioning .welcome-xi,
.welcome-overlay.transitioning .welcome-title,
.welcome-overlay.transitioning .welcome-sub,
.welcome-overlay.transitioning .welcome-date,
.welcome-overlay.transitioning .welcome-enter,
.welcome-overlay.transitioning .welcome-line {
    animation: text-float-away 0.7s ease-in forwards !important;
}
.welcome-overlay.transitioning .welcome-xi { animation-delay: 0s !important; }
.welcome-overlay.transitioning .welcome-title { animation-delay: 0.05s !important; }
.welcome-overlay.transitioning .welcome-sub { animation-delay: 0.1s !important; }
.welcome-overlay.transitioning .welcome-date { animation-delay: 0.12s !important; }
.welcome-overlay.transitioning .welcome-enter { animation-delay: 0.15s !important; }
.welcome-overlay.transitioning .welcome-line { animation-delay: 0.08s !important; }

@keyframes text-float-away {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-50px) scale(1.08); filter: blur(8px); }
}

.welcome-wash {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
    animation: wash-expand cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wash-expand {
    0% { transform: scale(0); opacity: 1; }
    60% { opacity: 0.85; }
    100% { transform: scale(1); opacity: 0; }
}

.welcome-ring {
    position: absolute;
    width: 0; height: 0;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 15px rgba(212, 175, 55, 0.1);
    transform: translate(-50%, -50%);
    animation: ring-expand 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 501;
}
@keyframes ring-expand {
    0% { width: 0; height: 0; opacity: 1; border-width: 3px; }
    40% { opacity: 0.7; border-width: 2px; }
    100% { width: 120vmax; height: 120vmax; opacity: 0; border-width: 0.5px; }
}

.welcome-petal-burst {
    position: fixed;
    width: 12px; height: 17px;
    border-radius: 58% 14% 66% 12%;
    pointer-events: none;
    animation: petal-burst 1.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 503;
    transform-origin: center;
    mix-blend-mode: normal;
    filter: saturate(1.02) brightness(1.06);
    box-shadow: 0 0 8px rgba(255, 236, 244, 0.38), 0 0 12px rgba(245, 189, 211, 0.24);
}
@keyframes petal-burst {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.28); opacity: 0; }
    18% { opacity: 0.88; }
    65% { opacity: 0.68; }
    100% { transform: translate(var(--dx), calc(var(--dy) + var(--drop, 68px))) rotate(calc(var(--rot) + 90deg)) scale(0.24); opacity: 0; }
}

/* --- Welcome Ambient Particles --- */
.welcome-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: welcome-particle-float ease-in-out infinite;
}
@keyframes welcome-particle-float {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    20% { opacity: 0.6; }
    50% { transform: translateY(-30vh) translateX(20px); opacity: 0.3; }
    100% { transform: translateY(-60vh) translateX(-10px); opacity: 0; }
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .music-player { bottom: 1rem; right: 1rem; }
    .music-panel { width: 270px; padding: 1.25rem 1.25rem 1rem; }
    .vinyl-btn { width: 3rem; height: 3rem; }
    .vinyl-btn .vinyl-disc { width: 1.8rem; height: 1.8rem; }
    .lightbox-nav { width: 2.5rem; height: 2.5rem; }
    .lightbox-close { width: 2.5rem; height: 2.5rem; top: 1rem; right: 1rem; }
    .lightbox-nav.prev { left: 0.5rem; }
    .lightbox-nav.next { right: 0.5rem; }
}

/* --- Floating Sparkles --- */
.sparkle {
    position: fixed; bottom: -10px; z-index: 44;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
    animation: sparkle-float linear forwards;
}
@keyframes sparkle-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.8; }
    30%  { transform: translateY(-30vh) translateX(18px); opacity: 0.6; }
    60%  { transform: translateY(-60vh) translateX(-15px); opacity: 0.35; }
    100% { transform: translateY(-110vh) translateX(8px); opacity: 0; }
}

/* --- Cursor Sparkle Trail --- */
.cursor-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    border-radius: 50%;
    animation: cursor-sparkle-fade 0.8s ease-out forwards;
}
@keyframes cursor-sparkle-fade {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(0); opacity: 0; }
}

/* --- Drag Heart Trail --- */
.drag-heart-trail {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    opacity: 0.7;
    animation: drag-heart-float 1.2s ease-out forwards;
}
@keyframes drag-heart-float {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
    30% { transform: translateY(-15px) translateX(var(--drift)) scale(1.1); opacity: 0.6; }
    100% { transform: translateY(-50px) translateX(var(--drift)) scale(0.3); opacity: 0; }
}

/* --- Counter Burst Hearts --- */
.counter-burst-heart {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    font-size: 1rem;
    animation: counter-burst 1.1s ease-out forwards;
    user-select: none;
}
@keyframes counter-burst {
    0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
    30% { transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.4)) scale(1.2); opacity: 0.9; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
}
.counter-glow {
    animation: shimmer 4s ease-in-out infinite, counter-pulse 0.6s ease-out 1 !important;
}
@keyframes counter-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* --- Hero Floating Decorations --- */
.hero-decoration {
    pointer-events: none;
    z-index: 1;
}
@keyframes hero-dec-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-12px) translateX(6px); }
    66% { transform: translateY(-4px) translateX(-5px); }
}

/* --- Hero Corner Ornaments --- */
.hero-ornament {
    position: absolute;
    font-size: 1.5rem;
    color: var(--color-brass);
    opacity: 0.15;
    pointer-events: none;
    animation: hero-ornament-drift 8s ease-in-out infinite;
}
.hero-ornament-tl { top: 2rem; left: 2rem; }
.hero-ornament-tr { top: 2rem; right: 2rem; transform: scaleX(-1); animation-delay: 2s; }
.hero-ornament-bl { bottom: 2rem; left: 2rem; transform: scaleY(-1); animation-delay: 4s; }
.hero-ornament-br { bottom: 2rem; right: 2rem; transform: scale(-1); animation-delay: 6s; }
@keyframes hero-ornament-drift {
    0%, 100% { transform: translate(0, 0); opacity: 0.15; }
    50% { transform: translate(4px, -4px); opacity: 0.25; }
}
.hero-ornament-tr { animation-name: hero-ornament-drift-tr; }
@keyframes hero-ornament-drift-tr {
    0%, 100% { transform: scaleX(-1) translate(0, 0); opacity: 0.15; }
    50% { transform: scaleX(-1) translate(4px, -4px); opacity: 0.25; }
}
.hero-ornament-bl { animation-name: hero-ornament-drift-bl; }
@keyframes hero-ornament-drift-bl {
    0%, 100% { transform: scaleY(-1) translate(0, 0); opacity: 0.15; }
    50% { transform: scaleY(-1) translate(-4px, 4px); opacity: 0.25; }
}
.hero-ornament-br { animation-name: hero-ornament-drift-br; }
@keyframes hero-ornament-drift-br {
    0%, 100% { transform: scale(-1) translate(0, 0); opacity: 0.15; }
    50% { transform: scale(-1) translate(-4px, -4px); opacity: 0.25; }
}
.hero-side-text {
    opacity: 0.12;
    animation: hero-side-fade 6s ease-in-out infinite;
}
@keyframes hero-side-fade {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.2; }
}

/* --- Couple Card Cursor Glow --- */
.couple-card::before {
    content: '';
    position: absolute;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(244,114,182,0.06) 0%, transparent 70%);
    border-radius: 50%;
    left: var(--glow-x, 50%);
    top: var(--glow-y, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}
.couple-card:hover::before {
    opacity: 1;
}

/* --- Countdown Digit Flip --- */
#days.flipping, #hours.flipping, #minutes.flipping, #seconds.flipping {
    animation: digit-flip 0.4s ease-out;
}
@keyframes digit-flip {
    0% { transform: translateY(-30%) rotateX(40deg); opacity: 0.3; }
    60% { transform: translateY(5%) rotateX(-5deg); opacity: 1; }
    100% { transform: translateY(0) rotateX(0); opacity: 1; }
}

/* --- Ceremony Text Hover Glow --- */
.text-glow-hover {
    transition: text-shadow 0.4s ease, color 0.4s ease;
    cursor: default;
}
.text-glow-hover:hover {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.2), 0 0 40px rgba(244, 114, 182, 0.08);
}

/* --- Hero Photo Halo/Glow Ring --- */
.hero-photo-wrapper {
    position: relative;
    display: inline-block;
}
.hero-photo-halo {
    position: absolute;
    inset: -30px;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px 9999px 0 0;
    overflow: visible;
}
.hero-photo-halo svg {
    width: 100%;
    height: 100%;
    filter: blur(8px);
    animation: halo-pulse 4s ease-in-out infinite;
}
@keyframes halo-pulse {
    0%, 100% { opacity: 0.4; filter: blur(8px); }
    50% { opacity: 0.7; filter: blur(12px); }
}

/* --- Hero Frame Ornamental Corners --- */
.frame-with-corners {
    position: relative;
}
.frame-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}
.frame-with-corners:hover .frame-corner {
    opacity: 1;
}
.frame-corner::before,
.frame-corner::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, #D4AF37, #E8C84A);
    border-radius: 1px;
}
/* Top-left */
.frame-corner.fc-tl { top: 6px; left: 6px; }
.frame-corner.fc-tl::before { top: 0; left: 0; width: 2px; height: 18px; }
.frame-corner.fc-tl::after { top: 0; left: 0; width: 18px; height: 2px; }
/* Top-right */
.frame-corner.fc-tr { top: 6px; right: 6px; }
.frame-corner.fc-tr::before { top: 0; right: 0; width: 2px; height: 18px; }
.frame-corner.fc-tr::after { top: 0; right: 0; width: 18px; height: 2px; }
/* Bottom-left */
.frame-corner.fc-bl { bottom: 6px; left: 6px; }
.frame-corner.fc-bl::before { bottom: 0; left: 0; width: 2px; height: 18px; }
.frame-corner.fc-bl::after { bottom: 0; left: 0; width: 18px; height: 2px; }
/* Bottom-right */
.frame-corner.fc-br { bottom: 6px; right: 6px; }
.frame-corner.fc-br::before { bottom: 0; right: 0; width: 2px; height: 18px; }
.frame-corner.fc-br::after { bottom: 0; right: 0; width: 18px; height: 2px; }
/* Small diamond accent at corner junction */
.frame-corner::after {
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.3);
}

/* --- Hero Romantic Tagline --- */
.hero-tagline {
    font-style: italic;
    opacity: 0;
    animation: tagline-fade-in 1.2s ease-out 1.8s forwards;
    letter-spacing: 0.1em;
}
@keyframes tagline-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 0.55; transform: translateY(0); }
}

/* --- Letter Stagger Animation --- */
[data-letter-stagger] .stagger-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letter-stagger-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes letter-stagger-in {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Text Split Reveal --- */
.text-split-reveal .split-char {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(5px);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.text-split-reveal.split-revealed .split-char {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- Photo Hover Ripple --- */
.photo-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 15;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, rgba(244, 114, 182, 0.1) 40%, transparent 70%);
    transform: scale(0);
    animation: photo-ripple-expand 0.8s ease-out forwards;
}
@keyframes photo-ripple-expand {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* --- Double-Click Floating Heart --- */
.dblclick-heart {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    user-select: none;
    animation: dblclick-heart-float 2s ease-out forwards;
}
.dblclick-heart svg {
    filter: drop-shadow(0 2px 8px rgba(217, 30, 24, 0.3));
}
@keyframes dblclick-heart-float {
    0% { opacity: 0; transform: scale(0.2) translateY(0); }
    15% { opacity: 1; transform: scale(1.3) translateY(-20px); }
    30% { transform: scale(1) translateY(-40px); }
    100% { opacity: 0; transform: scale(0.6) translateY(-200px) rotate(-15deg); }
}

/* --- Background Gradient Shift (scroll-driven) --- */
body {
    transition: background-color 0.8s ease;
}
body.bg-shift-warm {
    background-color: #F7EFEA !important;
}
body.bg-shift-rose {
    background-color: #F5EBE8 !important;
}
html.dark body.bg-shift-warm,
html.dark body.bg-shift-rose {
    background-color: #0C0A09 !important;
}

/* --- Internal Parallax for [data-tilt] photos --- */
[data-tilt] .arch-frame img,
[data-tilt] .wedding-photo {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================
   Romantic Mini Calendar
   ========================================== */
.wedding-calendar {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}
html:not(.dark) .wedding-calendar {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
/* Subtle corner decorations */
.wedding-calendar::before,
.wedding-calendar::after {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    pointer-events: none;
}
.wedding-calendar::before {
    top: 6px; left: 6px;
    border-right: none; border-bottom: none;
    border-radius: 4px 0 0 0;
}
.wedding-calendar::after {
    bottom: 6px; right: 6px;
    border-left: none; border-top: none;
    border-radius: 0 0 4px 0;
}

.cal-header {
    text-align: center;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.cal-weekdays span {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    opacity: 0.35;
    padding: 0.25rem 0;
    font-weight: 500;
}
.cal-dates {
    margin-top: 0.25rem;
}
.cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    font-size: 0.75rem;
    opacity: 0.55;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: default;
}
.cal-day:hover {
    opacity: 0.8;
    background: rgba(212, 175, 55, 0.06);
}

/* Valentine's Day — small heart dot below number */
.cal-valentine {
    opacity: 0.7;
    color: #F472B6;
}
.cal-valentine::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: #F472B6;
    border-radius: 50%;
    opacity: 0.6;
}

/* Today marker — subtle underline dot, doesn't compete with wedding day */
.cal-today {
    opacity: 0.75;
    color: rgba(212, 175, 55, 0.8);
}
.cal-today::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 3px;
    background: rgba(212, 175, 55, 0.5);
    border-radius: 50%;
}

/* Wedding Day — hand-drawn heart circle */
.cal-wedding {
    opacity: 1 !important;
    color: var(--color-crimson);
    font-weight: 700;
    font-size: 0.85rem;
    z-index: 1;
}
.cal-wedding::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 50%;
    /* SVG hand-drawn heart outline as background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 35 C20 35 4 25 4 15 C4 9 8 5 13 5 C16 5 18.5 7 20 9 C21.5 7 24 5 27 5 C32 5 36 9 36 15 C36 25 20 35 20 35Z' fill='none' stroke='%23D91E18' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='2 1.5' opacity='0.55'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: cal-heart-draw 2s ease-out 0.5s both;
}
@keyframes cal-heart-draw {
    0% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* Wedding day & Valentine's day tooltip */
.cal-wedding:hover::after,
.cal-valentine:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
    background: rgba(28, 25, 23, 0.85);
    color: #F0E4D7;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
}
.cal-valentine:hover::after {
    background: rgba(244, 114, 182, 0.85);
}
/* Override valentine dot on hover (tooltip replaces it) */
.cal-valentine:hover::before {
    opacity: 0;
}

.cal-note {
    opacity: 0;
    animation: cal-note-fade 0.8s ease-out 1.5s forwards;
}
@keyframes cal-note-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Noscript --- */
noscript .page-transition { display: none; }

/* =========================================
   GUESTBOOK
   ========================================= */

.guestbook-section {
    position: relative;
    z-index: 5;
    isolation: isolate;
}

/* Mobile fallback: while guestbook is in view, disable potential hit-test blockers */
@media (hover: none) and (pointer: coarse) {
    body.guestbook-interaction-mode .music-player,
    body.guestbook-interaction-mode .noise-overlay,
    body.guestbook-interaction-mode .warm-vignette {
        display: none !important;
    }

    body.guestbook-interaction-mode .poster-sticky,
    body.guestbook-interaction-mode .vow-section,
    body.guestbook-interaction-mode .vow-overlay {
        pointer-events: none !important;
    }
}

/* Form Container */
.guestbook-form {
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    position: relative;
    z-index: 2;
    isolation: isolate;
    touch-action: auto;
}
html:not(.dark) .guestbook-form {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Decorative corners */
.guestbook-form::before,
.guestbook-form::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(212, 175, 55, 0.3);
    pointer-events: none;
    z-index: 0;
}
.guestbook-form::before {
    top: 8px; left: 8px;
    border-top: 1px solid; border-left: 1px solid;
    border-color: inherit;
}
.guestbook-form::after {
    bottom: 8px; right: 8px;
    border-bottom: 1px solid; border-right: 1px solid;
    border-color: inherit;
}
.guestbook-form > * {
    position: relative;
    z-index: 1;
}

/* Input & Textarea */
.gb-field { margin-bottom: 1rem; }

.gb-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding: 0.6rem 0.25rem;
    font-family: "Noto Serif SC", "Cormorant Garamond", serif;
    font-size: 0.9rem;
    color: inherit;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: auto;
    -webkit-appearance: none;
    appearance: none;
}
.gb-input::placeholder { opacity: 0.35; }
.gb-input:focus {
    border-bottom-color: var(--color-brass);
    box-shadow: 0 1px 0 0 rgba(212, 175, 55, 0.4);
    outline: none;
}
.guestbook-section input:focus,
.guestbook-section textarea:focus,
.guestbook-section button:focus { outline: none; box-shadow: none; }
/* Ensure all interactive elements are always tappable on mobile */
.guestbook-section input,
.guestbook-section textarea,
.guestbook-section select,
.guestbook-section button {
    pointer-events: auto;
    -webkit-user-select: auto;
    user-select: auto;
}
.guestbook-section textarea {
    -webkit-user-select: text;
    user-select: text;
}
.guestbook-section input:focus-visible,
.guestbook-section textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--color-brass);
    box-shadow: 0 1px 0 0 rgba(212, 175, 55, 0.4);
}
/* Textarea visual wrapper — border-radius lives here, NOT on the textarea,
   because mobile browsers have broken hit-testing for textarea with border-radius */
.gb-textarea-box {
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    overflow: visible;
}
html:not(.dark) .gb-textarea-box {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(212, 175, 55, 0.18);
}
.gb-textarea-box:focus-within {
    border-color: var(--color-brass);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* Textarea itself: no border, no radius, no background — plain rectangle */
.gb-textarea {
    resize: none;
    min-height: 88px;
    line-height: 1.6;
    border: none;
    border-radius: 0;
    padding: 0.75rem;
    background: transparent;
    display: block;
    text-align: left;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}
.gb-textarea:focus {
    border: none;
    box-shadow: none;
}

/* Role Tag Buttons */
.gb-roles {
    display: flex; justify-content: center; gap: 0.5rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.gb-role-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.8rem; border-radius: 999px;
    font-size: 0.78rem; letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: inherit; opacity: 0.5; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: auto;
    min-height: 36px;
}
html:not(.dark) .gb-role-tag {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}
.gb-role-tag:hover { opacity: 0.75; transform: translateY(-1px); }
.gb-role-tag.active {
    opacity: 1;
    border-color: var(--gb-tag-color, #e8527a);
    background: color-mix(in srgb, var(--gb-tag-color, #e8527a) 15%, transparent);
    color: var(--gb-tag-color, #e8527a);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gb-tag-color, #e8527a) 25%, transparent);
}
html:not(.dark) .gb-role-tag.active {
    background: color-mix(in srgb, var(--gb-tag-color, #e8527a) 12%, white);
}

/* Multi-select hint */
.gb-roles-hint {
    text-align: center; font-size: 0.6rem; opacity: 0.2;
    margin-top: -0.5rem; margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

/* Quick blessing tags */
.gb-inspire-toggle {
    display: block;
    width: 100%;
    text-align: right; font-size: 0.7rem; opacity: 0.3;
    margin-top: 0.5rem; cursor: pointer;
    font-family: var(--font-serif);
    transition: opacity 0.3s ease;
    user-select: none;
    padding: 0.6rem 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: auto;
    background: none;
    border: none;
    color: inherit;
}
.gb-inspire-toggle:hover { opacity: 0.6; }
.gb-inspire-toggle.open { opacity: 0.5; }

.gb-quick-wrap {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 0.5rem; justify-content: center;
    overflow: hidden;
    max-height: 0; opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease, margin 0.4s ease;
}
.gb-quick-wrap.gb-quick-hidden {
    max-height: 0; opacity: 0; margin-top: 0;
    pointer-events: none;
}
.gb-quick-wrap.gb-quick-visible {
    max-height: 200px; opacity: 1; margin-top: 0.5rem;
    pointer-events: auto;
}
.gb-quick-tag {
    font-size: 0.7rem; padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.12);
    color: inherit; opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-serif);
    letter-spacing: 0.04em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.gb-quick-tag:hover {
    opacity: 0.85;
    background: rgba(212,175,55,0.12);
    border-color: rgba(212,175,55,0.3);
    transform: translateY(-1px);
}
.gb-quick-tag.active {
    opacity: 1;
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.4);
    box-shadow: 0 0 8px rgba(212,175,55,0.1);
}

/* Submit Button */
.gb-submit {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.8rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px; font-size: 0.85rem; letter-spacing: 0.12em;
    color: inherit; background: transparent; cursor: pointer;
    transition: all 0.3s ease; margin-top: 0.5rem;
    position: relative; overflow: hidden;
}
.gb-submit:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.12);
}
.gb-submit:active { transform: translateY(0) scale(0.97); }
.gb-submit:disabled { opacity: 0.4; pointer-events: none; }

/* Submit success ripple */
.gb-submit-success {
    animation: gb-submit-pulse 0.5s ease;
}
@keyframes gb-submit-pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    100% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
}

/* Message List */
.gb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 3.5rem;
}

/* ---- Message Card ---- */
.gb-card {
    flex: 0 0 auto;
    width: calc(50% - 1rem);
    max-width: 340px;
    min-width: 240px;
    position: relative;
    border-radius: 16px;
    padding: 1.5rem 1.4rem 2.65rem;
    text-align: left;
    cursor: default;
    transform-origin: center center;
    animation: gb-breathe var(--gb-dur, 4s) ease-in-out var(--gb-del, 0s) infinite;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    /* Warm frosted glass */
    background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(212,175,55,0.03) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212,175,55,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}
@media (max-width: 520px) { .gb-card { width: 100%; max-width: none; min-width: 0; } }
@media (min-width: 900px) { .gb-card { width: calc(33% - 1.4rem); } }

html:not(.dark) .gb-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.75) 0%, rgba(255,248,240,0.65) 100%);
    border-color: rgba(212,175,55,0.12);
    box-shadow: 0 4px 24px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Top accent gradient line */
.gb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px; height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--gb-card-accent, #d4af37) 30%, var(--gb-card-accent, #d4af37) 70%, transparent);
    opacity: 0.45;
    transition: opacity 0.4s ease;
}
.gb-card:hover::before { opacity: 1; }

/* Decorative corner symbol */
.gb-card::after {
    content: '\2661';
    position: absolute; bottom: 8px; right: 14px;
    font-size: 0.85rem; opacity: 0.06;
    color: var(--gb-card-accent, #d4af37);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.gb-card:hover::after { opacity: 0.2; }

/* Breathing — bigger sway */
@keyframes gb-breathe {
    0%, 100% { transform: rotate(var(--gb-rot, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--gb-rot, 0deg)) translateY(var(--gb-sway, -8px)); }
}

.gb-card:hover {
    animation-play-state: paused;
    transform: rotate(0deg) translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 0 30px rgba(212,175,55,0.05);
    border-color: rgba(212,175,55,0.25);
    z-index: 10;
}

/* Card inner elements */
.gb-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; flex-wrap: wrap;
}
.gb-card-nick {
    font-family: "Ma Shan Zheng", cursive;
    font-size: 1.1rem;
    color: var(--gb-card-accent, #d4af37);
}
.gb-card-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.65rem; padding: 0.12rem 0.45rem;
    border-radius: 999px; letter-spacing: 0.04em;
}
/* Small divider between name and content */
.gb-card-content {
    font-size: 0.88rem; line-height: 1.75; opacity: 0.78;
    word-break: break-word;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(212,175,55,0.08);
}
.gb-card-meta {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    pointer-events: none;
}
.gb-card-time {
    font-size: 0.72rem;
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: rgba(132, 104, 53, 0.82);
    background: linear-gradient(145deg, rgba(255,255,255,0.74), rgba(212,175,55,0.14));
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(212,175,55,0.08);
}
html.dark .gb-card-time {
    color: rgba(246, 225, 173, 0.86);
    background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(255,255,255,0.04));
    border-color: rgba(212,175,55,0.28);
}

/* Like heart button */
.gb-card-like {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; cursor: pointer;
    padding: 4px; opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: inherit;
}
.gb-card:hover .gb-card-like { opacity: 0.4; }
.gb-card-like:hover { opacity: 1 !important; transform: scale(1.3); color: #e8527a; }
.gb-card-like.liked {
    opacity: 1 !important; color: #e8527a;
    animation: gb-like-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gb-like-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Edit / Delete action buttons (own cards, 5-min window) */
.gb-card-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.14rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.14);
    opacity: 0.72;
    transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    pointer-events: auto;
}
html:not(.dark) .gb-card-actions {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.17);
}
.gb-card:hover .gb-card-actions {
    opacity: 1;
    border-color: rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.11);
}
.gb-action-btn {
    background: none; border: none; cursor: pointer;
    padding: 3px 5px; border-radius: 6px;
    color: inherit; opacity: 0.82;
    transition: all 0.25s ease;
}
.gb-action-btn:hover,
.gb-action-btn:focus-visible {
    opacity: 1;
    transform: scale(1.12);
}
.gb-edit-btn:hover { color: #d4af37; }
.gb-del-btn:hover { color: #e8527a; }

/* Card entrance — opacity only, breathing handles transform */
.gb-card-enter {
    animation: gb-breathe var(--gb-dur, 4s) ease-in-out var(--gb-del, 0s) infinite,
               gb-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
@keyframes gb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Staggered entrance */
.gb-card-stagger { opacity: 0; }
.gb-card-stagger.gb-visible {
    animation: gb-breathe var(--gb-dur, 4s) ease-in-out var(--gb-del, 0s) infinite,
               gb-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Submit float hearts */
.gb-float-heart {
    position: fixed;
    pointer-events: none;
    z-index: 999;
    font-size: 1.2rem;
    animation: gb-float-up 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gb-float-up {
    0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-120px) scale(1.2) rotate(20deg); }
}

/* Show-more button */
.gb-show-more {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.65rem 1.6rem;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 999px;
    background: rgba(212,175,55,0.04);
    backdrop-filter: blur(6px);
    color: rgba(212,175,55,0.7);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(.dark) .gb-show-more {
    border-color: rgba(139,90,43,0.15);
    color: rgba(139,90,43,0.55);
    background: rgba(255,248,240,0.4);
}
.gb-show-more:hover {
    border-color: rgba(212,175,55,0.4);
    background: rgba(212,175,55,0.08);
    color: rgba(212,175,55,1);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212,175,55,0.1);
}
html:not(.dark) .gb-show-more:hover {
    border-color: rgba(139,90,43,0.3);
    color: rgba(139,90,43,0.8);
    background: rgba(255,248,240,0.6);
}
.gb-more-count {
    font-size: 0.75rem;
    opacity: 0.5;
}

/* Mobile Safari: font-size < 16px causes auto-zoom on focus, which shifts
   the viewport and creates touch-targeting confusion. Force 16px on mobile. */
@media (max-width: 768px) {
    .gb-input,
    .gb-textarea {
        font-size: 16px;
    }
}