/* FUTURISTIC SECTIONS - Next Level Display */

/* Welcome Section Enhancements */
.hero-welcome {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.1) 0%, 
        rgba(255, 0, 128, 0.1) 50%, 
        rgba(138, 43, 226, 0.1) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow: hidden;
    animation: welcomeGlow 4s ease-in-out infinite;
}

.hero-welcome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        var(--primary), 
        var(--accent), 
        var(--cosmic-purple), 
        var(--primary));
    background-size: 400% 400%;
    animation: gradientShift 6s ease infinite;
    z-index: -1;
    border-radius: inherit;
}

.hero-welcome::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 90deg,
        transparent 180deg,
        rgba(0, 255, 255, 0.1) 270deg,
        transparent 360deg
    );
    animation: cosmicRotate 20s linear infinite;
    z-index: -1;
}

@keyframes welcomeGlow {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.3),
            0 0 60px rgba(255, 0, 128, 0.2),
            inset 0 0 30px rgba(138, 43, 226, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(0, 255, 255, 0.5),
            0 0 100px rgba(255, 0, 128, 0.3),
            inset 0 0 50px rgba(138, 43, 226, 0.2);
    }
}

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

@keyframes cosmicRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Welcome Title */
.hero-title {
    position: relative;
    background: linear-gradient(45deg, 
        var(--primary) 0%, 
        var(--accent) 25%, 
        var(--cosmic-purple) 50%, 
        var(--primary) 75%, 
        var(--accent) 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleSweep 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes titleShimmer {
    0%, 100% { 
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%;
        filter: hue-rotate(180deg);
    }
}

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

/* Enhanced Subtitle */
.hero-subtitle {
    position: relative;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--text);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    animation: subtitleFloat 4s ease-in-out infinite;
}

.hero-subtitle::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 4px;
    height: 60%;
    background: linear-gradient(to bottom, 
        var(--primary), 
        var(--accent));
    border-radius: 2px;
    transform: translateY(-50%);
    animation: subtitleGlow 2s ease-in-out infinite;
}

@keyframes subtitleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes subtitleGlow {
    0%, 100% { 
        box-shadow: 0 0 10px var(--primary);
        opacity: 0.7;
    }
    50% { 
        box-shadow: 0 0 20px var(--accent);
        opacity: 1;
    }
}

/* Latest Updates Section */
.cosmic-latest-section {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(138, 43, 226, 0.1) 0%, 
        rgba(0, 255, 255, 0.1) 50%, 
        rgba(255, 0, 128, 0.1) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    overflow: hidden;
    animation: sectionPulse 6s ease-in-out infinite;
}

.cosmic-latest-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        var(--cosmic-purple), 
        var(--primary), 
        var(--accent), 
        var(--cosmic-purple));
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    z-index: -1;
    border-radius: inherit;
}

.cosmic-latest-section::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 70%);
    animation: sectionRotate 25s linear infinite;
    z-index: -1;
}

@keyframes sectionPulse {
    0%, 100% { 
        box-shadow: 
            0 0 40px rgba(138, 43, 226, 0.3),
            0 0 80px rgba(0, 255, 255, 0.2),
            inset 0 0 40px rgba(255, 0, 128, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 60px rgba(138, 43, 226, 0.5),
            0 0 120px rgba(0, 255, 255, 0.3),
            inset 0 0 60px rgba(255, 0, 128, 0.2);
    }
}

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

/* Enhanced Section Title */
.cosmic-latest-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(45deg, 
        var(--primary) 0%, 
        var(--accent) 50%, 
        var(--cosmic-purple) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 4s ease-in-out infinite;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.cosmic-latest-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    width: 6px;
    height: 80%;
    background: linear-gradient(to bottom, 
        var(--primary), 
        var(--accent), 
        var(--cosmic-purple));
    border-radius: 3px;
    transform: translateY(-50%);
    animation: titleBarGlow 2s ease-in-out infinite;
}

.cosmic-latest-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary) 25%, 
        var(--accent) 50%, 
        var(--cosmic-purple) 75%, 
        transparent 100%);
    border-radius: 2px;
    animation: titleUnderline 3s ease-in-out infinite;
}

@keyframes titleBarGlow {
    0%, 100% { 
        box-shadow: 0 0 15px var(--primary);
        opacity: 0.8;
    }
    50% { 
        box-shadow: 0 0 25px var(--accent);
        opacity: 1;
    }
}

