/* ================================================================
   style.css — Susovon Weds Sudipta Wedding Website
   MODERNIZED EDITION v2 — Full Animation Suite + New Features
   ================================================================
   SECTION INDEX:
   01. CSS Custom Properties (Variables + Animation Tokens)
   02. Reset & Base
   03. Scroll Progress Bar (NEW)
   04. Background Rain Canvas
   05. Cursor Sparkle Canvas (NEW)
   06. Preloader (Enhanced with hearts)
   07. Sticky Header — Cinematic Top Bar
   08. Sticky Header — Photo Frames
   09. Sticky Header — Title Block
   10. Navigation Bar
   11. Sacred Intro Banner
   12. Hero Video Section + Scroll Indicator (NEW)
   13. Custom Video Controls
   14. Countdown Section + Tap-for-Hearts (NEW)
   15. Gallery / Scroller
   16. Lightbox (Enhanced with nav + counter)
   17. Schedule Section + 3D Tilt Cards (NEW)
   18. Invitation Section
   19. Poetic Paragraph Section
   20. RSVP Section (NEW)
   21. Downloads Section
   22. Location / Map Section
   23. Footer + Share Buttons (NEW)
   24. Scroll-to-Top Button
   25. Music Toggle Button (NEW)
   26. Confetti Canvas (NEW)
   27. Section Dividers & Shared Utilities
   28. Responsive — Tablet (≥600px)
   29. Responsive — Desktop (≥1024px)
   30. Responsive — Landscape Mobile Fix
   31. CARD & TILE ANIMATIONS (Scroll-Reveal)
   32. CARD CONTENT ELEMENT ANIMATIONS
   33. HOVER FOCUS ANIMATIONS
   34. GLOBAL SCROLL-REVEAL SYSTEM
   35. FLOATING PETALS & AMBIENT PARTICLES
   36. SHIMMER & GLASS EFFECTS
   37. MAGNETIC BUTTON SYSTEM
   38. 3D TILT CARD SYSTEM (NEW)
   39. PARALLAX DEPTH LAYERS
   40. @KEYFRAME LIBRARY
   ================================================================ */


/* ================================================================
   SECTION 01 — CSS CUSTOM PROPERTIES
================================================================ */
:root {
    /* Brand Colors */
    --color-bg:          #fdf8f0;
    --color-header-from: #d38794;
    --color-header-mid:  #68345c;
    --color-header-to:   #346083;
    --color-gold:        #c9943a;
    --color-gold-light:  #f0c96e;
    --color-crimson:     #a8162a;
    --color-text:        #2c1a14;
    --color-text-muted:  #6b5a52;
    --color-white:       #ffffff;
    --color-card-bg:     rgba(255, 255, 255, 0.92);
    --color-overlay:     rgba(20, 5, 12, 0.45);
    --color-success:     #27ae60;
    --color-whatsapp:    #25D366;
    --color-facebook:    #1877F2;

    /* Typography */
    --font-display:  'Cinzel', 'Georgia', serif;
    --font-body:     'Cormorant Garamond', 'Georgia', serif;
    --font-bengali:  'Kalpurush', 'Arial Unicode MS', sans-serif;

    /* Spacing */
    --gap-sm:  12px;
    --gap-md:  24px;
    --gap-lg:  48px;

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   28px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-soft:   0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-card:   0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-gold:   0 0 0 3px var(--color-gold), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-glow:   0 0 30px rgba(201, 148, 58, 0.4), 0 0 60px rgba(201, 148, 58, 0.15);
    --shadow-crimson: 0 8px 32px rgba(168, 22, 42, 0.25);

    /* Transitions */
    --transition:       0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow:  0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Animation Easing Tokens */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-sharp:     cubic-bezier(0.76, 0, 0.24, 1);

    /* Glassmorphism */
    --glass-bg:      rgba(255, 255, 255, 0.12);
    --glass-border:  rgba(255, 255, 255, 0.25);
    --glass-blur:    16px;

    /* Shimmer */
    --shimmer-color: rgba(255, 255, 255, 0.35);
}


/* ================================================================
   SECTION 02 — RESET & BASE STYLES
================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(rgba(201, 148, 58, 0.12) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    color: var(--color-text);
    text-align: center;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    isolation: isolate;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    max-width: 100%;
}

section {
    padding: 48px 18px;
    position: relative;
    scroll-margin-top: 70px;
}

a       { text-decoration: none; color: inherit; }
button  { cursor: pointer; border: none; background: none; }

/* Typography — section titles */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    color: var(--color-text);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.section-title.fancy-title {
    background: linear-gradient(135deg, var(--color-crimson), var(--color-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--gap-md);
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4.5vw, 2.4rem);
    color: var(--color-text);
}

/* Animated underline on h2 — smooth expand */
h2::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-gold), var(--color-crimson));
    background-size: 200% 100%;
    transition: width 0.5s var(--ease-smooth);
    margin: 8px auto 0;
    border-radius: var(--radius-full);
    animation: shimmerLine 3s linear infinite;
}
h2:hover::after { width: 80%; }

@keyframes shimmerLine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Section backgrounds */
.gallery-section    { background: rgba(255, 255, 255, 0.80) !important; }
.location-section   { background: rgba(255, 255, 255, 0.80) !important; }
.countdown-section  { background: linear-gradient(160deg, rgba(255, 245, 230, 0.82) 0%, rgba(253, 248, 240, 0.82) 100%) !important; }
.schedule-section   { background: rgba(253, 248, 240, 0.82) !important; }
.downloads-section  { background: rgba(253, 248, 240, 0.82) !important; }
.invitation-section { background: linear-gradient(160deg, rgba(255, 249, 245, 0.82) 0%, rgba(253, 245, 238, 0.82) 100%) !important; }
.rsvp-section       { background: linear-gradient(160deg, rgba(253, 248, 240, 0.90) 0%, rgba(255, 245, 230, 0.90) 100%) !important; }


/* ================================================================
   SECTION 03 — SCROLL PROGRESS BAR (NEW)
   Thin gradient bar at the top of the page showing scroll progress
================================================================ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-gold), var(--color-crimson));
    z-index: 9999999;
    transition: width 0.15s linear;
    box-shadow: 0 0 8px rgba(201, 148, 58, 0.6), 0 2px 4px rgba(168, 22, 42, 0.3);
    pointer-events: none;
}

/* Animated shimmer on the progress bar */
.scroll-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: progressShimmer 2s linear infinite;
}

@keyframes progressShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}


/* ================================================================
   SECTION 04 — BACKGROUND RAIN CANVAS
================================================================ */
#bgRainCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.28;
    will-change: auto;
}


/* ================================================================
   SECTION 05 — CURSOR SPARKLE CANVAS (NEW)
   Desktop-only canvas that renders sparkle particles following cursor
================================================================ */
#cursorSparkleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    pointer-events: none;
    opacity: 0.7;
}

/* Hide sparkle canvas on touch devices */
@media (hover: none) {
    #cursorSparkleCanvas { display: none; }
}


/* ================================================================
   SECTION 06 — PRELOADER (Enhanced with hearts)
================================================================ */
.preloader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1a0a14 0%, #2a1060 50%, #0d1a30 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    transition: opacity 0.8s var(--ease-smooth), visibility 0.8s ease;
}

