/* --- UNIVERSAL MOBILE CENTER FIX: Counter Title + 2x2 Grid --- */
@media (max-width: 768px) {
    .counter-section { display: block !important; }

    .countdown-container,
    .counter-container,
    #countdown,
    .stats-container,
    .counter-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-items: center !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .counter-section h2,
    .stats-container h2,
    .counter-wrapper h2 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-self: center !important;
        text-align: center !important;
        margin: 0 0 12px 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .time-box,
    .counter-item,
    .counter-box,
    .countdown-item,
    .stat-item {
        width: 100% !important;
        max-width: 160px !important;
        min-width: 140px !important;
        min-height: 100px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .time-box span,
    .counter-value,
    .counter-number,
    .time-value,
    .stat-number {
        font-size: 2.2rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    .time-box p,
    .counter-label,
    .time-label,
    .stat-label,
    .label {
        font-size: 0.8rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        opacity: 0.9 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* --- GLOBAL MOBILE FIX: 2x2 Grid Layout (Forced Standard) --- */
@media (max-width: 768px) {
    /* 1. Force Container to 2-Column Grid */
    .counter-section, 
    .counter-wrapper, 
    .stats-container, 
    #countdown,
    .countdown-container { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Equal Columns */
        gap: 15px !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        justify-content: center !important;
        height: auto !important; /* Allow height to grow */
    }

    /* 2. Standardize Box Sizing */
    .counter-box, 
    .stat-item, 
    .time-box,
    .countdown-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 5px !important;
        min-height: 100px !important; /* Standard height */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        border-radius: 15px !important; /* Soft corners */
    }

    /* 3. Typography: Big Numbers */
    .count, 
    .number, 
    .stat-number,
    .counter-number,
    .time-value {
        font-size: 2.2rem !important;
        line-height: 1 !important;
        margin-bottom: 5px !important;
        font-weight: 700 !important;
    }

    /* 4. Typography: Small Labels */
    .label, 
    .stat-label,
    .counter-label,
    .time-label {
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        opacity: 0.9 !important;
        white-space: nowrap !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   ETERNAL TWILIGHT THEME - LoveLink
   A magical romantic moonlit night sky experience
   "Under the same moon, our hearts beat as one"
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600&family=Cormorant+Garamond:wght@300;400;500&family=Dancing+Script:wght@400;500;600;700&display=swap');

:root {
    /* Enhanced Twilight Colors */
    --twilight-navy: #0f0c29;
    --deep-purple: #302b63;
    --midnight-blue: #24243e;
    --moonlight-gold: #ffd700;
    --rose-pink: #ff6b9d;
    --soft-lavender: #e8d5ff;
    --pearl-white: #f5f5f7;
    --star-silver: #C0C0C0;

    /* New romantic accents */
    --twilight-rose: #E8A0BF;
    --twilight-glow: rgba(255, 215, 0, 0.3);
    --cosmic-purple: #9b59b6;
    --stardust-pink: #FFB6C1;
    --nebula-blue: #5C6BC0;
    --aurora-green: #81C784;
    --celestial-white: #FFFEF5;

    /* Gradient Presets */
    --romantic-gradient: linear-gradient(135deg, var(--twilight-rose) 0%, var(--rose-pink) 50%, var(--cosmic-purple) 100%);
    --moonbeam-gradient: linear-gradient(180deg, var(--moonlight-gold) 0%, var(--celestial-white) 50%, var(--moonlight-gold) 100%);
    --starfield-gradient: linear-gradient(180deg, var(--twilight-navy) 0%, var(--deep-purple) 40%, var(--midnight-blue) 70%, #1a1a2e 100%);

    /* Glass Effects - Enhanced */
    --glass-white: rgba(255, 255, 255, 0.08);
    --glass-romantic: rgba(232, 160, 191, 0.08);
    --glass-border: rgba(255, 215, 0, 0.3);
    --glass-moonlit: rgba(255, 215, 0, 0.15);
    --glass-rose-border: rgba(255, 107, 157, 0.3);

    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-script: 'Dancing Script', cursive;
    --font-main: 'Quicksand', sans-serif;
    --font-counter: 'Cormorant Garamond', serif;

    /* Shadows */
    --moonlight-shadow: 0 0 60px rgba(255, 215, 0, 0.2);
    --romantic-shadow: 0 8px 32px rgba(255, 107, 157, 0.15);
    --star-glow: 0 0 20px rgba(255, 215, 0, 0.6);

    /* Animation Timing */
    --ease-romantic: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-dreamy: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES & STARFIELD BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background: var(--starfield-gradient);
    background-attachment: fixed;
    color: var(--pearl-white);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Twinkling Stars Layer */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, var(--star-silver), transparent),
        radial-gradient(2px 2px at 40% 70%, var(--moonlight-gold), transparent),
        radial-gradient(1px 1px at 50% 20%, var(--pearl-white), transparent),
        radial-gradient(1px 1px at 60% 60%, var(--star-silver), transparent),
        radial-gradient(2px 2px at 80% 40%, var(--stardust-pink), transparent),
        radial-gradient(1px 1px at 10% 90%, var(--moonlight-gold), transparent),
        radial-gradient(1px 1px at 30% 50%, var(--pearl-white), transparent),
        radial-gradient(2px 2px at 70% 85%, var(--star-silver), transparent),
        radial-gradient(1px 1px at 90% 15%, var(--twilight-rose), transparent),
        radial-gradient(1px 1px at 15% 70%, var(--moonlight-gold), transparent);
    background-size: 250px 250px;
    animation: twinkle 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}

/* Secondary Twinkling Layer for Depth */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 25% 45%, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(1px 1px at 55% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 75% 65%, rgba(232, 160, 191, 0.7), transparent),
        radial-gradient(1px 1px at 45% 85%, rgba(192, 192, 192, 0.8), transparent),
        radial-gradient(1px 1px at 85% 35%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 35% 15%, rgba(255, 215, 0, 0.5), transparent),
        radial-gradient(1px 1px at 95% 75%, rgba(232, 160, 191, 0.6), transparent),
        radial-gradient(1px 1px at 5% 55%, rgba(255, 255, 255, 0.7), transparent);
    background-size: 300px 300px;
    animation: twinkleAlt 12s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
        transform: scale(1.01);
    }

    75% {
        opacity: 0.6;
    }
}

@keyframes twinkleAlt {

    0%,
    100% {
        opacity: 0.6;
    }

    33% {
        opacity: 0.9;
    }

    66% {
        opacity: 0.4;
    }
}

/* Particles Background - Star Field */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
}

/* AOS Fix */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING CONSTELLATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.constellation {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

.constellation-1 {
    top: 15%;
    left: 10%;
    animation: constellationFloat 20s ease-in-out infinite;
}

.constellation-2 {
    top: 40%;
    right: 5%;
    animation: constellationFloat 25s ease-in-out infinite reverse;
}

.constellation-3 {
    bottom: 20%;
    left: 5%;
    animation: constellationFloat 22s ease-in-out infinite 5s;
}

.constellation-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--moonlight-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--moonlight-gold), 0 0 20px var(--moonlight-gold);
    animation: starPulse 3s ease-in-out infinite;
}

.constellation-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    height: 1px;
    transform-origin: left center;
}