@keyframes titleUnderline {
    0%, 100% { 
        opacity: 0.6;
        transform: scaleX(0.8);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Sparkle Icon Enhancement */
.sparkle-icon {
    font-size: 2rem;
    animation: sparkleRotate 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px currentColor);
}

@keyframes sparkleRotate {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 10px currentColor) hue-rotate(0deg);
    }
    25% { 
        transform: rotate(90deg) scale(1.1);
        filter: drop-shadow(0 0 15px currentColor) hue-rotate(90deg);
    }
    50% { 
        transform: rotate(180deg) scale(1.2);
        filter: drop-shadow(0 0 20px currentColor) hue-rotate(180deg);
    }
    75% { 
        transform: rotate(270deg) scale(1.1);
        filter: drop-shadow(0 0 15px currentColor) hue-rotate(270deg);
    }
}

/* Enhanced Update Cards */
.update-card {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(30, 34, 64, 0.5) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.update-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.update-card:hover::before {
    left: 100%;
}

.update-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary);
    box-shadow: 
        0 20px 40px rgba(0, 255, 255, 0.2),
        0 0 30px rgba(255, 0, 128, 0.1),
        inset 0 0 20px rgba(138, 43, 226, 0.1);
}

/* Day Theme Enhancements - Much More Vibrant */
[data-theme="day"] .hero-welcome {
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.4) 0%, 
        rgba(255, 23, 68, 0.4) 25%, 
        rgba(156, 39, 176, 0.4) 50%, 
        rgba(0, 188, 212, 0.4) 75%, 
        rgba(76, 175, 80, 0.4) 100%) !important;
    animation: dayWelcomeGlow 5s ease-in-out infinite !important;
    border: 4px solid rgba(255, 107, 53, 0.8) !important;
    box-shadow: 
        0 0 50px rgba(255, 107, 53, 0.6),
        0 0 100px rgba(255, 23, 68, 0.4),
        inset 0 0 50px rgba(156, 39, 176, 0.3) !important;
}

[data-theme="day"] .hero-welcome::before {
    background: linear-gradient(45deg, 
        var(--primary) 0%, 
        var(--accent) 20%, 
        var(--vibrant-purple) 40%, 
        var(--vibrant-blue) 60%, 
        var(--vibrant-green) 80%, 
        var(--primary) 100%);
    background-size: 300% 300%;
    animation: dayGradientShift 8s ease infinite;
}

[data-theme="day"] .hero-welcome::after {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 107, 53, 0.3) 60deg,
        rgba(255, 23, 68, 0.3) 120deg,
        rgba(156, 39, 176, 0.3) 180deg,
        rgba(0, 188, 212, 0.3) 240deg,
        rgba(76, 175, 80, 0.3) 300deg,
        transparent 360deg
    );
    animation: dayCosmicRotate 15s linear infinite;
}

