/* ==========================================
   ANNIVERSARY & VALENTINE'S WEBSITE
   Custom Styles & Animations
   ========================================== */

/* ==================== FONTS ==================== */
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, .heading-font {
    font-family: 'Playfair Display', serif;
}

.serif {
    font-family: 'Playfair Display', serif;
}

/* ==================== GRAIN TEXTURE OVERLAY ==================== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

/* ==================== GLASSMORPHISM ==================== */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(90, 24, 24, 0.1);
}

.glass-dark {
    background: rgba(90, 24, 24, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* Intro Letter Card - Elegant Editorial Glassmorphism */
.intro-letter-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(90, 24, 24, 0.08);
}

/* Love Letter Card — warm rose-tinted glassmorphism, distinct from Intro Letter */
.love-letter-card {
    background: rgba(255, 240, 240, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 10px 40px rgba(90, 24, 24, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Intro Letter Ornamentation */
.intro-letter-heart {
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateY(-10px) scale(0.8);
}

.intro-letter-heart.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.intro-heart-icon {
    animation: subtle-pulse 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.intro-letter-divider {
    opacity: 0;
    width: 0;
    transition: width 1s ease-in-out, opacity 1s ease-in-out;
}

.intro-letter-divider.visible {
    opacity: 0.4;
    width: 100%;
}

/* ==================== GRADIENT BACKGROUNDS ==================== */
.gradient-bg {
    background: linear-gradient(135deg, #FDFBF7 0%, #F8E8E8 50%, #FAE5E5 100%);
}

.gradient-dark {
    background: linear-gradient(180deg, rgba(90, 24, 24, 0.05) 0%, rgba(90, 24, 24, 0.15) 100%);
}

/* Password Gate - Deep Romantic Gradient + Ambient Particles */
/* Default (before JS assigns the tier class): neutral cream so there's never a flash */
#passwordGate {
    background: #FDFBF7;
}

#passwordGate.password-gate-bg {
    /* Deep romantic base gradient with soft rose-gold glow */
    background:
        radial-gradient(circle at top left, rgba(248, 215, 218, 0.45) 0%, transparent 45%),
        radial-gradient(circle at bottom right, rgba(255, 215, 186, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, #2c0000 0%, #5A1818 40%, #8B1E3F 70%, #C58C85 100%);
}

/* ── Lite tier: clean single-color background, no animation ───────────── */
#passwordGate.password-gate-lite {
    background: #5A1818;
}

#passwordGate.password-gate-lite .password-gate-particles {
    display: none;
}

#passwordGate.password-gate-lite .password-gate-card {
    background: #FDFBF7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 24px rgba(90, 24, 24, 0.08);
}

#passwordGate.password-gate-lite .password-gate-title {
    color: #5A1818;
    text-shadow: none;
}

#passwordGate.password-gate-lite .password-gate-subtitle {
    color: #6b7280;
    text-shadow: none;
}

#passwordGate.password-gate-lite .heart-gold {
    filter: none;
    background: linear-gradient(145deg, #f8e8c8 0%, #d4af37 50%, #b8960c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#passwordGate.password-gate-lite .password-gate-btn {
    transition: background-color 0.2s ease;
}

.password-gate-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.pg-particle {
    position: absolute;
    width: 14px;
    height: 22px;
    border-radius: 50% 50% 50% 50%;
    background: radial-gradient(circle at 30% 20%, #ffe9d6 0%, #f5b7b1 35%, #b33951 100%);
    opacity: 0.75;
    filter: blur(0.3px);
    box-shadow: 0 0 18px rgba(255, 231, 206, 0.6);
    animation: petal-fall 22s linear infinite;
}

/* Soft variation in size, position and speed for a natural feel */
.pg-particle:nth-child(1)  { left: 8%;   animation-duration: 26s; animation-delay: 0s;   transform-origin: 10% -10%; }
.pg-particle:nth-child(2)  { left: 22%;  animation-duration: 24s; animation-delay: -5s;  transform-origin: -20% -20%; }
.pg-particle:nth-child(3)  { left: 35%;  animation-duration: 28s; animation-delay: -10s; transform-origin: 30% -30%; }
.pg-particle:nth-child(4)  { left: 48%;  animation-duration: 23s; animation-delay: -15s; transform-origin: -10% -40%; }
.pg-particle:nth-child(5)  { left: 60%;  animation-duration: 27s; animation-delay: -8s;  transform-origin: 40% -20%; }
.pg-particle:nth-child(6)  { left: 72%;  animation-duration: 25s; animation-delay: -18s; transform-origin: -30% -10%; }
.pg-particle:nth-child(7)  { left: 84%;  animation-duration: 29s; animation-delay: -12s; transform-origin: 20% -30%; }
.pg-particle:nth-child(8)  { left: 16%;  animation-duration: 30s; animation-delay: -20s; transform-origin: -25% -25%; }
.pg-particle:nth-child(9)  { left: 42%;  animation-duration: 24s; animation-delay: -3s;  transform-origin: 15% -35%; }
.pg-particle:nth-child(10) { left: 66%;  animation-duration: 28s; animation-delay: -6s;  transform-origin: -15% -15%; }
.pg-particle:nth-child(11) { left: 78%;  animation-duration: 26s; animation-delay: -14s; transform-origin: 25% -25%; }
.pg-particle:nth-child(12) { left: 90%;  animation-duration: 32s; animation-delay: -9s;  transform-origin: -20% -30%; }

@keyframes petal-fall {
    0% {
        transform: translate3d(0, -10%, 0) rotateZ(0deg) rotateY(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translate3d(20px, 55vh, 0) rotateZ(120deg) rotateY(45deg);
        opacity: 0.9;
    }
    100% {
        transform: translate3d(-10px, 110vh, 0) rotateZ(260deg) rotateY(80deg);
        opacity: 0;
    }
}

/* Password Gate – Glassmorphism card, glow, heart, input & button */
.password-gate-card {
    background: rgba(255, 252, 248, 0.25);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 25px 50px -12px rgba(44, 0, 0, 0.35),
        0 0 60px -8px rgba(212, 175, 55, 0.25),
        0 0 100px -20px rgba(248, 215, 218, 0.2);
    transition: box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.password-gate-card:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 30px 60px -12px rgba(44, 0, 0, 0.4),
        0 0 80px -8px rgba(212, 175, 55, 0.35),
        0 0 120px -20px rgba(248, 215, 218, 0.25);
}

/* Card title & subtitle – strong contrast on glass */
#passwordGate .password-gate-title {
    color: #2c0000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
}

#passwordGate .password-gate-subtitle {
    color: #3d1212;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Gold / metallic heart icon */
#passwordGate .heart-gold {
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(145deg, #f8e8c8 0%, #d4af37 25%, #b8960c 50%, #c9a227 75%, #e8d5a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 6px rgba(212, 175, 55, 0.4));
    transition: filter 0.35s ease, transform 0.35s ease;
}

#passwordGate .heart-gold:hover {
    background: linear-gradient(180deg, #ff6b35 0%, #ff4500 25%, #ff8c00 45%, #ffd700 70%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: heart-on-fire 1s ease-in-out infinite;
}

@keyframes heart-on-fire {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.9)) drop-shadow(0 0 20px rgba(255, 69, 0, 0.7)) drop-shadow(0 0 30px rgba(255, 140, 0, 0.5));
        transform: scale(1.05);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 200, 50, 1)) drop-shadow(0 0 28px rgba(255, 107, 53, 0.9)) drop-shadow(0 0 40px rgba(255, 69, 0, 0.6));
        transform: scale(1.08);
    }
}