@keyframes constellationFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(2deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1deg);
    }

    75% {
        transform: translateY(-20px) rotate(1deg);
    }
}

@keyframes starPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENCHANTED MOON ELEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

.twilight-moon {
    position: fixed;
    top: 5%;
    right: 8%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at 30% 30%,
            #fffef5 0%,
            #fff8dc 15%,
            #ffeaa7 35%,
            #ffd700 60%,
            rgba(255, 215, 0, 0.4) 80%,
            transparent 100%);
    border-radius: 50%;
    box-shadow:
        /* Inner glow */
        inset 0 0 40px rgba(255, 255, 255, 0.5),
        inset -10px -10px 30px rgba(255, 215, 0, 0.3),
        /* Primary golden glow */
        0 0 60px 30px rgba(255, 215, 0, 0.25),
        0 0 100px 60px rgba(255, 215, 0, 0.15),
        0 0 150px 90px rgba(255, 215, 0, 0.08),
        /* Romantic pink halo */
        0 0 200px 100px rgba(232, 160, 191, 0.05),
        /* Soft ambient light */
        0 0 300px 150px rgba(255, 248, 220, 0.03);
    animation: moonGlowEnhanced 6s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

/* Moon crescent shadow effect */
.twilight-moon::before {
    content: '';
    position: absolute;
    top: 8%;
    right: 8%;
    width: 35%;
    height: 35%;
    background: radial-gradient(circle,
            rgba(255, 250, 240, 0.8) 0%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
}

/* Moon surface texture */
.twilight-moon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 60% 70%, rgba(200, 180, 100, 0.15) 0%, transparent 20%),
        radial-gradient(circle at 30% 50%, rgba(200, 180, 100, 0.1) 0%, transparent 15%),
        radial-gradient(circle at 70% 40%, rgba(200, 180, 100, 0.08) 0%, transparent 10%);
}