/* Animated mesh background inside preloader */
.preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 148, 58, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(168, 22, 42, 0.12) 0%, transparent 55%);
    animation: preloaderMesh 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes preloaderMesh {
    from { opacity: 0.6; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.08); }
}

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

.preloader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: preloaderFadeIn 0.5s ease forwards;
}

@keyframes preloaderFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Hearts animation row (NEW) */
.preloader-hearts {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.preloader-heart {
    font-size: 1.6rem;
    display: inline-block;
    animation: heartFloat 1.5s var(--ease-spring) infinite;
}

.preloader-heart.delay-1 { animation-delay: 0.3s; font-size: 1.4rem; }
.preloader-heart.delay-2 { animation-delay: 0.6s; font-size: 1.2rem; }

@keyframes heartFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-8px) scale(1.15); }
}

.preloader-ring-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.preloader-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--color-gold);
    border-right-color: var(--color-gold-light);
    animation: spin 1s linear infinite;
    filter: drop-shadow(0 0 12px rgba(201, 148, 58, 0.6));
}

.preloader-ring.ring2 {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    border-top-color: var(--color-crimson);
    border-right-color: transparent;
    animation-direction: reverse;
    animation-duration: 0.7s;
    filter: drop-shadow(0 0 8px rgba(168, 22, 42, 0.5));
}

.preloader-ring.ring3 {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
    border-width: 2px;
    border-top-color: transparent;
    border-right-color: rgba(201, 148, 58, 0.3);
    border-bottom-color: rgba(168, 22, 42, 0.3);
    animation-duration: 2.5s;
    animation-direction: reverse;
}

.preloader-text {
    font-family: var(--font-display);
    color: var(--color-gold-light);
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    animation: fadePulse 1.5s ease-in-out infinite;
    margin-top: 14px;
    text-shadow: 0 0 20px rgba(240, 201, 110, 0.5);
}

.preloader-subtext {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-style: italic;
    letter-spacing: 0.12em;
    animation: fadePulse 2s ease-in-out infinite 0.5s;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadePulse {
    0%, 100% { opacity: 0.4; transform: scale(0.98); }
    50%       { opacity: 1;   transform: scale(1.02); }
}


/* ================================================================
   SECTION 07 — STICKY HEADER — CINEMATIC TOP BAR
================================================================ */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.3);
    animation: headerSlideDown 0.7s var(--ease-smooth) both;
}

@keyframes headerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.cinematic-bg {
    background: linear-gradient(135deg,
        var(--color-header-from) 0%,
        var(--color-header-mid)  50%,
        var(--color-header-to)   100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px;
    position: relative;
    overflow: hidden;
    /* Animated flowing gradient overlay (NEW) */
    animation: headerGradientFlow 8s ease-in-out infinite alternate;
}

@keyframes headerGradientFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Animated shimmer sweep across header */
.cinematic-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
}

.cinematic-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: headerShimmer 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes headerShimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}


/* ================================================================
   SECTION 08 — STICKY HEADER — PHOTO FRAMES
================================================================ */
.photo-frame {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    padding: 3px;
    background: var(--color-white);
    box-shadow: var(--shadow-gold);
    z-index: 2;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.photo-frame:hover {
    transform: scale(1.15) rotate(3deg);
    box-shadow: 0 0 0 4px var(--color-gold-light), 0 12px 28px rgba(0,0,0,0.4), var(--shadow-glow);
}

.header-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 3px);
    display: block;
    transition: filter 0.4s ease;
}

.photo-frame:hover .header-photo {
    filter: brightness(1.1) saturate(1.2);
}

.photo-label {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes photoPulse {
    from { box-shadow: var(--shadow-gold); }
    to   { box-shadow: 0 0 6px 5px rgba(201, 148, 58, 0.7), 0 10px 22px rgba(0, 0, 0, 0.4); }
}

#groomFrame { animation: photoPulse 2s ease-in-out infinite alternate; }
#brideFrame  { animation: photoPulse 2s ease-in-out infinite alternate 1s; }


/* ================================================================
   SECTION 09 — STICKY HEADER — TITLE BLOCK
================================================================ */
.header-title {
    flex: 1;
    text-align: center;
    z-index: 2;
    padding: 0 8px;
}

.header-tagline {
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-style: italic;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 1px;
    animation: taglineFade 3s ease-in-out infinite alternate;
}

@keyframes taglineFade {
    from { opacity: 0.7; letter-spacing: 0.18em; }
    to   { opacity: 1;   letter-spacing: 0.22em; }
}

.header-name {
    font-family: var(--font-display);
    font-size: clamp(0.65rem, 1.8vw, 0.95rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-white);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.weds-word {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--color-gold-light);
    animation: wedsGlow 2s ease-in-out infinite alternate;
}

@keyframes wedsGlow {
    from { text-shadow: none; }
    to   { text-shadow: 0 0 14px rgba(240, 201, 110, 0.7); }
}

.header-date-mini {
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--color-gold-light);
    letter-spacing: 0.15em;
    margin-top: 1px;
}


/* ================================================================
   SECTION 10 — NAVIGATION BAR
================================================================ */
.nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--color-white);
    padding: 10px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid rgba(201, 148, 58, 0.3);
    gap: 2px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-bar::-webkit-scrollbar { display: none; }

.nav-link {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.04em;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition:
        background  var(--transition),
        color       var(--transition),
        transform   0.2s var(--ease-spring),
        box-shadow  var(--transition);
}

/* Shimmer overlay on nav links */
.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--shimmer-color), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    border-radius: inherit;
    pointer-events: none;
}

.nav-link:hover::before { transform: translateX(100%); }

.nav-link:hover,
.nav-link.active {
    background: linear-gradient(135deg, var(--color-crimson), var(--color-gold));
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(168, 22, 42, 0.3);
}

.nav-link:active { transform: translateY(0) scale(0.95); }


/* ================================================================
   SECTION 11 — SACRED INTRO BANNER
================================================================ */
.sacred-intro-banner {
    background: linear-gradient(135deg, #1a0a14 0%, #3b1a38 50%, #0d1a30 100%);
    padding: 22px 20px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--color-gold);
    scroll-margin-top: 190px;
}

.sacred-intro-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(201, 148, 58, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

.sacred-intro-banner::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 200%;
    background: radial-gradient(ellipse, rgba(201, 148, 58, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: sacredAmbient 4s ease-in-out infinite alternate;
}

@keyframes sacredAmbient {
    from { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

.sacred-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 148, 58, 0.6), transparent);
    margin: 6px auto;
    max-width: 480px;
    position: relative;
    z-index: 1;
    transform: scaleX(0);
    animation: sacredRuleExpand 0.8s ease forwards;
}
.sacred-rule:last-of-type { animation-delay: 0.2s; }

@keyframes sacredRuleExpand {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

.sacred-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold-light);
    opacity: 0;
    animation: sparkFloat var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
    box-shadow: 0 0 6px var(--color-gold-light);
}

@keyframes sparkFloat {
    0%   { opacity: 0;   transform: translateY(0)     scale(0.5); }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.6; }
    100% { opacity: 0;   transform: translateY(-60px) scale(0.2); }
}