/* Input – smooth transitions */
#passwordGate .password-gate-input {
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

#passwordGate .password-gate-input:hover {
    border-color: #b8960c;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    background-color: rgba(255, 255, 255, 0.5);
}

#passwordGate .password-gate-input:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
    background-color: rgba(255, 255, 255, 0.6);
}

/* Button – gradient gold border, tactile hover */
#passwordGate .password-gate-btn {
    position: relative;
    transition: color 0.4s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 14px rgba(90, 24, 24, 0.3);
}

#passwordGate .password-gate-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #e8d5a3, #d4af37, #b8960c, #d4af37);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.4s ease-in-out;
}

#passwordGate .password-gate-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4), 0 0 20px rgba(212, 175, 55, 0.2);
}

#passwordGate .password-gate-btn:hover::before {
    opacity: 1;
}

#passwordGate .password-gate-btn:active {
    transform: scale(0.98);
    transition-duration: 0.15s;
}

/* ==================== ANIMATIONS ==================== */

/* Floating Hearts */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-20px) rotate(5deg); opacity: 0.8; }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

.floating-delayed {
    animation: float 6s ease-in-out infinite 2s;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Pulse Gold */
@keyframes pulse-gold {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
        transform: scale(1.05);
    }
}

.pulse-gold {
    animation: pulse-gold 2s ease-in-out infinite;
}