@keyframes moonGlowEnhanced {

    0%,
    100% {
        box-shadow:
            inset 0 0 40px rgba(255, 255, 255, 0.5),
            inset -10px -10px 30px rgba(255, 215, 0, 0.3),
            0 0 60px 30px rgba(255, 215, 0, 0.25),
            0 0 100px 60px rgba(255, 215, 0, 0.15),
            0 0 150px 90px rgba(255, 215, 0, 0.08),
            0 0 200px 100px rgba(232, 160, 191, 0.05),
            0 0 300px 150px rgba(255, 248, 220, 0.03);
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        box-shadow:
            inset 0 0 50px rgba(255, 255, 255, 0.6),
            inset -10px -10px 35px rgba(255, 215, 0, 0.4),
            0 0 80px 40px rgba(255, 215, 0, 0.3),
            0 0 130px 80px rgba(255, 215, 0, 0.2),
            0 0 180px 110px rgba(255, 215, 0, 0.1),
            0 0 250px 130px rgba(232, 160, 191, 0.08),
            0 0 350px 180px rgba(255, 248, 220, 0.05);
        transform: scale(1.03);
        filter: brightness(1.05);
    }
}

/* Moonbeam rays emanating from moon */
.moonbeam {
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 215, 0, 0.02) 20%,
            rgba(255, 215, 0, 0.04) 40%,
            transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: moonbeamShimmer 10s ease-in-out infinite;
}