.sacred-line-1 {
    font-family: var(--font-bengali);
    font-size: clamp(1rem, 3.5vw, 1.4rem);
    color: var(--color-gold-light);
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
    min-height: 1.6em;
    margin-bottom: 2px;
    word-break: keep-all;
    overflow-wrap: normal;
}

.sacred-line-1.typed {
    animation: sacredGlow1 2.5s ease-in-out infinite alternate;
}

@keyframes sacredGlow1 {
    from { text-shadow: 0 0 8px rgba(240, 201, 110, 0.5), 0 0 20px rgba(240, 201, 110, 0.15); }
    to   { text-shadow: 0 0 20px rgba(240, 201, 110, 1),  0 0 50px rgba(240, 201, 110, 0.45), 0 0 80px rgba(240, 201, 110, 0.15); }
}

.sacred-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px auto;
    max-width: 280px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-spring);
}

.sacred-ornament.show {
    opacity: 1;
    transform: scale(1);
}

.sorn-dash {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 148, 58, 0.8), transparent);
}

.sorn-gem {
    color: var(--color-gold);
    font-size: 0.85rem;
    animation: gemSpin 6s linear infinite;
    display: inline-block;
    filter: drop-shadow(0 0 6px rgba(201, 148, 58, 0.7));
}

@keyframes gemSpin {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.25); }
    100% { transform: rotate(360deg) scale(1); }
}

.sacred-line-2 {
    font-family: var(--font-bengali);
    font-size: clamp(0.88rem, 2.8vw, 1.12rem);
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.45;
    position: relative;
    z-index: 1;
    min-height: 3em;
    word-break: keep-all;
    overflow-wrap: normal;
}

.sacred-line-2.typed {
    animation: sacredFloat 5s ease-in-out infinite alternate;
}

@keyframes sacredFloat {
    from { transform: translateY(0);    opacity: 0.9; }
    to   { transform: translateY(-3px); opacity: 1; }
}

.sacred-row {
    display: block;
    white-space: normal;
    line-height: 1.45;
}

.sacred-line-2 br { display: none; }

.sacred-word {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.4s var(--ease-smooth);
}

.sacred-word.show {
    opacity: 1;
    transform: translateY(0);
}

.sacred-caret {
    display: none;
    font-size: 1.1rem;
    color: var(--color-gold);
    vertical-align: middle;
    position: relative;
    z-index: 1;
    animation: caretBlink 0.65s step-start infinite;
}

.sacred-line-1 .sacred-caret,
.sacred-line-2 .sacred-caret {
    display: inline-block;
}

.sacred-caret.hidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* ================================================================
   SECTION 12 — HERO VIDEO SECTION + SCROLL INDICATOR
================================================================ */
.hero-video-section {
    padding: 0;
    background: #0a0609;
}

.video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 75vh;
    animation: videoReveal 1.2s var(--ease-smooth) 0.5s both;
}

@keyframes videoReveal {
    from { clip-path: inset(0 50% 0 50%); opacity: 0; }
    to   { clip-path: inset(0 0% 0 0%);   opacity: 1; }
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    transition: transform 6s ease-out;
}

/* Ken Burns effect on hover/pause */
.video-wrapper:hover .hero-video {
    transform: scale(1.04) translateZ(0);
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(10, 5, 8, 0.75) 100%);
    pointer-events: none;
}

/* Scroll Down Indicator (NEW) */
.scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
    animation: scrollIndicatorPulse 2s ease-in-out infinite;
    pointer-events: none;
}

.scroll-indicator p {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    font-style: italic;
}

.scroll-arrow {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(255,255,255,0.7);
    border-bottom: 2px solid rgba(255,255,255,0.7);
    transform: rotate(45deg);
    animation: scrollArrowBounce 1.5s ease-in-out infinite;
}

@keyframes scrollIndicatorPulse {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) translateY(0); }
    50%       { opacity: 1;   transform: translateX(-50%) translateY(-4px); }
}

@keyframes scrollArrowBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50%       { transform: rotate(45deg) translateY(6px); }
}

.tap-to-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: opacity 0.4s ease;
    gap: 12px;
}

.tap-to-play.hidden {
    opacity: 0;
    pointer-events: none;
}

.tap-icon {
    width: 72px;
    height: 72px;
    background: rgba(201, 148, 58, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-white);
    animation: pulseRing 2s ease-in-out infinite;
    transition: transform 0.3s var(--ease-spring);
    box-shadow: 0 0 0 0 rgba(201, 148, 58, 0.5);
}

.tap-to-play:hover .tap-icon {
    transform: scale(1.15);
}

.tap-to-play p {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--color-white);
    font-size: 1rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0   rgba(201, 148, 58, 0.7); }
    70%  { box-shadow: 0 0 0 20px rgba(201, 148, 58, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(201, 148, 58, 0);    }
}


/* ================================================================
   SECTION 13 — CUSTOM VIDEO CONTROLS
================================================================ */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: translateY(6px);
}

.video-wrapper:hover .video-controls,
.video-wrapper:focus-within .video-controls,
.video-controls.visible {
    opacity: 1;
    transform: translateY(0);
}

.vc-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), transform 0.2s var(--ease-spring);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vc-btn:hover {
    background: rgba(201, 148, 58, 0.6);
    transform: scale(1.12);
}

.vc-btn:active { transform: scale(0.92); }

.vc-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--color-white);
    pointer-events: none;
}

.vc-progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}

.vc-progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.2s ease;
}

.vc-progress-bar:hover { height: 8px; }

.vc-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-gold));
    border-radius: var(--radius-full);
    pointer-events: none;
    transition: width 0.2s linear;
}


/* ================================================================
   SECTION 14 — COUNTDOWN SECTION + TAP-FOR-HEARTS
================================================================ */
.countdown-section { padding: 40px 18px 56px; }

.hero-date-box {
    margin-bottom: var(--gap-md);
    display: inline-block;
    padding: 18px 28px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border-left: 5px solid var(--color-crimson);
    text-align: left;
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease, transform 0.4s var(--ease-spring);
}

/* Shimmer sweep on date box */
.hero-date-box::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: cardShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardShimmer {
    0%   { left: -100%; }
    60%  { left: 150%;  }
    100% { left: 150%;  }
}

@media (hover: hover) {
    .hero-date-box:hover {
        box-shadow: 0 20px 48px rgba(168, 22, 42, 0.18);
        transform: translateX(4px) scale(1.02);
    }
}

.hero-date {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    color: var(--color-crimson);
    font-weight: 700;
    letter-spacing: 0.04em;
    animation: glowPulse 2s ease-in-out infinite alternate;
}

.hero-day {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-gold);
    font-style: italic;
    margin-top: 4px;
}

.hero-bengali {
    font-family: var(--font-bengali);
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

@keyframes glowPulse {
    from { text-shadow: 0 0 4px rgba(168, 22, 42, 0.2); }
    to   { text-shadow: 0 0 20px rgba(168, 22, 42, 0.55), 0 0 40px rgba(168, 22, 42, 0.2); }
}

/* Countdown tiles */
.countdown-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin: 28px auto 0;
    max-width: 480px;
}