[data-theme="day"] .hero-title {
    background: linear-gradient(45deg, 
        #ff6b35 0%, 
        #ff1744 20%, 
        #9c27b0 40%, 
        #00bcd4 60%, 
        #4caf50 80%, 
        #ff6b35 100%) !important;
    background-size: 400% 400% !important;
    animation: dayTitleShimmer 4s ease-in-out infinite !important;
    text-shadow: 
        0 0 30px rgba(255, 107, 53, 1),
        0 0 60px rgba(255, 23, 68, 0.8),
        0 0 90px rgba(156, 39, 176, 0.6) !important;
    filter: brightness(1.3) saturate(1.5) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

[data-theme="day"] .hero-subtitle {
    color: var(--text);
    text-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    animation: daySubtitleFloat 5s ease-in-out infinite;
}

[data-theme="day"] .hero-subtitle::before {
    background: linear-gradient(to bottom, 
        var(--primary), 
        var(--accent), 
        var(--vibrant-purple));
    animation: daySubtitleGlow 3s ease-in-out infinite;
}

[data-theme="day"] .cosmic-latest-section {
    background: linear-gradient(135deg, 
        rgba(156, 39, 176, 0.4) 0%, 
        rgba(255, 107, 53, 0.4) 25%, 
        rgba(255, 23, 68, 0.4) 50%, 
        rgba(0, 188, 212, 0.4) 75%, 
        rgba(76, 175, 80, 0.4) 100%) !important;
    animation: daySectionPulse 7s ease-in-out infinite !important;
    border: 4px solid rgba(255, 107, 53, 0.8) !important;
    box-shadow: 
        0 0 60px rgba(255, 107, 53, 0.6),
        0 0 120px rgba(255, 23, 68, 0.4),
        inset 0 0 60px rgba(156, 39, 176, 0.3) !important;
}

[data-theme="day"] .cosmic-latest-section::before {
    background: linear-gradient(45deg, 
        var(--vibrant-purple) 0%, 
        var(--primary) 20%, 
        var(--accent) 40%, 
        var(--vibrant-blue) 60%, 
        var(--vibrant-green) 80%, 
        var(--vibrant-purple) 100%);
    background-size: 300% 300%;
    animation: dayGradientShift 10s ease infinite;
}

[data-theme="day"] .cosmic-latest-section::after {
    background: radial-gradient(circle, 
        rgba(255, 107, 53, 0.15) 0%, 
        rgba(255, 23, 68, 0.15) 25%, 
        rgba(156, 39, 176, 0.15) 50%, 
        rgba(0, 188, 212, 0.15) 75%, 
        transparent 100%);
    animation: daySectionRotate 20s linear infinite;
}

[data-theme="day"] .cosmic-latest-title {
    background: linear-gradient(45deg, 
        #ff6b35 0%, 
        #ff1744 25%, 
        #9c27b0 50%, 
        #00bcd4 75%, 
        #4caf50 100%) !important;
    background-size: 300% 300% !important;
    animation: dayTitleShimmer 5s ease-in-out infinite !important;
    text-shadow: 
        0 0 30px rgba(255, 107, 53, 1),
        0 0 60px rgba(255, 23, 68, 0.8) !important;
    filter: brightness(1.3) saturate(1.5) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

[data-theme="day"] .cosmic-latest-title::before {
    background: linear-gradient(to bottom, 
        var(--primary), 
        var(--accent), 
        var(--vibrant-purple), 
        var(--vibrant-blue));
    animation: dayTitleBarGlow 3s ease-in-out infinite;
}

[data-theme="day"] .cosmic-latest-title::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary) 20%, 
        var(--accent) 40%, 
        var(--vibrant-purple) 60%, 
        var(--vibrant-blue) 80%, 
        transparent 100%);
    animation: dayTitleUnderline 4s ease-in-out infinite;
}

[data-theme="day"] .update-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 107, 53, 0.25) 25%, 
        rgba(255, 23, 68, 0.25) 50%, 
        rgba(156, 39, 176, 0.25) 75%, 
        rgba(0, 188, 212, 0.25) 100%) !important;
    border: 3px solid rgba(255, 107, 53, 0.8) !important;
    animation: dayCardGlow 6s ease-in-out infinite !important;
    box-shadow: 
        0 8px 25px rgba(255, 107, 53, 0.4),
        inset 0 0 15px rgba(255, 23, 68, 0.2) !important;
}

[data-theme="day"] .update-card::before {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 25%, 
        rgba(255, 107, 53, 0.3) 50%, 
        rgba(255, 23, 68, 0.3) 75%, 
        transparent 100%);
}

[data-theme="day"] .update-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: var(--primary);
    box-shadow: 
        0 25px 50px rgba(255, 107, 53, 0.4),
        0 0 40px rgba(255, 23, 68, 0.3),
        0 0 60px rgba(156, 39, 176, 0.2),
        inset 0 0 30px rgba(0, 188, 212, 0.1);
    animation: dayCardHoverGlow 2s ease-in-out infinite;
}

[data-theme="day"] .sparkle-icon {
    animation: daySparkleRotate 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px currentColor) hue-rotate(0deg);
}