@keyframes moonbeamShimmer {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION - Romantic Moonlit Entrance
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

/* Romantic quote decoration */
.hero::before {
    content: '☽ ✦ ☽';
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: var(--moonlight-gold);
    opacity: 0.5;
    letter-spacing: 30px;
    animation: gentleFloat 6s ease-in-out infinite;
}

.hero .content {
    position: relative;
    z-index: 10;
}

/* Decorative frame around title */
.hero .content::before {
    content: '✦';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: var(--moonlight-gold);
    animation: starTwinkle 2s ease-in-out infinite;
}

.title {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    background: linear-gradient(135deg,
            var(--moonlight-gold) 0%,
            #fff8dc 25%,
            var(--celestial-white) 50%,
            #fff8dc 75%,
            var(--moonlight-gold) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
    animation:
        fadeInDown 1.5s var(--ease-dreamy),
        titleShimmer 8s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
    letter-spacing: 3px;
}

@keyframes titleShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.subtitle {
    font-family: var(--font-main);
    font-size: 1.5rem;
    color: var(--soft-lavender);
    font-weight: 300;
    animation: fadeInUp 1.5s var(--ease-dreamy) 0.5s forwards;
    opacity: 0;
    max-width: 650px;
    margin: 0 auto 20px;
    line-height: 1.9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Romantic tagline */
.hero-tagline {
    font-family: var(--font-script);
    font-size: 1.3rem;
    color: var(--twilight-rose);
    opacity: 0;
    animation: fadeInUp 1.5s var(--ease-dreamy) 1s forwards;
    margin-top: 10px;
}

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--moonlight-gold);
    animation: bounceGlow 2.5s infinite;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.4s var(--ease-romantic);
    text-shadow: 0 0 20px var(--moonlight-gold);
}

.scroll-down:hover {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
    text-shadow: 0 0 30px var(--moonlight-gold);
}

@keyframes bounceGlow {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
        text-shadow: 0 0 20px var(--moonlight-gold);
    }

    40% {
        transform: translateX(-50%) translateY(-18px);
        text-shadow: 0 0 30px var(--moonlight-gold), 0 0 40px rgba(255, 215, 0, 0.5);
    }

    60% {
        transform: translateX(-50%) translateY(-10px);
        text-shadow: 0 0 25px var(--moonlight-gold);
    }
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS CARD COMPONENT - Moonlit Crystal Design
   ═══════════════════════════════════════════════════════════════════════════ */

.glass-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(232, 160, 191, 0.05) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid transparent;
    border-image: linear-gradient(135deg,
            rgba(255, 215, 0, 0.4) 0%,
            rgba(232, 160, 191, 0.3) 50%,
            rgba(255, 215, 0, 0.4) 100%) 1;
    border-radius: 24px;
    padding: 55px 45px;
    max-width: 850px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    box-shadow:
        /* Outer moonlit glow */
        0 0 40px rgba(255, 215, 0, 0.08),
        /* Depth shadow */
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.25),
        /* Inner highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 215, 0, 0.1);
    transition: all 0.5s var(--ease-romantic);
    overflow: hidden;
}

/* Moonlit edge glow effect */
.glass-card::before {
    content: '☽ ✦';
    position: absolute;
    top: 20px;
    left: 25px;
    color: var(--moonlight-gold);
    font-size: 1rem;
    opacity: 0.6;
    letter-spacing: 8px;
    animation: symbolPulse 4s ease-in-out infinite;
}

.glass-card::after {
    content: '✦ ☽';
    position: absolute;
    bottom: 20px;
    right: 25px;
    color: var(--twilight-rose);
    font-size: 1rem;
    opacity: 0.6;
    letter-spacing: 8px;
    animation: symbolPulse 4s ease-in-out infinite 2s;
}

@keyframes symbolPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Shimmer overlay effect on hover */
.glass-card-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.08) 50%,
            transparent 100%);
    transition: left 0.8s var(--ease-romantic);
    pointer-events: none;
}

.glass-card:hover .glass-card-shimmer {
    left: 100%;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.12),
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 215, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY SECTION - Our Love Tale
   ═══════════════════════════════════════════════════════════════════════════ */

.story-section {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Floating romantic quote */
.story-section::before {
    content: '"Under the same stars, our story began..."';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-script);
    font-size: 1.2rem;
    color: var(--twilight-rose);
    opacity: 0.6;
    white-space: nowrap;
}

.story-section .glass-card h2 {
    font-family: var(--font-display);
    color: var(--moonlight-gold);
    font-size: 2.4rem;
    margin-bottom: 30px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

/* Decorative lines around heading */
.story-section .glass-card h2::before,
.story-section .glass-card h2::after {
    content: '─ ✦ ─';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--moonlight-gold);
    opacity: 0.5;
}

.story-section .glass-card h2::before {
    right: calc(100% + 15px);
}

.story-section .glass-card h2::after {
    left: calc(100% + 15px);
}

.story-section .glass-card h2 i {
    margin-right: 12px;
    opacity: 0.8;
    animation: heartBeat 2s ease-in-out infinite;
}

@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

.story-text {
    font-family: var(--font-main);
    font-size: 1.2rem;
    line-height: 2.2;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 300;
    position: relative;
}