.countdown-tile {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 16px 10px 12px;
    min-width: 70px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-top: 4px solid var(--color-crimson);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition:
        transform  0.4s var(--ease-spring),
        box-shadow 0.3s ease,
        border-top-color 0.3s ease;
}

/* Inner glow pulse on tiles */
.countdown-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(168, 22, 42, 0.06), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.countdown-tile:hover::before { opacity: 1; }

.tile-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    font-weight: 700;
    color: var(--color-crimson);
    line-height: 1;
    display: inline-block;
    transition:
        transform   0.3s var(--ease-spring),
        color       0.3s ease,
        text-shadow 0.3s ease;
}

.tile-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease, letter-spacing 0.3s ease, transform 0.3s ease;
}

.countdown-sep {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-gold);
    line-height: 1;
    padding-bottom: 8px;
    animation: blink 1s step-start infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* Tap-for-Hearts Button (NEW) */
.tap-for-hearts-btn {
    margin-top: 28px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--color-crimson), #c0392b);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 3vw, 1rem);
    letter-spacing: 0.06em;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(168, 22, 42, 0.45);
    position: relative;
    overflow: hidden;
    animation: invitePulse 2.2s ease-in-out infinite;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
    display: inline-block;
}

.tap-for-hearts-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    animation: buttonShimmer 2.5s ease-in-out infinite;
}

.tap-for-hearts-btn:hover {
    transform: translateY(-3px) scale(1.04);
    animation-play-state: paused;
}

.tap-for-hearts-btn:active { transform: scale(0.97); }

/* Floating hearts spawned by JS */
.floating-heart {
    position: fixed;
    font-size: 1.5rem;
    pointer-events: none;
    z-index: 9996;
    animation: floatHeartUp 2s var(--ease-smooth) forwards;
}

@keyframes floatHeartUp {
    0%   { opacity: 1;   transform: translateY(0) scale(1) rotate(0deg); }
    50%  { opacity: 0.8; transform: translateY(-80px) scale(1.2) rotate(15deg); }
    100% { opacity: 0;   transform: translateY(-200px) scale(0.5) rotate(-15deg); }
}


/* ================================================================
   SECTION 15 — GALLERY / SCROLLER
================================================================ */
.gallery-section { padding-bottom: 40px; }

.scroller {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding: 16px 0;
    cursor: grab;
}

/* Left/right fade masks */
.scroller::before,
.scroller::after {
    content: '';
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.scroller::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}
.scroller::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

.scroller:active { cursor: grabbing; }

.scroller-inner {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: galleryScroll 30s linear infinite;
}

.scroller-inner:hover,
.scroller:active .scroller-inner {
    animation-play-state: paused;
}

.gallery-frame {
    width: 200px;
    height: 240px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition:
        box-shadow  0.4s ease,
        transform   0.4s var(--ease-spring);
}

/* Hover overlay on gallery frames */
.gallery-frame::after {
    content: '🔍';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.gallery-frame:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25), var(--shadow-gold);
    transform: translateY(-6px) scale(1.04) rotate(1deg);
}

.gallery-frame:hover::after { opacity: 1; }

.gallery-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-smooth), filter 0.4s ease;
}

.gallery-frame:hover img {
    transform: scale(1.1);
    filter: brightness(0.85) saturate(1.2);
}

@keyframes galleryScroll {
    to { transform: translateX(-50%); }
}


/* ================================================================
   SECTION 16 — LIGHTBOX (Enhanced with nav + counter)
================================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
    overscroll-behavior: none;
    touch-action: none;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--radius-md);
    box-shadow: 0 0 80px rgba(201, 148, 58, 0.4), 0 0 0 2px rgba(201, 148, 58, 0.3);
    object-fit: contain;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
}

.lightbox.open img {
    opacity: 1;
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.3s var(--ease-spring);
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg) scale(1.1);
}

/* Lightbox Navigation Arrows (NEW) */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.3s var(--ease-spring);
    z-index: 1;
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-nav:hover {
    background: rgba(201, 148, 58, 0.6);
    transform: translateY(-50%) scale(1.1);
}

/* Hide nav on small screens */
@media (max-width: 600px) {
    .lightbox-nav { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* Lightbox Counter (NEW) */
.lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    z-index: 1;
    background: var(--glass-bg);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
}


/* ================================================================
   SECTION 17 — SCHEDULE SECTION + 3D TILT
================================================================ */
.events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    max-width: 700px;
    margin: 0 auto;
}

.event-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 30px 24px;
    box-shadow: var(--shadow-card);
    position: relative;
    border-bottom: 5px solid var(--color-gold);
    overflow: hidden;
    cursor: default;
    transform: translateY(40px);
    opacity: 0;
    transition:
        transform   0.7s var(--ease-smooth),
        opacity     0.7s ease,
        box-shadow  0.4s ease;
}

/* Gradient top bar */
.event-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-gold));
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.7s var(--ease-smooth);
}

/* Glass shine overlay */
.event-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-card:hover::after { opacity: 1; }

/* Animated state */
.event-card.animate-in {
    transform: translateY(0);
    opacity: 1;
}

.event-card.animate-in::before {
    transform: scaleX(1);
    transition-delay: 0.1s;
}

@media (hover: hover) {
    .event-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 28px 56px rgba(168, 22, 42, 0.18);
    }
}

.event-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
    display: inline-block;
    transform: scale(0) rotate(-15deg);
    opacity: 0;
    transition: transform 0.6s var(--ease-spring), opacity 0.4s ease;
}

.event-card.animate-in .event-icon {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-delay: 0.2s;
}

.event-card:hover .event-icon {
    transform: scale(1.35) rotate(0deg);
    filter: drop-shadow(0 4px 12px rgba(201, 148, 58, 0.7));
}

.event-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--color-crimson) 0%, #e8514a 40%, var(--color-crimson) 60%, var(--color-crimson) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(8px);
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.6s ease;
    cursor: default;
}

.event-card.animate-in .event-title {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition-delay: 0.35s;
    animation: titleShimmer 3.5s linear infinite 1s;
}

@keyframes titleShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.event-date {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
    cursor: default;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease, letter-spacing 0.3s ease;
}

.event-card.animate-in .event-date {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;
}

.event-date:hover {
    color: var(--color-crimson);
    letter-spacing: 0.06em;
    transform: translateX(4px);
}

.event-bengali {
    font-family: var(--font-bengali);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 6px 0;
    cursor: default;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, text-shadow 0.3s ease, color 0.3s ease;
}

.event-card.animate-in .event-bengali {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.62s;
}

.event-bengali:hover {
    color: var(--color-gold);
    text-shadow: 0 0 14px rgba(201, 148, 58, 0.5);
    transform: translateX(-4px);
}

.event-time {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #1e5799;
    font-weight: 700;
    margin-top: 8px;
    display: inline-block;
    cursor: default;
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-spring), color 0.3s ease, letter-spacing 0.3s ease;
}

.event-card.animate-in .event-time {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.75s;
    animation: timeGlow 2.5s ease-in-out infinite 1.3s;
}

@keyframes timeGlow {
    0%, 100% { text-shadow: none; }
    50%       { text-shadow: 0 0 14px rgba(30, 87, 153, 0.55), 0 0 28px rgba(30, 87, 153, 0.25); }
}