/* ==================== GLOBAL PRELOADER ==================== */
#preloader {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
}

.preloader-heart {
    font-size: 4rem;
    color: #D4AF37;
    animation: preloader-pulse 1.4s ease-in-out infinite;
}

.preloader-text {
    margin-top: 1rem;
    font-size: 1rem;
    color: #5A1818;
}

@keyframes preloader-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Floating particles (base – overridden in hero for slower, subtler motion) */
.particle {
    position: absolute;
    opacity: 0.35;
    animation: float-particle 24s ease-in-out infinite;
    pointer-events: none;
}

/* Fade In */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
}

/* Typewriter Effect */
@keyframes blink {
    50% { opacity: 0; }
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #5A1818;
    margin-left: 3px;
    animation: blink 1s step-end infinite;
}

/* ==================== FLIP CARDS ==================== */
.flip-card {
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.5s ease-out, z-index 0s;
}

.flip-card:hover {
    transform: scale(1.15);
    z-index: 50;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    will-change: transform, opacity;
    /* Additional fix for Windows rendering glitches */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    /* Hardware acceleration for smooth flips on all platforms */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ==================== CARD BACK DECOR ==================== */
.card-back-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.card-back-inner p {
    font-size: 1.35rem; /* a bit larger than text-xl */
    line-height: 1.7;
    text-align: center;
}

.card-back-icon {
    font-size: 2.5rem;
    color: #D4AF37;
    opacity: 0.85;
}

.card-back-divider {
    width: 4rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.8), rgba(212, 175, 55, 0));
}

/* ==================== IMAGE CAROUSEL ==================== */
.image-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-carousel img.active {
    opacity: 1;
}