.story-text::first-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    float: left;
    line-height: 1;
    padding-right: 15px;
    color: var(--moonlight-gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.story-text strong {
    color: var(--twilight-rose);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(232, 160, 191, 0.3);
}

.story-text em {
    color: var(--soft-lavender);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE SECTION - Shooting Star Journey
   ═══════════════════════════════════════════════════════════════════════════ */

.timeline-section {
    padding: 100px 20px;
    position: relative;
}

/* Section decorative quote */
.timeline-section::before {
    content: '✦ Every moment with you is a star in our story ✦';
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-script);
    font-size: 1.1rem;
    color: var(--twilight-rose);
    opacity: 0.5;
    white-space: nowrap;
}

.timeline-section h2 {
    font-family: var(--font-display);
    color: var(--moonlight-gold);
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 70px;
    font-weight: 500;
    position: relative;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.timeline-section h2::after {
    content: '☽';
    display: block;
    font-size: 1.5rem;
    margin-top: 15px;
    opacity: 0.6;
    animation: moonPhase 4s ease-in-out infinite;
}

@keyframes moonPhase {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.timeline {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
}

/* Timeline Line - Shooting Star Trail */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: linear-gradient(180deg,
            transparent 0%,
            var(--moonlight-gold) 5%,
            var(--twilight-rose) 30%,
            var(--rose-pink) 50%,
            var(--twilight-rose) 70%,
            var(--moonlight-gold) 95%,
            transparent 100%);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 107, 157, 0.3),
        0 0 60px rgba(255, 215, 0, 0.2);
    border-radius: 2px;
    animation: timelineGlow 3s ease-in-out infinite;
}

@keyframes timelineGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.5),
            0 0 40px rgba(255, 107, 157, 0.3);
    }

    50% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.7),
            0 0 60px rgba(255, 107, 157, 0.5),
            0 0 80px rgba(255, 215, 0, 0.3);
    }
}

/* Shooting star particles along timeline */
.timeline::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--moonlight-gold);
    border-radius: 50%;
    left: 50%;
    margin-left: -4px;
    top: 0;
    box-shadow:
        0 0 10px var(--moonlight-gold),
        0 0 20px var(--moonlight-gold),
        0 0 30px rgba(255, 215, 0, 0.5);
    animation: shootingStarDown 8s linear infinite;
    z-index: 5;
}

@keyframes shootingStarDown {
    0% {
        top: -10px;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        top: calc(100% + 10px);
        opacity: 0;
        transform: scale(0.5);
    }
}

.timeline-container {
    padding: 15px 55px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

.timeline-container.left {
    left: 0;
    padding-right: 65px;
}

.timeline-container.right {
    left: 50%;
    padding-left: 65px;
}

/* Star Connection Points - Enhanced */
.timeline-container::after {
    content: '✦';
    position: absolute;
    font-size: 1.4rem;
    color: var(--moonlight-gold);
    top: 30px;
    text-shadow:
        0 0 15px var(--moonlight-gold),
        0 0 30px rgba(255, 215, 0, 0.5);
    z-index: 10;
    animation: connectionStarPulse 2s ease-in-out infinite;
}

/* Shooting star trail from connection point */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 38px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg,
            var(--moonlight-gold) 0%,
            rgba(255, 215, 0, 0.3) 50%,
            transparent 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    z-index: 5;
}

.timeline-container.left::after {
    right: -10px;
}

.timeline-container.left::before {
    right: 0;
    transform: scaleX(-1);
}

.timeline-container.right::after {
    left: -10px;
}

.timeline-container.right::before {
    left: 0;
}

@keyframes connectionStarPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        text-shadow:
            0 0 15px var(--moonlight-gold),
            0 0 30px rgba(255, 215, 0, 0.5);
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        text-shadow:
            0 0 20px var(--moonlight-gold),
            0 0 40px rgba(255, 215, 0, 0.7),
            0 0 60px rgba(255, 107, 157, 0.3);
    }
}