.event-time:hover {
    transform: scale(1.1) translateY(-2px);
    color: var(--color-crimson);
    letter-spacing: 0.06em;
    animation: none;
}

.event-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--color-crimson), var(--color-gold));
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    cursor: default;
    opacity: 0;
    transform: translateY(-20px) rotate(-10deg) scale(0.7);
    transition: opacity 0.5s ease, transform 0.6s var(--ease-spring), filter 0.3s ease;
}

.event-card.animate-in .event-badge {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    transition-delay: 0.15s;
    animation: badgePulse 2.5s ease-in-out infinite 0.7s;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(168, 22, 42, 0.35); }
    50%       { box-shadow: 0 4px 28px rgba(168, 22, 42, 0.7), 0 0 0 4px rgba(168, 22, 42, 0.15); }
}

.event-badge:hover {
    transform: scale(1.14) rotate(2deg) !important;
    filter: brightness(1.2);
    animation: none;
}


/* ================================================================
   SECTION 18 — INVITATION SECTION
================================================================ */
.invitation-section { padding: 56px 18px; }

.blinking-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--color-crimson), #c0392b);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    letter-spacing: 0.06em;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(168, 22, 42, 0.45);
    position: relative;
    overflow: hidden;
    animation: invitePulse 2.2s ease-in-out infinite;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

/* Shimmer sweep on invite button */
.blinking-invite-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    animation: buttonShimmer 2.5s ease-in-out infinite;
}

@keyframes buttonShimmer {
    0%   { left: -80%; }
    100% { left: 140%; }
}

@keyframes invitePulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(168, 22, 42, 0.45), 0 0 0 0 rgba(168, 22, 42, 0.3); transform: scale(1); }
    50%       { box-shadow: 0 8px 32px rgba(168, 22, 42, 0.6), 0 0 0 8px rgba(168, 22, 42, 0);  transform: scale(1.02); }
}

@media (hover: hover) {
    .blinking-invite-btn:hover {
        box-shadow: 0 14px 36px rgba(168, 22, 42, 0.6);
        transform: translateY(-3px) scale(1.04);
        animation-play-state: paused;
    }
}

.blinking-invite-btn:active {
    transform: scale(0.97);
}

.invite-btn-icon { font-size: 1.4rem; }

/* ================================================================
   INVITATION POPUP MODAL (Page Flip Book)
================================================================ */
.invitation-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* FIT-TO-SCREEN FIX: allow the overlay to scroll and use safe
       centering so Close / Prev / Next are NEVER pushed off-screen
       on short desktop windows */
    overflow-y: auto;
}

.invitation-popup.active {
    display: flex;
    animation: invPopupIn 0.5s var(--ease-spring) forwards;
}

@keyframes invPopupIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.invitation-popup-inner {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--shadow-gold);
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    border: 2px solid var(--color-gold);
    transform: scale(0.85);
    animation: invCardIn 0.6s var(--ease-spring) 0.15s forwards;
    /* FIT-TO-SCREEN FIX: margin auto = safe flex centering.
       When the popup is taller than the viewport it aligns to the
       top of the scrollable overlay instead of overflowing both ends,
       keeping the Close button and Prev/Next buttons clickable. */
    margin: auto;
    flex-shrink: 0;
}

@keyframes invCardIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.invitation-popup-close {
    position: absolute;
    top: 10px; right: 14px;
    width: 36px; height: 36px;
    background: var(--color-crimson);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(168, 22, 42, 0.4);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
    z-index: 10;
}

.invitation-popup-close:hover {
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 8px 20px rgba(168, 22, 42, 0.6);
}

.invitation-popup-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 1.3rem);
    color: var(--color-text);
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    padding-top: 8px;
}

.invitation-book {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    /* FIT-TO-SCREEN FIX: book height now respects the viewport so the
       whole popup (title + book + nav buttons) always fits on screen */
    max-height: min(400px, calc(100vh - 230px));
    max-height: min(400px, calc(100dvh - 230px));
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid rgba(201, 148, 58, 0.3);
}

.invitation-page {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s var(--ease-smooth), opacity 0.6s ease;
    backface-visibility: hidden;
    overflow: hidden;
}

.invitation-page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.invitation-page.flip-left {
    transform: perspective(800px) rotateY(-90deg);
    opacity: 0;
    pointer-events: none;
}

.invitation-page.flip-right {
    transform: perspective(800px) rotateY(90deg);
    opacity: 0;
    pointer-events: none;
}

.invitation-page.active-page {
    transform: perspective(800px) rotateY(0deg);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
}

.invitation-page.exiting-left {
    animation: flipOutLeft 0.5s var(--ease-sharp) forwards;
}

.invitation-page.exiting-right {
    animation: flipOutRight 0.5s var(--ease-sharp) forwards;
}

.invitation-page.entering-left {
    animation: flipInLeft 0.5s var(--ease-sharp) forwards;
}

.invitation-page.entering-right {
    animation: flipInRight 0.5s var(--ease-sharp) forwards;
}

@keyframes flipOutLeft {
    from { transform: perspective(800px) rotateY(0deg); opacity: 1; }
    to   { transform: perspective(800px) rotateY(-90deg); opacity: 0; }
}

@keyframes flipOutRight {
    from { transform: perspective(800px) rotateY(0deg); opacity: 1; }
    to   { transform: perspective(800px) rotateY(90deg); opacity: 0; }
}

@keyframes flipInLeft {
    from { transform: perspective(800px) rotateY(90deg); opacity: 0; }
    to   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}

@keyframes flipInRight {
    from { transform: perspective(800px) rotateY(-90deg); opacity: 0; }
    to   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}

.invitation-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.invitation-nav-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--color-gold), #d4a017);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(201, 148, 58, 0.35);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.invitation-nav-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(201, 148, 58, 0.5);
}

.invitation-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.invitation-page-indicator {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
}