/* Hover state - reveal full image with animated gradient background */
.flip-card:hover .image-carousel {
    background: linear-gradient(135deg, #FDFBF7 0%, #F8E8E8 25%, #FAE5E5 50%, #F8E8E8 75%, #FDFBF7 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

.flip-card:hover .image-carousel img {
    object-fit: contain;
}

/* Mobile touch support */
.flip-card.touch-expanded {
    transform: scale(1.15);
    z-index: 50;
}

.flip-card.touch-expanded .image-carousel {
    background: linear-gradient(135deg, #FDFBF7 0%, #F8E8E8 25%, #FAE5E5 50%, #F8E8E8 75%, #FDFBF7 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

.flip-card.touch-expanded .image-carousel img {
    object-fit: contain;
}

/* Subtle gradient animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 768px) {
    .flip-card:hover {
        transform: scale(1.1);
    }
    
    .flip-card.touch-expanded {
        transform: scale(1.1);
    }
}

/* ==================== ENVELOPE ANIMATION ==================== */
.envelope {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.envelope:hover {
    transform: scale(1.05);
}

.envelope-flap {
    transition: transform 0.6s ease;
    transform-origin: top;
}

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

/* ==================== BODY SCROLL LOCK ==================== */
.body-scroll-lock {
    overflow: hidden !important;
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
}

/* ==================== MODAL STYLES ==================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: scale(1);
}

/* Letter modal – paper cream, analog typography */
#letterModal .modal-content.letter-modal-paper {
    background: #FDFBF7;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
}

#letterModal .letter-body-text {
    font-family: 'Playfair Display', serif;
    line-height: 2;
    color: #3E2723;
}

/* Modal scroll areas: scrollable, no visible scrollbar (invisible scrollbar keeps native scroll) */
.modal-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Invisible but present so browser still enables wheel/touch scroll (Chrome, Safari) */
.modal-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.modal-scroll::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

/* ==================== WINDING TIMELINE PATH ==================== */
.timeline-path {
    position: relative;
}

.timeline-event {
    position: relative;
    margin-bottom: 8rem;
}

/* Alternating left-right layout */
.timeline-event:nth-child(odd) {
    padding-left: 0;
    padding-right: 50%;
    text-align: right;
}

.timeline-event:nth-child(even) {
    padding-left: 50%;
    padding-right: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .timeline-event:nth-child(odd),
    .timeline-event:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
}

/* Curved connecting line */
.timeline-connector {
    position: absolute;
    left: 50%;
    top: 150px;
    width: 2px;
    height: calc(100% - 150px);
    background: linear-gradient(180deg, #D4AF37, #5A1818, #D4AF37);
    transform: translateX(-50%);
}

/* Chapter markers */
.chapter-marker {
    position: relative;
    z-index: 10;
    background: #FDFBF7;
    display: inline-block;
    padding: 1rem 2rem;
}

/* ==================== MUSIC CONTROLS ==================== */
.music-control {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(90, 24, 24, 0.9);
    backdrop-filter: blur(10px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    will-change: transform, opacity;
}

.music-control:hover {
    background: rgba(212, 175, 55, 0.9);
    transform: scale(1.1);
}

.music-control.playing {
    animation: pulse-music 2s ease-in-out infinite;
}

@keyframes pulse-music {
    0%, 100% { box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(212, 175, 55, 0.6); }
}

/* ==================== QUIZ STYLES ==================== */
.quiz-option {
    transition: all 0.3s ease;
    cursor: pointer;
}

.quiz-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(90, 24, 24, 0.2);
}

.quiz-option.correct {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.quiz-option.wrong {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ==================== COUPON CARDS ==================== */
.coupon-card {
    perspective: 1000px;
    cursor: pointer;
    min-height: 250px;
}

.coupon-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* "opacity" removed from will-change — it creates a stacking context
       that collapses preserve-3d in Chrome */
    will-change: transform;
}

.coupon-card.unlocked .coupon-card-inner {
    transform: rotateY(180deg);
}

.coupon-front, .coupon-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /*
     * CRITICAL Chrome fix: backdrop-filter forces a new stacking context
     * which flattens the parent preserve-3d scene in Blink/Chromium.
     * We replicate the glass look with solid semi-transparent backgrounds
     * and a box-shadow instead of the blur — no backdrop-filter on faces.
     */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.coupon-front {
    background: rgba(90, 24, 24, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 32px rgba(90, 24, 24, 0.15);
}

.coupon-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(90, 24, 24, 0.1);
}

.coupon-card.redeemed {
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* ==================== VOICE NOTE PLAYER ==================== */
.voice-note-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.voice-note-btn:hover {
    background: rgba(90, 24, 24, 0.9);
    transform: scale(1.1);
}

.voice-note-btn.playing {
    animation: pulse-voice 1s ease-in-out infinite;
}

@keyframes pulse-voice {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ==================== COUNTDOWN TIMER ==================== */
.countdown-box {
    min-width: 100px;
    padding: 1.5rem;
    text-align: center;
}

.countdown-number {
    font-size: 3rem;
    font-weight: bold;
    color: #5A1818;
    font-family: 'Playfair Display', serif;
}

.countdown-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #D4AF37;
    margin-top: 0.5rem;
}

/* ==================== IMAGE TREATMENT ==================== */
.timeline-image, .memory-image {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
}

.timeline-image img, .memory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(1.05) contrast(0.95);
    transition: filter 0.5s ease;
    will-change: transform, opacity;
}

.timeline-image:hover img, .memory-image:hover img {
    filter: saturate(1.1) brightness(1.1);
}

/* Optional: Black & white to color on hover */
.bw-to-color img {
    filter: grayscale(1) sepia(0.2);
}

.bw-to-color:hover img {
    filter: grayscale(0) sepia(0);
}

/* ==================== PARALLAX SECTIONS ==================== */
.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: -1;
}

/* ==================== HERO SECTION – GRADIENT ORBS & PARTICLES ==================== */
.hero-section {
    background: #FDFBF9;
    /* Override Tailwind's min-h-screen (100vh). On iOS Safari, 100vh is
       calculated with the browser chrome hidden (tall viewport), so flex-
       centering pushes the h1 above the visible fold on first load.
       100dvh tracks the *actual* visible height at all times. */
    min-height: 100vh;   /* fallback for browsers without dvh support */
    min-height: 100dvh;
    /* Honour device safe-area (notch / Dynamic Island) */
    padding-top: env(safe-area-inset-top, 0px);
}

/* On mobile, vertically centering inside a flex container that is taller than
   the viewport still clips the top. Align content from the top instead and
   add enough padding so the heading breathes away from the status bar. */
@media (max-width: 768px) {
    .hero-section {
        align-items: flex-start;
        /* At minimum 2.5 rem gap; more on notched phones where safe-area is bigger */
        padding-top: max(env(safe-area-inset-top, 0px), 2.5rem);
    }
}

.hero-orbs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-orb {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    max-width: 800px;
    max-height: 800px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: hero-orb-drift 28s ease-in-out infinite;
}

.hero-orb--rose {
    background: #E6B8B8;
    top: -25%;
    left: -15%;
    animation-delay: 0s;
}

.hero-orb--gold {
    background: #F5E6CA;
    bottom: -25%;
    right: -15%;
    animation-delay: -14s;
}

@keyframes hero-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(4%, 3%) scale(1.05); }
    66% { transform: translate(-3%, -2%) scale(0.98); }
}

/* Hero typography */
#hero .hero-tagline {
    color: #B48E43;
    text-shadow: 0 2px 10px rgba(180, 142, 67, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

#hero .hero-signature {
    font-family: 'Great Vibes', cursive;
    font-size: 2.6rem;
}

@media (min-width: 768px) {
    #hero .hero-signature {
        font-size: 3.45rem;
    }
}

#hero .hero-infinity {
    font-size: 3.5rem;
    font-weight: 300;
    color: #D4AF37;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
}