/* Timeline Cards - Moonlit Photo Frames */
.timeline-content {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(232, 160, 191, 0.05) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    transition: all 0.5s var(--ease-romantic);
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Subtle sparkle in corner */
.timeline-content::before {
    content: '☽';
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 0.9rem;
    color: var(--moonlight-gold);
    opacity: 0.4;
}

.timeline-content:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--moonlight-gold);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Moonlit Photo Frame Effect */
.timeline-content img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 18px;
    border: 3px solid rgba(255, 215, 0, 0.25);
    transition: all 0.5s var(--ease-romantic);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.1);
    position: relative;
}

.timeline-content:hover img {
    border-color: var(--moonlight-gold);
    filter: brightness(1.08) saturate(1.1);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 0 40px rgba(255, 215, 0, 0.15);
}

.timeline-text h3 {
    font-family: var(--font-display);
    color: var(--moonlight-gold);
    font-size: 1.5rem;
    margin: 0 0 12px 0;
    font-weight: 500;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.timeline-text p {
    font-family: var(--font-main);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 300;
}

/* Date badge */
.timeline-date {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: var(--soft-lavender);
    background: rgba(255, 215, 0, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    margin-top: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO SECTION - Celestial Memories
   ═══════════════════════════════════════════════════════════════════════════ */

.video-section {
    padding: 100px 20px;
    position: relative;
}

.video-section .glass-card {
    max-width: 800px;
}

.video-section h2 {
    font-family: var(--font-display);
    color: var(--moonlight-gold);
    font-size: 2.2rem;
    margin-bottom: 30px;
    font-weight: 500;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.video-section h2 i {
    color: var(--twilight-rose);
    margin-right: 12px;
    animation: heartBeat 2s ease-in-out infinite;
}

.video-wrapper {
    margin: 0 auto;
    max-width: 750px;
    position: relative;
}

/* Moonlit video frame */
.video-wrapper::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.3) 0%,
            rgba(232, 160, 191, 0.2) 50%,
            rgba(255, 215, 0, 0.3) 100%);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.5;
    animation: videoFrameGlow 4s ease-in-out infinite;
}

@keyframes videoFrameGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.video-wrapper video {
    width: 100%;
    max-height: 450px;
    border-radius: 16px;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 215, 0, 0.35);
    transition: all 0.4s var(--ease-romantic);
}

.video-wrapper video:hover {
    border-color: var(--moonlight-gold);
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.3),
        0 15px 40px rgba(0, 0, 0, 0.5);
}

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 215, 0, 0.35);
    transition: all 0.4s var(--ease-romantic);
}

.youtube-container:hover {
    border-color: var(--moonlight-gold);
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.3),
        0 15px 40px rgba(0, 0, 0, 0.5);
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COUNTER SECTION - Celestial Time Together
   ═══════════════════════════════════════════════════════════════════════════ */

.counter-section {
    padding: 100px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Decorative orbits */
.counter-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    border: 1px dashed rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitRotate 60s linear infinite;
    pointer-events: none;
}