/* ================================================================
   WISHES FORM ENHANCEMENTS
================================================================ */
.wishes-section .wish-textarea {
    min-height: 120px;
    font-size: 1.05rem;
    background-image:
        radial-gradient(rgba(168, 22, 42, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}

.wishes-form .btn-loader {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    animation: wishPulse 1s ease-in-out infinite;
}

@keyframes wishPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ================================================================
   SECTION 19 — POETIC PARAGRAPH SECTION
================================================================ */
.poetic-para-section {
    background: linear-gradient(160deg, #1a0a14 0%, #2a1060 60%, #0d1a30 100%);
    padding: 56px 24px;
    position: relative;
    overflow: hidden;
}

/* Animated starfield */
.poetic-para-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(240, 201, 110, 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 15%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 70%, rgba(240, 201, 110, 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 50%, rgba(240, 201, 110, 0.5) 0%, transparent 100%);
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes twinkle {
    from { opacity: 0.5; }
    to   { opacity: 1;   }
}

/* Glowing orb */
.poetic-para-section::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(201, 148, 58, 0.08) 0%, transparent 70%);
    animation: orbPulse 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes orbPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
    50%       { transform: translate(-50%, -50%) scale(1.3);  opacity: 1;   }
}

/* ============================================================
   FIXED: Cursor now sits INLINE with the last typed character.
   Removed `display:flex` (was causing the cursor to wrap below).
   Inline-block container keeps text + cursor on the same baseline.
   ============================================================ */
.poetic-para-wrap {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--font-bengali);
    font-size: clamp(1.05rem, 3.5vw, 1.4rem);
    color: var(--color-gold-light);
    line-height: 1.9;
    letter-spacing: 0.03em;
    text-shadow: 0 0 20px rgba(240, 201, 110, 0.3);
    min-height: 5em;
    display: block;                 /* was: flex — caused cursor drop */
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Inner inline wrapper so cursor follows last character across wraps */
.poetic-cursor-inner {
    display: inline;
    text-align: center;
    line-height: 1.9;
    white-space: pre-wrap;          /* preserves line breaks in JSON */
    word-break: keep-all;
}

.poetic-cursor-text {
    display: inline;
    white-space: pre-wrap;
    word-break: keep-all;
}

.poetic-cursor {
    display: inline-block;
    color: var(--color-gold);
    font-weight: 300;
    animation: cursorBlink 0.75s step-start infinite;
    margin-left: 2px;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: baseline;
    transform: translateY(0);
}

@keyframes cursorBlink { 50% { opacity: 0; } }


/* ================================================================
   SECTION 20 — RSVP SECTION (NEW)
================================================================ */
.rsvp-section { padding: 56px 18px; }

.rsvp-form {
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-gold);
    position: relative;
    overflow: hidden;
}

/* Animated gradient border on RSVP form */
.rsvp-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-crimson), var(--color-gold), var(--color-crimson));
    background-size: 200% 100%;
    animation: shimmerLine 3s linear infinite;
}

/* Shimmer sweep */
.rsvp-form::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: cardShimmer 4s ease-in-out infinite 1s;
    pointer-events: none;
}

.rsvp-field {
    margin-bottom: 18px;
}

.rsvp-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-text);
    letter-spacing: 0.06em;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    text-align: left;
}

.rsvp-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(201, 148, 58, 0.2);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    transition:
        border-color 0.3s ease,
        box-shadow   0.3s ease,
        transform    0.2s var(--ease-spring);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.rsvp-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(201, 148, 58, 0.15), var(--shadow-soft);
    transform: translateY(-1px);
}

.rsvp-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.rsvp-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23c9943a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.rsvp-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Custom radio buttons */
.rsvp-radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rsvp-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    position: relative;
    padding: 8px 14px;
    border: 2px solid rgba(201, 148, 58, 0.2);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.rsvp-radio:hover {
    border-color: var(--color-gold);
    background: rgba(201, 148, 58, 0.05);
}

.rsvp-radio input[type="radio"] {
    display: none;
}

.rsvp-radio-custom {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.rsvp-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-crimson);
    transform: scale(0);
    transition: transform 0.3s var(--ease-spring);
}

.rsvp-radio input[type="radio"]:checked ~ .rsvp-radio-custom::after {
    transform: scale(1);
}

.rsvp-radio input[type="radio"]:checked ~ .rsvp-radio-custom {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 3px rgba(168, 22, 42, 0.15);
}

.rsvp-radio input[type="radio"]:checked + .rsvp-radio-custom + span {
    color: var(--color-crimson);
}

/* RSVP Submit Button */
.rsvp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--color-crimson), var(--color-gold));
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(168, 22, 42, 0.45);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.rsvp-submit-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: buttonShimmer 3s ease-in-out infinite;
}

.rsvp-submit-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 36px rgba(168, 22, 42, 0.6);
}

.rsvp-submit-btn:active {
    transform: scale(0.97);
}

/* RSVP Success Modal */
.rsvp-success {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999998;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rsvp-success.show {
    display: flex;
    animation: rsvpSuccessIn 0.4s var(--ease-spring) forwards;
}

@keyframes rsvpSuccessIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rsvp-success-icon {
    font-size: 3rem;
    display: inline-block;
    animation: heartBeat 1.3s ease-in-out infinite;
}

.rsvp-success-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-crimson);
    margin: 12px 0 6px;
    letter-spacing: 0.06em;
}

.rsvp-success-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 20px;
}

.rsvp-success-close {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--color-gold), #d4a017);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(201, 148, 58, 0.45);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.rsvp-success-close:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 28px rgba(201, 148, 58, 0.6);
}

/* Inner card for success */
.rsvp-success > .rsvp-success-icon,
.rsvp-success > .rsvp-success-title,
.rsvp-success > .rsvp-success-text,
.rsvp-success > .rsvp-success-close {
    position: relative;
    z-index: 1;
}

/* We need a wrapper inside the success overlay */
.rsvp-success-inner {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    box-shadow: var(--shadow-card);
    max-width: 360px;
    width: 100%;
    text-align: center;
    border-top: 4px solid var(--color-gold);
    transform: scale(0.9);
    animation: successCardIn 0.5s var(--ease-spring) 0.1s forwards;
}

@keyframes successCardIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}


/* ================================================================
   SECTION 21 — DOWNLOADS SECTION
================================================================ */
.download-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
    max-width: 480px;
    margin: 10px auto 0;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border-left: 5px solid var(--color-gold);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    position: relative;
    overflow: hidden;
    transition:
        box-shadow   0.4s ease,
        border-left-color 0.3s ease,
        color        0.3s ease,
        transform    0.4s var(--ease-spring);
}

/* Shimmer overlay */
.download-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 148, 58, 0.12), transparent);
    transition: left 0.5s ease;
}

.download-btn:hover::before { left: 150%; }

@media (hover: hover) {
    .download-btn:hover {
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
        border-left-color: var(--color-crimson);
        color: var(--color-crimson);
        transform: translateX(6px);
    }
}

.download-btn:active { transform: scale(0.98); }

.dl-icon  { font-size: 1.5rem; transition: transform 0.3s var(--ease-spring); }
.download-btn:hover .dl-icon { transform: scale(1.2) rotate(-5deg); }

.dl-label { flex: 1; text-align: left; }
.dl-arrow {
    font-size: 1.2rem;
    color: var(--color-gold);
    transition: transform 0.3s ease, color 0.3s ease;
}

.download-btn:hover .dl-arrow {
    transform: translateX(6px);
    color: var(--color-crimson);
}


/* ================================================================
   SECTION 22 — LOCATION / MAP SECTION
================================================================ */
.venue-card {
    max-width: 440px;
    margin: 0 auto 28px;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 24px 22px;
    border-top: 4px solid var(--color-gold);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.venue-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 148, 58, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.venue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(201, 148, 58, 0.15);
}

.venue-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-crimson);
    font-weight: 700;
    margin-bottom: 6px;
    transition: letter-spacing 0.3s ease;
}

.venue-card:hover .venue-name { letter-spacing: 0.06em; }