@media (min-width: 768px) {
    #hero .hero-infinity {
        font-size: 4.5rem;
    }
}

/* Hero floating particles – slower and more subtle */
.hero-particles .particle {
    opacity: 0.35;
    animation: float-particle 24s ease-in-out infinite;
}

.hero-particles .particle:nth-child(odd) {
    animation-duration: 26s;
}

.hero-particles .particle:nth-child(even) {
    animation-duration: 22s;
}

@keyframes float-particle {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.2;
    }
    25% {
        transform: translate(40px, -40px) rotate(90deg);
        opacity: 0.4;
    }
    50% {
        transform: translate(0, -80px) rotate(180deg);
        opacity: 0.25;
    }
    75% {
        transform: translate(-40px, -40px) rotate(270deg);
        opacity: 0.4;
    }
}

/* ==================== LOADING STATES ==================== */
.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.8);
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    .countdown-number {
        font-size: 2rem;
    }
    
    .countdown-box {
        min-width: 70px;
        padding: 1rem;
    }
    
    .music-control {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
    }
}

/* ==================== TOGETHER COUNTER ==================== */
.counter-box {
    min-width: 115px;
    padding: 1.75rem 1.25rem;
    text-align: center;
}

.counter-number {
    font-size: 3.75rem;
    font-weight: 900;
    color: #5A1818;
    font-family: 'Playfair Display', serif;
    line-height: 1;
    letter-spacing: -0.02em;
}

.counter-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #D4AF37;
    margin-top: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.counter-separator {
    font-size: 3rem;
    color: #D4AF37;
    font-weight: 300;
    opacity: 0.55;
    line-height: 1;
    padding-bottom: 1.5rem; /* align with number baseline */
    align-self: center;
}

/* Heartbeat tick on the seconds digit */
@keyframes heartbeat-sec {
    0%, 100% { transform: scale(1); }
    8%        { transform: scale(1.06); }
    18%       { transform: scale(1); }
}

.counter-seconds-pulse {
    display: inline-block;
    animation: heartbeat-sec 1s ease-in-out infinite;
}

@media (max-width: 768px) {
    .counter-number {
        font-size: 2.6rem;
    }
    .counter-box {
        min-width: 78px;
        padding: 1.25rem 0.75rem;
    }
    .counter-separator {
        font-size: 2.2rem;
        padding-bottom: 1.25rem;
    }
}

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

/* Category tab pills */
.randomizer-tab-btn {
    padding: 0.65rem 1.4rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid rgba(90, 24, 24, 0.2);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #5A1818;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.randomizer-tab-btn:hover {
    border-color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.2);
}

.randomizer-tab-btn.active {
    background: #5A1818;
    color: white;
    border-color: #5A1818;
    box-shadow: 0 8px 24px rgba(90, 24, 24, 0.3);
}

.randomizer-tab-locked {
    border-color: rgba(212, 175, 55, 0.45);
}

/* Ensure the randomizer section can host the lock overlay */
#randomizer {
    position: relative;
}

/* ── Randomizer proposal lock overlay ─────────────────────────────────── */
.rand-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 251, 247, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 1.5rem;
    pointer-events: auto;
}

