/* Theme3 - Glassmorphism Design System */

/* CRITICAL: Unified CSS Variables - Light Mode Defaults */
:root, html.light, html:not(.dark), [data-theme="light"] {
    /* Ensure all variable systems are aligned */
    --bg-primary: var(--color-bg, #ffffff);
    --bg-secondary: var(--color-surface, #f8fafc);
    --text-primary: var(--color-text, #1f2937);
    --text-secondary: var(--color-text-secondary, #6b7280);
    --text-muted: var(--color-text-secondary, #6b7280);
    --border-color: var(--color-border, #e5e7eb);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(59, 130, 246, 0.12);
}

/* Dark mode overrides */
html.dark {
    --bg-primary: var(--color-bg, #0f172a);
    --bg-secondary: var(--color-surface, #1e293b);
    --text-primary: var(--color-text, #f8fafc);
    --text-secondary: var(--color-text-secondary, #cbd5e1);
    --text-muted: var(--color-text-secondary, #cbd5e1);
    --border-color: var(--color-border, #334155);
    --glass-bg: rgba(15, 23, 42, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(30, 136, 229, 0.2);
}

/* Glassmorphism Base Effects */
.footer-glassmorphism {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme-aware text colors using CSS variables */
.theme-text-secondary {
    color: var(--color-text-secondary);
}

/* Professional glassmorphism using CSS variables */
.footer-glassmorphism {
    background: var(--glass-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%));
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.footer-holographic {
    background: linear-gradient(135deg, 
        rgba(30, 136, 229, 0.1) 0%, 
        rgba(0, 188, 212, 0.1) 50%, 
        rgba(30, 136, 229, 0.1) 100%);
    background-size: 200% 200%;
    animation: holographic-flow 4s ease-in-out infinite;
}

@keyframes holographic-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.footer-hover-glow {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-hover-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(30, 136, 229, 0.3);
}

.footer-social-hover {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.footer-social-hover:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    transform: scale(1.1) rotate(5deg);
}

/* Dynamic Logo Switching Based on Theme - Using Opacity */
/* Default (Dark Mode) - Show light logo */
.light-mode-logo {
    opacity: 1;
    visibility: visible;
}

.dark-mode-logo {
    opacity: 0;
    visibility: hidden;
}

/* Light Mode - Show dark logo */
html:not(.dark) .light-mode-logo,
[data-theme="light"] .light-mode-logo {
    opacity: 0;
    visibility: hidden;
}

html:not(.dark) .dark-mode-logo,
[data-theme="light"] .dark-mode-logo {
    opacity: 1;
    visibility: visible;
}

/* Smooth transitions for logo switching */
.dark-mode-logo,
.light-mode-logo {
    transition: opacity 0.3s ease-in-out;
}

/* CRITICAL: Footer-only clickability override - DO NOT affect navigation */
footer.relative * {
    pointer-events: auto !important;
}

footer.relative a:not(nav a),
footer.relative button:not(nav button),
footer.relative input:not(nav input) {
    z-index: 50 !important;
    pointer-events: auto !important;
    position: relative !important;
    cursor: pointer !important;
}

footer.relative .absolute {
    pointer-events: none !important;
}

footer.relative .absolute.inset-0 {
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Ensure navigation is never affected */
nav,
nav *,
nav a,
nav button {
    pointer-events: auto !important;
}

/* Theme Transitions */
* { 
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; 
}

/* Smooth Scroll */
html { 
    scroll-behavior: smooth; 
}

@media (prefers-reduced-motion: reduce) { 
    html { 
        scroll-behavior: auto; 
    } 
}

/* Parallax System */
.parallax-section { 
    position: relative; 
    overflow: hidden; 
}

[data-parallax] { 
    will-change: transform; 
}

[data-scroll] { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease; 
}

[data-scroll].visible { 
    opacity: 1; 
    transform: translateY(0); 
}

[data-stagger] { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.6s ease; 
}

[data-stagger].visible { 
    opacity: 1; 
    transform: translateY(0); 
}