/* ================================================================
   modern.css — Modern, glossy enhancements
   ================================================================
   Adds:
   - Modern sticky header (replaces the side-photos + name banner)
   - Glassmorphism nav bar with blur
   - Glossy gradient backdrops on cards
   - Smoother micro-interactions
   - Premium "shimmer" sweeps on key buttons
   - Modern hero rework
   ================================================================ */

/* ============================================================
   MODERN STICKY HEADER — replaces the cinematic top bar
   (the one with groom/bride photos + "SUSOVON weds SUDIPTA"
   has been removed; we now use a slim modern bar)
   ============================================================ */
.sticky-header {
    padding: 0 !important;
    background:
        linear-gradient(180deg, rgba(20, 5, 12, 0.92) 0%, rgba(20, 5, 12, 0.78) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(240, 201, 110, 0.25) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.sticky-header.scrolled {
    background: linear-gradient(180deg, rgba(20, 5, 12, 0.98) 0%, rgba(20, 5, 12, 0.92) 100%) !important;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(240, 201, 110, 0.4) !important;
}

/* Remove the old cinematic top bar (groom/bride photos + big names) */
.header-top.cinematic-bg {
    display: none !important;
}

/* Replace with a slim modern brand bar */
.modern-brand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 18px 8px;
    position: relative;
    z-index: 2;
}

.modern-brand-bar .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff8e7 0%, #f0c96e 40%, #c9943a 80%);
    box-shadow:
        0 0 0 2px rgba(255, 248, 231, 0.5),
        0 0 0 3px rgba(168, 22, 42, 0.6),
        0 0 16px rgba(240, 201, 110, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a0e1f;
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    animation: brandPulse 3s ease-in-out infinite;
}

@keyframes brandPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 248, 231, 0.5), 0 0 0 3px rgba(168, 22, 42, 0.6), 0 0 16px rgba(240, 201, 110, 0.6); }
    50%      { box-shadow: 0 0 0 2px rgba(255, 248, 231, 0.7), 0 0 0 3px rgba(168, 22, 42, 0.8), 0 0 28px rgba(240, 201, 110, 0.95); }
}

.modern-brand-bar .brand-text {
    text-align: center;
    line-height: 1.1;
}