.rand-lock-inner {
    text-align: center;
    padding: 2rem;
}

.rand-lock-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #5A1818;
    margin-bottom: 0.5rem;
}

.rand-lock-hint {
    font-size: 1rem;
    color: #6b7280;
    font-style: italic;
}

/* Individual field cards (date multi-spin) */
.randomizer-field-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.randomizer-field-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(90, 24, 24, 0.12);
}

/* Slot text */
.randomizer-slot {
    display: block;
    min-height: 1.6rem;
    transition: color 0.12s ease;
    word-break: break-word;
}

.randomizer-slot-spinning {
    opacity: 0.55;
    filter: blur(0.5px);
    color: #D4AF37 !important;
}

@keyframes slot-land {
    0%   { transform: scale(1.18); }
    60%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.randomizer-slot-landed {
    animation: slot-land 0.45s ease forwards;
}

/* Spin button shine sweep */
.randomizer-spin-btn {
    position: relative;
    overflow: hidden;
}

.randomizer-spin-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.55s ease;
    pointer-events: none;
}

.randomizer-spin-btn:hover::after {
    left: 160%;
}

/* ==================== GALLERY SLIDER ==================== */
.gallery-slider-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(90, 24, 24, 0.18);
}

.gallery-slides {
    position: relative;
    width: 100%;
    height: 65vh;
    min-height: 380px;
    max-height: 700px;
    background: #1a0808;
    overflow: hidden;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    cursor: zoom-in;
}

.gallery-slide.active {
    opacity: 1;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.93) saturate(0.95);
    transition: transform 6s ease, filter 0.5s ease;
    will-change: transform;
}

.gallery-slide.active img {
    animation: gallery-ken-burns 8s ease-in-out forwards;
}

@keyframes gallery-ken-burns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.06) translate(-1%, -0.5%); }
}

/* Navigation arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(90, 24, 24, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    border: 2px solid rgba(212, 175, 55, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 1rem;
}

.gallery-arrow:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.gallery-arrow--prev { left: 1rem; }
.gallery-arrow--next { right: 1rem; }

/* Caption & counter bar */
.gallery-caption-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    background: rgba(26, 8, 8, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.gallery-caption {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: rgba(248, 232, 232, 0.9);
    font-size: 1rem;
    line-height: 1.5;
    flex: 1;
    margin: 0;
    padding: 0;
    min-height: 1.5rem;
}

.gallery-counter {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #D4AF37;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 1rem;
    opacity: 0.85;
}

/* Dot indicators */
.gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    background: rgba(26, 8, 8, 0.7);
    flex-wrap: wrap;
}

.gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0;
    flex-shrink: 0;
}

.gallery-dot.active {
    background: #D4AF37;
    transform: scale(1.4);
}

.gallery-dot:hover {
    background: rgba(212, 175, 55, 0.65);
}

/* Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 2, 2, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    opacity: 1;
}

.gallery-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.gallery-lightbox-close:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    transform: rotate(90deg);
}

.gallery-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.gallery-lightbox-arrow:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox-arrow--prev { left: 1.25rem; }
.gallery-lightbox-arrow--next { right: 1.25rem; }

.gallery-lightbox-img-wrapper {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.gallery-lightbox-img-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-lightbox-caption {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.05rem;
    margin-top: 1.25rem;
    text-align: center;
    max-width: 620px;
    padding: 0 1.5rem;
    line-height: 1.6;
    min-height: 1.6rem;
}

@media (max-width: 768px) {
    .gallery-slides {
        height: 56vw;
        min-height: 260px;
    }

    .gallery-arrow {
        width: 40px;
        height: 40px;
        font-size: 0.8rem;
    }

    .gallery-arrow--prev { left: 0.5rem; }
    .gallery-arrow--next { right: 0.5rem; }

    .gallery-caption {
        font-size: 0.875rem;
    }

    .gallery-lightbox-arrow--prev { left: 0.5rem; }
    .gallery-lightbox-arrow--next { right: 0.5rem; }
}

/* ==================== UTILITY CLASSES ==================== */
.text-gold {
    color: #D4AF37;
}

.text-burgundy {
    color: #5A1818;
}

.bg-gold {
    background-color: #D4AF37;
}

.bg-burgundy {
    background-color: #5A1818;
}

.border-gold {
    border-color: #D4AF37;
}

.border-burgundy {
    border-color: #5A1818;
}