.venue-addr {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.directions-btn {
    display: inline-block;
    padding: 11px 30px;
    background: linear-gradient(135deg, var(--color-gold), #d4a017);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(201, 148, 58, 0.45);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}

.directions-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.directions-btn:hover::before { transform: translateX(100%); }

@media (hover: hover) {
    .directions-btn:hover {
        box-shadow: 0 10px 28px rgba(201, 148, 58, 0.6);
        transform: translateY(-2px) scale(1.05);
    }
}

.map-wrapper {
    max-width: 700px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 3px solid var(--color-gold);
    transition: box-shadow 0.4s ease, border-color 0.3s ease;
}

.map-wrapper:hover {
    box-shadow: 0 16px 40px rgba(201, 148, 58, 0.25);
    border-color: var(--color-crimson);
}

.map-wrapper iframe { display: block; }


/* ================================================================
   SECTION 23 — FOOTER + SHARE BUTTONS
================================================================ */
.site-footer {
    background: linear-gradient(160deg, #1a0a14 0%, #2a1060 60%, #0d1a30 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 56px 20px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated gradient orbs in footer */
.site-footer::before {
    content: '';
    position: absolute;
    bottom: -50px; left: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(201, 148, 58, 0.1), transparent 70%);
    animation: footerOrb1 6s ease-in-out infinite;
    pointer-events: none;
}

.site-footer::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(168, 22, 42, 0.08), transparent 70%);
    animation: footerOrb2 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes footerOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(30px, -20px) scale(1.2); }
}

@keyframes footerOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-20px, 20px) scale(1.15); }
}

.footer-heart {
    font-size: 2.4rem;
    margin-bottom: 14px;
    display: inline-block;
    animation: heartBeat 1.3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 60, 60, 0.5));
}

@keyframes heartBeat {
    0%   { transform: scale(1);    }
    14%  { transform: scale(1.18); }
    28%  { transform: scale(1);    }
    42%  { transform: scale(1.12); }
    70%  { transform: scale(1);    }
    100% { transform: scale(1);    }
}

.footer-names {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 5vw, 2rem);
    color: var(--color-gold-light);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    animation: footerNameGlow 3s ease-in-out infinite alternate;
    position: relative;
    z-index: 1;
}

@keyframes footerNameGlow {
    from { text-shadow: 0 0 10px rgba(240, 201, 110, 0.3); }
    to   { text-shadow: 0 0 30px rgba(240, 201, 110, 0.7), 0 0 60px rgba(240, 201, 110, 0.2); }
}

.footer-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* Share Buttons (NEW) */
.share-section {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.share-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--color-gold-light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.share-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.share-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    transition: transform 0.3s var(--ease-spring), background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.share-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    border-radius: inherit;
}

.share-btn:hover::before { transform: translateX(100%); }

.share-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    pointer-events: none;
}

.share-whatsapp {
    color: #ffffff;
}

.share-whatsapp:hover {
    background: #25D366;
    color: #ffffff;
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

.share-facebook:hover {
    background: var(--color-facebook);
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.4);
}

.share-copy:hover {
    background: var(--color-gold);
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 8px 24px rgba(201, 148, 58, 0.4);
}



/* Copy toast */
.copy-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-gold);
    color: var(--color-white);
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    z-index: 9999998;
    opacity: 0;
    animation: toastFadeInOut 2s ease forwards;
    box-shadow: 0 6px 20px rgba(201, 148, 58, 0.5);
}

@keyframes toastFadeInOut {
    0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.visitor-counter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    max-width: 280px;
    margin: 0 auto 24px;
    border: 1px solid rgba(201, 148, 58, 0.3);
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.visitor-counter-section:hover {
    border-color: rgba(201, 148, 58, 0.7);
    box-shadow: 0 0 20px rgba(201, 148, 58, 0.15);
}

.blinking-visitor-text {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-gold-light);
    letter-spacing: 0.1em;
    animation: textBlinker 1.8s ease-in-out infinite;
}

.visitor-counter-section img {
    display: block;
    min-width: 100px;
    height: auto;
    border-radius: var(--radius-sm);
}

.footer-copy {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    position: relative;
    z-index: 1;
}

@keyframes textBlinker {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.3; }
}


/* ================================================================
   SECTION 24 — SCROLL-TO-TOP BUTTON
================================================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-crimson), var(--color-gold));
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(201, 148, 58, 0.4);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.3s var(--ease-spring);
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    animation: scrollBtnPulse 2.5s ease-in-out infinite;
}

@keyframes scrollBtnPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(201, 148, 58, 0.4); }
    50%       { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 10px rgba(201, 148, 58, 0); }
}

.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-top-btn:hover {
    transform: translateY(-4px) scale(1.12);
}

.scroll-top-btn:active {
    transform: scale(0.92);
}


/* ================================================================
   SECTION 25 — MUSIC TOGGLE BUTTON (NEW)
================================================================ */
.music-toggle-btn {
    position: fixed;
    bottom: 28px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s var(--ease-spring), background 0.3s ease, box-shadow 0.3s ease;
    animation: musicBtnPulse 2.5s ease-in-out infinite;
}

@keyframes musicBtnPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
    50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 6px rgba(201, 148, 58, 0.2); }
}

.music-toggle-btn:hover {
    background: rgba(201, 148, 58, 0.5);
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.music-toggle-btn:active {
    transform: scale(0.92);
}

.music-toggle-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--color-white);
    pointer-events: none;
}

.music-toggle-btn.playing {
    background: linear-gradient(135deg, var(--color-gold), var(--color-crimson));
    border-color: rgba(255,255,255,0.4);
    animation: musicBtnPulsePlaying 1.5s ease-in-out infinite;
}

@keyframes musicBtnPulsePlaying {
    0%, 100% { box-shadow: 0 4px 16px rgba(201, 148, 58, 0.5), 0 0 0 0 rgba(201, 148, 58, 0.3); }
    50%       { box-shadow: 0 4px 16px rgba(201, 148, 58, 0.5), 0 0 0 10px rgba(201, 148, 58, 0); }
}


/* ================================================================
   SECTION 26 — CONFETTI CANVAS (NEW)
================================================================ */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9996;
    pointer-events: none;
}


/* ================================================================
   SECTION 27 — SECTION DIVIDERS & SHARED UTILITIES
================================================================ */
.section-divider { margin-bottom: 20px; }

.divider-icon {
    font-size: 1.7rem;
    color: var(--color-gold);
    display: inline-block;
    animation: dividerSpin 6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(201, 148, 58, 0.5));
}

@keyframes dividerSpin {
    0%   { transform: rotate(0deg)  scale(1);    opacity: 0.6; }
    50%  { transform: rotate(15deg) scale(1.15); opacity: 1; }
    100% { transform: rotate(0deg)  scale(1);    opacity: 0.6; }
}