.modern-brand-bar .brand-monogram {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: clamp(1rem, 3.2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #f0c96e;
    text-shadow: 0 0 12px rgba(240, 201, 110, 0.6);
}

.modern-brand-bar .brand-monogram .amp {
    color: #fff8e7;
    margin: 0 6px;
    font-size: 0.7em;
    font-style: italic;
    opacity: 0.8;
}

.modern-brand-bar .brand-date {
    margin-top: 2px;
    font-size: clamp(0.6rem, 2.5vw, 0.75rem);
    letter-spacing: 0.3em;
    color: rgba(255, 248, 231, 0.7);
    text-transform: uppercase;
}

/* ============================================================
   NAVIGATION — glassy pill style
   ============================================================ */
.nav-bar {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px 10px !important;
    background: transparent !important;
    border-top: none !important;
}

.nav-link {
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: clamp(0.7rem, 2.6vw, 0.85rem) !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 248, 231, 0.85) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(240, 201, 110, 0.18) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
    font-weight: 600;
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(240, 201, 110, 0.15) !important;
    color: #fff8e7 !important;
    border-color: rgba(240, 201, 110, 0.5) !important;
    transform: translateY(-2px);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--color-crimson, #a8162a), #6b0e1c) !important;
    color: #fff8e7 !important;
    border-color: var(--color-gold-light, #f0c96e) !important;
    box-shadow: 0 4px 14px rgba(168, 22, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ============================================================
   HERO VIDEO SECTION — modern framing
   ============================================================ */
.hero-video-section {
    padding: 0 12px 12px !important;
    background: transparent !important;
}

.video-wrapper {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 2px rgba(240, 201, 110, 0.35),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(168, 22, 42, 0.15) !important;
    margin: 0 auto;
    max-width: 1200px;
}

.video-overlay {
    background: linear-gradient(180deg,
        rgba(20, 5, 12, 0.0) 0%,
        rgba(20, 5, 12, 0.0) 55%,
        rgba(20, 5, 12, 0.75) 100%) !important;
}

/* ============================================================
   COUNTDOWN — glossy tiles
   ============================================================ */
.countdown-tile {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 231, 0.92)) !important;
    border-radius: 18px !important;
    box-shadow:
        0 10px 30px rgba(168, 22, 42, 0.18),
        0 0 0 2px rgba(240, 201, 110, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    position: relative;
    overflow: hidden;
}

.countdown-tile::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: tileShimmer 4s ease-in-out infinite 1.5s;
    pointer-events: none;
}

@keyframes tileShimmer {
    0%, 100% { left: -100%; }
    50%      { left: 200%; }
}

.tile-num {
    background: linear-gradient(135deg, var(--color-crimson, #a8162a) 0%, #6b0e1c 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 700 !important;
}

/* ============================================================
   SECTION TITLES — premium gold gradient text
   ============================================================ */
.section-title,
.fancy-title {
    background: linear-gradient(135deg, #6b0e1c 0%, #c9943a 50%, #f0c96e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(168, 22, 42, 0.15));
}

/* ============================================================
   CARDS — glassy modern look
   ============================================================ */
.event-card,
.venue-card,
.download-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 22px !important;
    box-shadow:
        0 0 0 1px rgba(240, 201, 110, 0.25),
        0 12px 40px rgba(20, 5, 12, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: transform 0.4s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.4s ease !important;
    position: relative;
    overflow: hidden;
}

.event-card::before,
.venue-card::before,
.download-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-crimson, #a8162a), var(--color-gold, #c9943a), var(--color-crimson, #a8162a));
    background-size: 200% 100%;
    animation: shimmerLine 3s linear infinite;
}

.event-card:hover,
.venue-card:hover,
.download-btn:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 0 0 1px rgba(240, 201, 110, 0.5),
        0 20px 50px rgba(20, 5, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ============================================================
   PRIMARY BUTTONS — glossy pill with shimmer sweep
   ============================================================ */
.magnetic-btn,
.rsvp-submit-btn,
.blinking-invite-btn,
.directions-btn,
.tap-for-hearts-btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--color-crimson, #a8162a) 0%, #6b0e1c 100%) !important;
    color: #fff8e7 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    box-shadow:
        0 0 0 1px rgba(240, 201, 110, 0.4),
        0 8px 24px rgba(168, 22, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.4s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.3s ease,
                filter 0.3s ease !important;
}

.magnetic-btn::after,
.rsvp-submit-btn::after,
.blinking-invite-btn::after,
.directions-btn::after,
.tap-for-hearts-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 248, 231, 0.55), transparent);
    transform: skewX(-20deg);
    animation: btnShimmerSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btnShimmerSweep {
    0%, 100% { left: -120%; }
    50%      { left: 220%; }
}

.magnetic-btn:hover,
.rsvp-submit-btn:hover,
.blinking-invite-btn:hover,
.directions-btn:hover,
.tap-for-hearts-btn:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px rgba(240, 201, 110, 0.7),
        0 12px 32px rgba(168, 22, 42, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ============================================================
   SCRATCH LOVE SECTION — statement band (V2, sits above video)
   ============================================================ */
.scratch-love-title {
    font-size: clamp(1.6rem, 6vw, 2.6rem) !important;
    background: linear-gradient(135deg, #6b0e1c 0%, #a8162a 45%, #c9943a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(168, 22, 42, 0.18));
}

.scratch-love-eyebrow {
    letter-spacing: 0.5em !important;
}

.scratch-reveal-all-btn:hover {
    background: var(--color-crimson, #a8162a);
    color: #fff8e7;
    box-shadow: 0 8px 24px rgba(168, 22, 42, 0.35);
}

/* ============================================================
   SECTION DIVIDERS — modern gold filigree
   ============================================================ */
.section-divider {
    margin: 8px auto 18px !important;
    position: relative;
}

.divider-icon {
    background: linear-gradient(135deg, var(--color-gold, #c9943a), var(--color-gold-light, #f0c96e));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(240, 201, 110, 0.5));
}

/* ============================================================
   GALLERY FRAMES — modern hover lift
   ============================================================ */
.gallery-frame {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.5s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.5s ease !important;
    border: 2px solid rgba(240, 201, 110, 0.2) !important;
}

.gallery-frame:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(240, 201, 110, 0.6) !important;
}

/* ============================================================
   FOOTER — modern dark glossy finish
   ============================================================ */
.site-footer {
    background:
        linear-gradient(180deg, rgba(20, 5, 12, 0.95) 0%, rgba(20, 5, 12, 1) 100%) !important;
    color: #fff8e7 !important;
    padding: 56px 18px 36px !important;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #c9943a), transparent);
}

.site-footer::after {
    content: '';
    position: absolute;
    bottom: -100px; left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200px;
    background: radial-gradient(ellipse, rgba(240, 201, 110, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.footer-names,
.footer-tagline,
.footer-copy,
.share-title {
    color: rgba(255, 248, 231, 0.9) !important;
    position: relative;
    z-index: 1;
}

.footer-names {
    background: linear-gradient(135deg, #fff8e7, #f0c96e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
}

.share-btn {
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 0.3s ease !important;
}

.share-btn:hover {
    transform: translateY(-4px) scale(1.08);
}

/* ============================================================
   PRELOADER — premium look
   ============================================================ */
.preloader {
    background:
        radial-gradient(ellipse at center, #2c0a1e 0%, #120309 70%, #000 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.preloader-text {
    background: linear-gradient(135deg, #fff8e7, #f0c96e);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   SCROLL-TO-TOP / MUSIC TOGGLE — modern pill buttons
   ============================================================ */
.scroll-top-btn,
.music-toggle-btn {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(168, 22, 42, 0.9), rgba(107, 14, 28, 0.9)) !important;
    border: 1px solid rgba(240, 201, 110, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.scroll-top-btn:hover,
.music-toggle-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 0 0 2px rgba(240, 201, 110, 0.5), 0 8px 30px rgba(168, 22, 42, 0.5) !important;
}

/* ============================================================
   POETIC TYPING SECTION — modern dark glossy band
   ============================================================ */
.poetic-para-section {
    background:
        radial-gradient(ellipse at center, rgba(168, 22, 42, 0.15) 0%, transparent 70%),
        linear-gradient(135deg, #1a0a14 0%, #2c0a1e 50%, #0d1a30 100%) !important;
    position: relative;
    border-top: 1px solid rgba(240, 201, 110, 0.25);
    border-bottom: 1px solid rgba(240, 201, 110, 0.25);
}

/* ============================================================
   RESPONSIVE — keep nav readable on small screens
   ============================================================ */
@media (max-width: 600px) {
    .modern-brand-bar {
        gap: 12px;
        padding: 10px 14px 6px;
    }
    .nav-bar {
        padding: 4px 6px 8px !important;
        gap: 4px !important;
    }
    .nav-link {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .modern-brand-bar .brand-mark,
    .countdown-tile::before,
    .magnetic-btn::after,
    .rsvp-submit-btn::after,
    .blinking-invite-btn::after,
    .directions-btn::after,
    .tap-for-hearts-btn::after {
        animation: none !important;
    }
}