/**
 * Glassmorphism & Premium Effects
 * Austin's Portfolio Site - Modern UI Enhancement
 */

/* =====================================================
   Glassmorphism Utilities
===================================================== */
.glass {
    background: var(--glass-bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
}

.glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-light);
}

/* =====================================================
   Enhanced Header / Sidebar with Glass Effect
===================================================== */
#header {
    background: linear-gradient(180deg,
        rgba(4, 11, 20, 0.95) 0%,
        rgba(4, 11, 20, 0.85) 100%);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left,
        rgba(20, 157, 221, 0.1) 0%,
        transparent 50%);
    pointer-events: none;
}

/* Enhanced Profile */
.profile-img {
    border: 4px solid rgba(20, 157, 221, 0.5);
    box-shadow:
        0 0 30px rgba(20, 157, 221, 0.3),
        0 0 60px rgba(20, 157, 221, 0.1);
    transition: all var(--transition-glass);
}

.profile-img:hover {
    border-color: var(--color-primary);
    box-shadow:
        0 0 40px rgba(20, 157, 221, 0.5),
        0 0 80px rgba(20, 157, 221, 0.2);
    transform: scale(1.05);
}

/* Enhanced Social Links */
.social-links a {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all var(--transition-glass);
}

.social-links a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(20, 157, 221, 0.4);
}

/* Enhanced Navigation */
.nav-menu a {
    position: relative;
    border-radius: var(--radius-md);
    transition: all var(--transition-glass);
}

.nav-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transform: scaleY(0);
    transition: transform var(--transition-glass);
}

.nav-menu a:hover,
.nav-menu a.active {
    background: rgba(20, 157, 221, 0.1);
}

.nav-menu a.active::before,
.nav-menu a:hover::before {
    transform: scaleY(1);
}

/* =====================================================
   Hero Section Enhancement
===================================================== */
#hero {
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(20, 157, 221, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(23, 59, 108, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.hero {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-glass);
}

.hero:hover {
    transform: translateY(-5px);
    box-shadow:
        0 35px 60px -15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero p {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(245, 248, 253, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   Section Cards & Content Glass Effects
===================================================== */

/* About Section */
.about-image img {
    border-radius: var(--radius-lg);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all var(--transition-glass);
}

.about-image img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(20, 157, 221, 0.3);
}

/* Glass Cards for Resume Items */
.resume-item {
    position: relative;
    padding-left: var(--space-xl);
}

.resume-item h4 {
    position: relative;
    display: inline-block;
}

.resume-item h5 {
    background: linear-gradient(135deg,
        rgba(20, 157, 221, 0.15) 0%,
        rgba(20, 157, 221, 0.05) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(20, 157, 221, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-primary);
}

/* =====================================================
   Why Me Cards with Premium Glass Effect - Dark Theme
===================================================== */
.why-me-item {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(20, 157, 221, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-glass);
}

.why-me-item:hover {
    transform: translateY(-8px);
    background: rgba(20, 157, 221, 0.15);
    border-color: rgba(20, 157, 221, 0.4);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(20, 157, 221, 0.2);
}

.why-me-item .icon {
    background: linear-gradient(135deg,
        rgba(20, 157, 221, 0.2) 0%,
        rgba(34, 211, 238, 0.1) 100%);
    border: 1px solid rgba(20, 157, 221, 0.3);
    box-shadow: none;
    transition: all var(--transition-glass);
}

.why-me-item:hover .icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-cyan));
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(20, 157, 221, 0.4);
}

.why-me-item:hover .icon i {
    color: var(--text-white);
}

/* =====================================================
   Contact Section Glass Cards
===================================================== */
.contact-info {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
}

.info-item i {
    background: linear-gradient(135deg,
        rgba(20, 157, 221, 0.2) 0%,
        rgba(20, 157, 221, 0.1) 100%);
    border: 1px solid rgba(20, 157, 221, 0.2);
    transition: all var(--transition-glass);
}

.info-item:hover i {
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%);
    border-color: var(--color-primary);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(20, 157, 221, 0.4);
}

/* =====================================================
   Skills Section Enhancement
===================================================== */
.skill-bar {
    background: rgba(220, 232, 248, 0.5);
    backdrop-filter: blur(5px);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.skill-progress {
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        var(--color-primary-light) 50%,
        var(--color-primary) 100%);
    background-size: 200% 100%;
    animation: skillShimmer 2s ease-in-out infinite;
    border-radius: var(--radius-md);
    box-shadow: 0 0 20px rgba(20, 157, 221, 0.3);
}

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

/* =====================================================
   Section Title Enhancement
===================================================== */
.section-title h2 {
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        transparent 100%);
    height: 4px;
    border-radius: 2px;
}

/* =====================================================
   Footer Glass Effect
===================================================== */
#footer {
    background: linear-gradient(180deg,
        rgba(4, 11, 20, 0.9) 0%,
        rgba(4, 11, 20, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* =====================================================
   Back to Top Button Glass
===================================================== */
.back-to-top {
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%);
    box-shadow: 0 8px 25px rgba(20, 157, 221, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(20, 157, 221, 0.5);
}

/* =====================================================
   Language Switcher Glass
===================================================== */
.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-glass);
}

.lang-btn:hover,
.lang-btn.active {
    background: rgba(20, 157, 221, 0.2);
    border-color: rgba(20, 157, 221, 0.3);
}

/* =====================================================
   Floating Animation for Cards
===================================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.why-me-item:nth-child(odd) {
    animation: float 6s ease-in-out infinite;
}

.why-me-item:nth-child(even) {
    animation: float 6s ease-in-out infinite 0.5s;
}

/* Disable floating animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .why-me-item {
        animation: none;
    }

    .skill-progress {
        animation: none;
    }
}

/* =====================================================
   Gradient Text for Headings
===================================================== */
.hero h1 {
    background: linear-gradient(135deg,
        var(--text-white) 0%,
        rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* =====================================================
   Loading Shimmer Effect
===================================================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}