/* Day Theme Animations */
@keyframes dayWelcomeGlow {
    0%, 100% { 
        box-shadow: 
            0 0 40px rgba(255, 107, 53, 0.4),
            0 0 80px rgba(255, 23, 68, 0.3),
            inset 0 0 40px rgba(156, 39, 176, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 60px rgba(255, 107, 53, 0.6),
            0 0 120px rgba(255, 23, 68, 0.4),
            inset 0 0 60px rgba(156, 39, 176, 0.3);
    }
}

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

@keyframes dayCosmicRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dayTitleShimmer {
    0%, 100% { 
        background-position: 0% 50%;
        filter: brightness(1.1) saturate(1.2) hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%;
        filter: brightness(1.3) saturate(1.4) hue-rotate(20deg);
    }
}

@keyframes daySubtitleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes daySubtitleGlow {
    0%, 100% { 
        box-shadow: 0 0 15px var(--primary);
        opacity: 0.8;
    }
    50% { 
        box-shadow: 0 0 25px var(--accent);
        opacity: 1;
    }
}

@keyframes daySectionPulse {
    0%, 100% { 
        box-shadow: 
            0 0 50px rgba(255, 107, 53, 0.4),
            0 0 100px rgba(255, 23, 68, 0.3),
            inset 0 0 50px rgba(156, 39, 176, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 80px rgba(255, 107, 53, 0.6),
            0 0 160px rgba(255, 23, 68, 0.4),
            inset 0 0 80px rgba(156, 39, 176, 0.3);
    }
}

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

@keyframes dayTitleBarGlow {
    0%, 100% { 
        box-shadow: 0 0 20px var(--primary);
        opacity: 0.9;
    }
    50% { 
        box-shadow: 0 0 30px var(--accent);
        opacity: 1;
    }
}

@keyframes dayTitleUnderline {
    0%, 100% { 
        opacity: 0.7;
        transform: scaleX(0.8);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1.1);
    }
}

@keyframes dayCardGlow {
    0%, 100% { 
        box-shadow: 
            0 5px 20px rgba(255, 107, 53, 0.2),
            inset 0 0 10px rgba(255, 23, 68, 0.1);
    }
    50% { 
        box-shadow: 
            0 8px 30px rgba(255, 107, 53, 0.3),
            inset 0 0 15px rgba(255, 23, 68, 0.15);
    }
}

@keyframes dayCardHoverGlow {
    0%, 100% { 
        box-shadow: 
            0 25px 50px rgba(255, 107, 53, 0.4),
            0 0 40px rgba(255, 23, 68, 0.3);
    }
    50% { 
        box-shadow: 
            0 30px 60px rgba(255, 107, 53, 0.5),
            0 0 50px rgba(255, 23, 68, 0.4);
    }
}

@keyframes daySparkleRotate {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 15px currentColor) hue-rotate(0deg);
    }
    25% { 
        transform: rotate(90deg) scale(1.2);
        filter: drop-shadow(0 0 20px currentColor) hue-rotate(90deg);
    }
    50% { 
        transform: rotate(180deg) scale(1.4);
        filter: drop-shadow(0 0 25px currentColor) hue-rotate(180deg);
    }
    75% { 
        transform: rotate(270deg) scale(1.2);
        filter: drop-shadow(0 0 20px currentColor) hue-rotate(270deg);
    }
}

/* Force day theme visibility - Override everything */
[data-theme="day"] .cosmic-about-card.hero-welcome {
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.5) 0%, 
        rgba(255, 23, 68, 0.5) 25%, 
        rgba(156, 39, 176, 0.5) 50%, 
        rgba(0, 188, 212, 0.5) 75%, 
        rgba(76, 175, 80, 0.5) 100%) !important;
    border: 5px solid rgba(255, 107, 53, 1) !important;
    box-shadow: 
        0 0 80px rgba(255, 107, 53, 0.8),
        0 0 160px rgba(255, 23, 68, 0.6),
        inset 0 0 80px rgba(156, 39, 176, 0.4) !important;
}

[data-theme="day"] .cosmic-latest-section {
    background: linear-gradient(135deg, 
        rgba(156, 39, 176, 0.5) 0%, 
        rgba(255, 107, 53, 0.5) 25%, 
        rgba(255, 23, 68, 0.5) 50%, 
        rgba(0, 188, 212, 0.5) 75%, 
        rgba(76, 175, 80, 0.5) 100%) !important;
    border: 5px solid rgba(255, 107, 53, 1) !important;
    box-shadow: 
        0 0 100px rgba(255, 107, 53, 0.8),
        0 0 200px rgba(255, 23, 68, 0.6),
        inset 0 0 100px rgba(156, 39, 176, 0.4) !important;
}

[data-theme="day"] .about-heading.hero-title,
[data-theme="day"] .cosmic-latest-title {
    background: linear-gradient(45deg, 
        #ff6b35 0%, 
        #ff1744 20%, 
        #9c27b0 40%, 
        #00bcd4 60%, 
        #4caf50 80%, 
        #ff6b35 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: brightness(1.5) saturate(2) !important;
}

[data-theme="day"] .blog-post.update-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 107, 53, 0.3) 25%, 
        rgba(255, 23, 68, 0.3) 50%, 
        rgba(156, 39, 176, 0.3) 75%, 
        rgba(0, 188, 212, 0.3) 100%) !important;
    border: 4px solid rgba(255, 107, 53, 1) !important;
    box-shadow: 
        0 10px 30px rgba(255, 107, 53, 0.6),
        inset 0 0 20px rgba(255, 23, 68, 0.3) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }
    
    .cosmic-latest-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cosmic-latest-title::before {
        display: none;
    }
    
    .hero-welcome,
    .cosmic-latest-section {
        padding: 1.5rem;
    }
}

/* Performance Optimizations */
.hero-welcome,
.cosmic-latest-section,
.update-card {
    will-change: transform, box-shadow;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .hero-welcome,
    .cosmic-latest-section,
    .hero-title,
    .cosmic-latest-title,
    .sparkle-icon,
    .update-card {
        animation: none !important;
    }
    
    .hero-welcome::before,
    .hero-welcome::after,
    .cosmic-latest-section::before,
    .cosmic-latest-section::after {
        animation: none !important;
    }
}