@keyframes orbitRotate {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.counter-section h2 {
    font-family: var(--font-display);
    color: var(--moonlight-gold);
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 500;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

/* Romantic subheading */
.counter-subheading {
    font-family: var(--font-script);
    font-size: 1.3rem;
    color: var(--twilight-rose);
    margin-bottom: 50px;
    opacity: 0.8;
}

.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

/* Celestial Time Boxes */
.time-box {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(232, 160, 191, 0.08) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 35px 30px;
    min-width: 110px;
    flex: 1;
    max-width: 180px;
    border-radius: 20px;
    transition: all 0.4s var(--ease-romantic);
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Moon phase decorations */
.time-box::before {
    content: '☽';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--moonlight-gold);
    opacity: 0.3;
}

.time-box:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--moonlight-gold);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.time-box span {
    font-family: var(--font-counter);
    font-size: 4rem;
    font-weight: 400;
    display: block;
    background: linear-gradient(180deg,
            var(--moonlight-gold) 0%,
            var(--celestial-white) 50%,
            var(--moonlight-gold) 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    animation: numberShimmer 4s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

@keyframes numberShimmer {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }
}

.time-box p {
    font-family: var(--font-main);
    color: var(--soft-lavender);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 3px;
    margin-top: 15px;
    font-weight: 500;
}

/* Seconds Pulse Animation - Enhanced */
.time-box:last-child {
    animation: secondsPulseEnhanced 1.5s ease-in-out infinite;
}

@keyframes secondsPulseEnhanced {

    0%,
    100% {
        box-shadow:
            0 6px 25px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow:
            0 6px 25px rgba(0, 0, 0, 0.25),
            0 0 25px rgba(255, 107, 157, 0.25),
            0 0 40px rgba(232, 160, 191, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOVE BUTTON - Moonlit Heart
   ═══════════════════════════════════════════════════════════════════════════ */

.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 80px 20px;
    position: relative;
    z-index: 10;
}

/* Decorative text above button */
.heart-container::before {
    content: '✦ Click to share your love ✦';
    font-family: var(--font-script);
    font-size: 1.1rem;
    color: var(--soft-lavender);
    margin-bottom: 25px;
    opacity: 0.7;
    animation: gentleFloat 4s ease-in-out infinite;
}

.love-btn {
    background: linear-gradient(135deg,
            var(--twilight-rose) 0%,
            var(--rose-pink) 50%,
            #ff8fab 100%);
    background-size: 200% 200%;
    color: white;
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 20px 55px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    box-shadow:
        0 6px 25px rgba(255, 107, 157, 0.45),
        0 0 50px rgba(255, 107, 157, 0.25),
        0 0 80px rgba(232, 160, 191, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.4s var(--ease-romantic);
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
    z-index: 100;
    animation: buttonGradient 6s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes buttonGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Moon glow effect around button */
.love-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.4) 0%,
            rgba(232, 160, 191, 0.3) 50%,
            rgba(255, 215, 0, 0.4) 100%);
    border-radius: 65px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s var(--ease-romantic);
}

.love-btn:hover::before {
    opacity: 1;
}

.love-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 10px 35px rgba(255, 107, 157, 0.55),
        0 0 70px rgba(255, 107, 157, 0.35),
        0 0 100px rgba(232, 160, 191, 0.2),
        0 0 120px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

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

/* Floating Moons */
.floating-moon {
    position: fixed;
    color: var(--twilight-rose);
    font-size: 22px;
    pointer-events: none;
    animation: floatUpMoon 6s ease-out forwards;
    z-index: 1000;
    text-shadow:
        0 0 15px var(--twilight-rose),
        0 0 30px rgba(232, 160, 191, 0.5);
}

@keyframes floatUpMoon {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-110vh) scale(1.2) rotate(15deg);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSIC PLAYER - Celestial Vinyl
   ═══════════════════════════════════════════════════════════════════════════ */

.music-player {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
}

.vinyl-record {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,
            var(--deep-purple) 0%,
            var(--twilight-navy) 50%,
            var(--midnight-blue) 100%);
    border: 2px solid var(--moonlight-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.35),
        0 0 50px rgba(232, 160, 191, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.15);
    transition: all 0.4s var(--ease-romantic);
    position: relative;
}

/* Inner vinyl groove effect */
.vinyl-record::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle,
            var(--moonlight-gold) 0%,
            transparent 70%);
    border-radius: 50%;
    opacity: 0.3;
}

.vinyl-record:hover {
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.5),
        0 0 70px rgba(232, 160, 191, 0.25),
        inset 0 0 25px rgba(255, 215, 0, 0.2);
    transform: scale(1.1);
}

.vinyl-record i {
    color: var(--moonlight-gold);
    font-size: 20px;
    text-shadow: 0 0 10px var(--moonlight-gold);
}