/* ================================================================
   SECTION 28 — RESPONSIVE: TABLET (≥600px)
================================================================ */
@media (min-width: 600px) {
    .photo-frame { width: 60px; height: 60px; }
    .header-name { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
    .events-grid { grid-template-columns: 1fr 1fr; }
    .download-grid { grid-template-columns: 1fr 1fr; }
    .gallery-frame { width: 240px; height: 280px; }
    .countdown-tile { min-width: 90px; padding: 18px 14px 12px; }
    .nav-link { font-size: 0.78rem; padding: 7px 10px; }
    .rsvp-radio-group { flex-direction: row; }
    .invitation-popup-inner { max-width: 520px; padding: 24px 20px; }
    .invitation-book {
        max-height: min(500px, calc(100vh - 230px));
        max-height: min(500px, calc(100dvh - 230px));
    }
}


/* ================================================================
   SECTION 29 — RESPONSIVE: DESKTOP (≥1024px)
================================================================ */
@media (min-width: 1024px) {
    .photo-frame    { width: 42px; height: 42px; }
    .cinematic-bg   { padding: 4px 40px; }
    .header-name    { font-size: clamp(0.60rem, 0.9vw, 0.70rem); }
    .nav-link       { font-size: 0.82rem; padding: 7px 14px; }
    .video-wrapper  { max-height: 85vh; }
    .countdown-tile { min-width: 110px; }
    .tile-num       { font-size: 3rem; }
    .gallery-frame  { width: 280px; height: 320px; }
    .events-grid    { gap: 30px; }
    .download-grid  { grid-template-columns: 1fr 1fr; max-width: 620px; }
    section         { padding: 64px 48px; }
    .scroll-progress-bar { height: 4px; }
}


/* ================================================================
   SECTION 30 — RESPONSIVE: LANDSCAPE MOBILE FIX
================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .photo-frame        { width: 56px; height: 56px; }
    .photo-label        { display: none; }
    .header-name        { font-size: 0.8rem; }
    .header-tagline,
    .header-date-mini   { display: none; }
    .cinematic-bg       { padding: 8px 10px; }
    .nav-link           { font-size: 0.68rem; padding: 5px 7px; }
    .video-wrapper      { max-height: 95vh; aspect-ratio: unset; height: 100vw; }
    .countdown-tile     { min-width: 60px; padding: 10px 6px 8px; }
    .tile-num           { font-size: 1.4rem; }
    .scroll-indicator   { display: none; }
    .rsvp-form          { padding: 20px 16px; }
}


/* ================================================================
   SECTION 31 — CARD & TILE ANIMATIONS (Scroll-Reveal)
================================================================ */

/* Countdown Tiles */
.countdown-tile {
    transform: translateY(24px) scale(0.9);
    opacity: 0;
}

.countdown-tile.animate-in {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.countdown-tile:hover {
    transform: translateY(-6px) scale(1.07);
    box-shadow: 0 20px 40px rgba(168, 22, 42, 0.22);
    border-top-color: var(--color-gold);
}

/* Flip animation on number change */
.tile-num.flip {
    animation: numFlip 0.35s var(--ease-smooth);
}

@keyframes numFlip {
    0%   { transform: translateY(-14px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* Date Box */
.hero-date-box {
    transform: translateX(-36px);
    opacity: 0;
    transition: transform 0.7s var(--ease-smooth), opacity 0.7s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hero-date-box.animate-in {
    transform: translateX(0);
    opacity: 1;
}


/* ================================================================
   SECTION 32 — COUNTDOWN HOVER EFFECTS
================================================================ */
.countdown-tile:hover .tile-num {
    transform: scale(1.22);
    color: var(--color-gold);
    text-shadow: 0 0 24px rgba(201, 148, 58, 0.6);
}

.countdown-tile:hover .tile-label {
    color: var(--color-crimson);
    letter-spacing: 0.2em;
    transform: translateY(-2px);
}

.hero-date:hover {
    letter-spacing: 0.1em;
    text-shadow: 0 0 24px rgba(168, 22, 42, 0.6);
}

.hero-day {
    cursor: default;
    display: block;
    transition: color 0.3s ease, transform 0.3s ease;
}
.hero-day:hover {
    color: var(--color-crimson);
    transform: translateX(6px);
}

.hero-bengali {
    cursor: default;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
.hero-bengali:hover {
    color: var(--color-gold);
    text-shadow: 0 0 12px rgba(201, 148, 58, 0.45);
    transform: translateX(-6px);
}


/* ================================================================
   SECTION 33 — TITLE & SUBTITLE HOVER EFFECTS
================================================================ */
.event-title {
    cursor: default;
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.6s ease, letter-spacing 0.3s ease;
}
.event-title:hover {
    letter-spacing: 0.1em;
    filter: brightness(1.3);
    transform: scale(1.04);
    animation: none;
}


/* ================================================================
   SECTION 34 — GLOBAL SCROLL-REVEAL SYSTEM
================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger variants */
.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; }

/* Slide from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
.reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.6s ease, transform 0.6s var(--ease-spring);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}


/* ================================================================
   SECTION 35 — FLOATING PETALS (CSS only)
================================================================ */
.petal {
    position: fixed;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 50% 0 50% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 9997;
    animation: petalFall var(--duration, 8s) linear var(--delay, 0s) infinite;
}

@keyframes petalFall {
    0% {
        opacity: 0;
        transform: translateX(0) rotate(0deg) scale(0.8);
        top: -20px;
    }
    5% { opacity: 0.75; }
    90% { opacity: 0.4; }
    100% {
        opacity: 0;
        transform: translateX(var(--drift, 80px)) rotate(540deg) scale(0.5);
        top: 110vh;
    }
}


/* ================================================================
   SECTION 36 — SHIMMER & GLASS UTILITY CLASSES
================================================================ */

/* Generic glass card */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-md);
}

/* Shimmer text effect */
.shimmer-text {
    background: linear-gradient(90deg, var(--color-gold) 0%, #fff6d0 40%, var(--color-gold) 60%, var(--color-gold-light) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 2.5s linear infinite;
}

@keyframes shimmerText {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Gold border glow on focus / selection */
.glow-border {
    box-shadow: 0 0 0 2px var(--color-gold), 0 0 20px rgba(201, 148, 58, 0.35);
    border-radius: var(--radius-md);
}


/* ================================================================
   SECTION 37 — MAGNETIC BUTTON HOVER EFFECT
================================================================ */
.magnetic-btn {
    transition:
        transform  0.25s var(--ease-spring),
        box-shadow 0.25s ease;
    will-change: transform;
}

.magnetic-btn:hover {
    transform: scale(1.06) translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.magnetic-btn:active {
    transform: scale(0.95) translateY(0);
}


/* ================================================================
   SECTION 38 — 3D TILT CARD SYSTEM (NEW)
   Cards that tilt in 3D based on mouse position
================================================================ */
.tilt-card {
    perspective: 800px;
    transform-style: preserve-3d;
    will-change: transform;
}

.tilt-card .tilt-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--tilt-x, 50%) var(--tilt-y, 50%), rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.tilt-card:hover .tilt-glare {
    opacity: 1;
}


/* ================================================================
   SECTION 39 — PARALLAX DEPTH LAYERS
================================================================ */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ================================================================
   SECTION 40 — @KEYFRAME LIBRARY (Global Reusable)
================================================================ */

/* Soft floating */
@keyframes float {
    0%, 100% { transform: translateY(0px);    }
    50%       { transform: translateY(-10px);  }
}

/* Breathing scale */
@keyframes breathe {
    0%, 100% { transform: scale(1);    opacity: 0.8; }
    50%       { transform: scale(1.06); opacity: 1; }
}

/* Orbit rotate */
@keyframes orbit {
    to { transform: rotate(360deg); }
}

/* Text pulse (crimson glow) */
@keyframes textPulse {
    from { text-shadow: none; }
    to   { text-shadow: 0 4px 18px rgba(168, 22, 42, 0.4); }
}

/* Shimmer sweep (gold) */
@keyframes shimmerGold {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ================================================================
   END OF style.css
================================================================ */