.rotating {
    animation: spinEnhanced 6s linear infinite;
    /* GPU Acceleration */
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
}

@keyframes spinEnhanced {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER - Starlit Farewell
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 100%);
    position: relative;
}

footer::before {
    content: '☽ ✦ ☾';
    display: block;
    font-size: 1.2rem;
    color: var(--moonlight-gold);
    margin-bottom: 20px;
    letter-spacing: 15px;
    opacity: 0.5;
}

footer p {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--soft-lavender);
    font-weight: 300;
    letter-spacing: 1.5px;
}

footer a {
    color: var(--twilight-rose);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--moonlight-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

    100% {
        background-position: 200% center;
    }
}

/* Dreamy reveal animation */
@keyframes dreamyReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - TABLET
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
    .title {
        font-size: 3.5rem;
    }

    .twilight-moon {
        width: 100px;
        height: 100px;
        top: 3%;
        right: 5%;
    }

    .glass-card {
        padding: 40px 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

    /* Moon */
    .twilight-moon {
        width: 70px;
        height: 70px;
        top: 2%;
        right: 5%;
        box-shadow:
            0 0 40px 20px rgba(255, 215, 0, 0.15),
            0 0 60px 40px rgba(255, 215, 0, 0.08);
    }

    /* Hero */
    .title {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }

    .subtitle {
        font-size: 1.1rem;
        padding: 0 20px;
    }

    /* Glass Card */
    .glass-card {
        padding: 30px 20px;
        width: 95%;
    }

    .story-section .glass-card h2 {
        font-size: 1.8rem;
    }

    .story-text {
        font-size: 1rem;
    }

    /* Timeline - Single Column */
    .timeline-section h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .timeline::after {
        left: 20px;
    }

    .timeline-container {
        width: 100%;
        padding-left: 55px;
        padding-right: 15px;
        margin-bottom: 20px;
    }

    .timeline-container.left,
    .timeline-container.right {
        left: 0;
        padding-left: 55px;
        padding-right: 15px;
    }

    .timeline-container::after,
    .timeline-container.left::after,
    .timeline-container.right::after {
        left: 12px;
        right: auto;
        font-size: 1rem;
    }

    .timeline-content img {
        height: 180px;
    }

    .timeline-text h3 {
        font-size: 1.2rem;
    }

    /* Counter */
    .counter-section h2 {
        font-size: 1.8rem;
        margin-bottom: 35px;
    }

    .countdown-container {
        gap: 15px;
    }

    .time-box {
        padding: 20px 18px;
        min-width: 70px;
    }

    .time-box span {
        font-size: 2.5rem;
    }

    .time-box p {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    /* Video */
    .video-section .glass-card {
        padding: 25px 15px;
    }

    .video-section h2 {
        font-size: 1.6rem;
    }

    /* Love Button */
    .love-btn {
        padding: 16px 40px;
        font-size: 1rem;
        width: auto;
        max-width: 280px;
    }

    /* Music Player */
    .music-player {
        bottom: 20px;
        right: 20px;
    }

    .vinyl-record {
        width: 45px;
        height: 45px;
    }

    .vinyl-record i {
        font-size: 14px;
    }

    /* Footer */
    footer {
        padding: 30px 15px;
    }

    footer p {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - SMALL MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
    .title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .twilight-moon {
        width: 50px;
        height: 50px;
    }

    .countdown-container {
        gap: 10px;
    }

    .time-box {
        padding: 15px 12px;
        min-width: 60px;
    }

    .time-box span {
        font-size: 2rem;
    }

    .time-box p {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* GPU Acceleration for animations */
.twilight-moon,
.vinyl-record,
.timeline-content,
.time-box,
.love-btn {
    will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .twilight-moon {
        animation: none;
    }

    .time-box:last-child {
        animation: none;
    }
}

/* Mobile grid title span fix */
@media (max-width: 768px) {
    .counter-section h2,
    .stats-container h2,
    .counter-wrapper h2 {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }
}