/* * ===================================================================
         * STYLE TOKENS & CSS VARIABLES
         * ===================================================================
        */
:root {
    --bg-start: #07060A;
    --bg-end: #0B0A12;
    --display-start: #8B5CF6;
    --display-end: #4F46E5;
    --cta-start: #7C3AED;
    --cta-end: #5B8CFF;
    --text: #FFFFFF;
    --muted: rgba(255, 255, 255, 0.78);
    --card-bg: rgba(255, 255, 255, 0.02);
    --progress-bar-fill: #9F7CFF;
    --chat-badge-bg: #6D28D9;
    --thumbnail-placeholder: #4b2f26;
    --neon-primary: #00F5FF;
    --neon-secondary: #FF006E;
    --grid-line: rgba(139, 92, 246, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-start);
    background-image: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

.font-display {
    font-family: 'Space Grotesk', sans-serif;
}

.text-gradient-display {
    background: linear-gradient(to right, var(--display-start), var(--display-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* * ===================================================================
         * Component Specific Styles
         * ===================================================================
        */
/* Navigation Styles - Updated with Enhanced Glass Effect */
#main-nav {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* Remove any border to prevent flicker and add initial vertical offset */
    border: 0 !important;
    padding-top: 0.5rem; /* ~top-2 effect when at top */
    /* Smooth, subtle transitions for nicer feel */
    transition: padding 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
    will-change: padding, background-color, backdrop-filter, box-shadow;
}

#main-nav.scrolled {
    background-color: rgba(7, 6, 10, 0.7);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* Snap the bar to the very top when scrolled and ensure no border line */
    padding-top: 0; /* ~top-0 */
    border-bottom: 0 !important;
}

/* Enhanced Navigation pills styling with glass effect */
.nav-link {
    position: relative;
    font-weight: 500;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

/* Navigation container transitions */
.nav-container {
    transition: all 0.3s ease-in-out;
}

/* Hide border and background when scrolled */
#main-nav.scrolled .nav-container {
    background: transparent !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#main-nav.scrolled .nav-link {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

#main-nav.scrolled .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

#main-nav.scrolled .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Mobile menu enhanced glass styling */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* --- REVISED Hero Section Styles --- */
.hero-image-stack {
    will-change: transform;
}

.hero-image {
    will-change: opacity, transform;
    transition: opacity 0.8s ease-in-out;
}

.hero-taglines-container {
    will-change: transform;
}

.hero-tagline {
    will-change: opacity;
    transition: opacity 0.6s ease-in-out;
}

/* Enhanced glass effect for mobile button */
#mobile-menu-button {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cta-glow {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 0 40px rgba(91, 140, 255, 0.3);
}

.thumbnail-placeholder {
    background-color: var(--thumbnail-placeholder);
}

.chat-badge {
    background-color: var(--chat-badge-bg);
}

#availability-progress {
    width: 75%;
}

/* Futuristic Grid Background */
.grid-bg {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 50px 50px;
    position: relative;
}

.grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, var(--bg-start) 70%);
    pointer-events: none;
}

/* Holographic Data Panels */
.holo-panel {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.1) 0%,
        rgba(79, 70, 229, 0.05) 50%,
        rgba(139, 92, 246, 0.1) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.holo-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(139, 92, 246, 0.1) 50%,
            transparent 100%);
    animation: scan 3s infinite;
}

@keyframes scan {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Neon Border Animation */
.neon-border {
    position: relative;
    border: 1px solid rgba(0, 245, 255, 0.3);
}

.neon-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary), var(--neon-primary));
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    animation: neonPulse 3s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes neonPulse {

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

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

/* Timeline Connector */
.timeline-line {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--display-start) 20%,
            var(--display-end) 80%,
            transparent 100%);
}

/* Floating Metrics */
.metric-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

/* Enhanced Experience Section Styles */
.timeline-container {
    background: linear-gradient(to bottom, 
        transparent 0%, 
        var(--display-start) 20%, 
        var(--display-end) 80%, 
        transparent 100%);
    /* End the timeline before core competencies section */
    height: calc(90% - 120px);
}

.timeline-progress {
    background: linear-gradient(to bottom, var(--display-start), var(--display-end));
    box-shadow: 0 0 10px var(--display-start);
    transition: transform 0.3s ease-out;
}

/* Moving shine effect on the timeline - Fixed positioning */
.timeline-shine {
    position: absolute;
    top: 0;
    left: -8px;
    width: 20px;
    height: 40px;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
}

/* Multi-layered shine effect for realism */
.timeline-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 8px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.9) 20%,
        rgba(139, 92, 246, 1) 40%,
        rgba(255, 255, 255, 1) 50%,
        rgba(139, 92, 246, 1) 60%,
        rgba(255, 255, 255, 0.9) 80%, 
        transparent 100%);
    border-radius: 4px;
    filter: blur(1px);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(139, 92, 246, 0.6),
        0 0 60px rgba(139, 92, 246, 0.4);
    animation: shimmer 2s ease-in-out infinite;
}

/* Outer glow layer */
.timeline-shine::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -2px;
    width: 24px;
    height: calc(100% + 20px);
    background: radial-gradient(ellipse at center, 
        rgba(139, 92, 246, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
}

@keyframes shimmer {
    0%, 100% {
        transform: scaleY(1) scaleX(1);
        opacity: 0.8;
    }
    50% {
        transform: scaleY(1.1) scaleX(1.2);
        opacity: 1;
    }
}

/* Reflection effects on nearby elements */
.timeline-dot {
    z-index: 10;
    transition: all 0.3s ease;
    position: relative;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(139, 92, 246, 0.2) 0%,
        transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.timeline-dot.shine-reflect::before {
    opacity: 1;
    animation: reflectionPulse 1s ease-out;
}

@keyframes reflectionPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

/* Experience card reflections */
.experience-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

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

/* Enhanced reflection when shine is nearby */
.experience-card.shine-nearby {
    box-shadow: 
        0 8px 32px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.experience-card.shine-nearby::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        transparent 30%,
        transparent 70%,
        rgba(139, 92, 246, 0.05) 100%);
    pointer-events: none;
    animation: cardReflection 2s ease-in-out infinite;
}

@keyframes cardReflection {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

/* Company items reflection */
.company-item {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.company-item.shine-nearby {
    background: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 
        0 4px 15px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateX(8px);
}

.company-item.shine-nearby::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(139, 92, 246, 0.1) 100%);
    border-radius: inherit;
    animation: itemShimmer 1.5s ease-in-out infinite;
}

@keyframes itemShimmer {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
    }
}

/* Ambient light effect */
.experience-section-glow {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
        rgba(139, 92, 246, 0.1) 0%,
        rgba(139, 92, 246, 0.05) 30%,
        transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.experience-section-glow.active {
    opacity: 1;
}


/* Timeline dots proper positioning */
.timeline-dot {
    /* Fixed positioning for proper alignment */
    position: absolute;
    left: 1.5rem; /* 24px - mobile default */
    width: 1rem;
    height: 1rem;
    margin-top: 0.5rem;
}

/* Responsive adjustments - Fixed positioning issues */
@media (max-width: 768px) {
    .timeline-container {
        left: 2rem !important;
        transform: none !important;
    }
    
    .timeline-dot {
        left: 1.5rem !important;
        transform: none !important;
    }
    
    .experience-item .ml-16 {
        margin-left: 4rem !important;
    }
    
    /* Fix shine positioning on mobile */
    .timeline-shine {
        left: -6px;
    }
}

@media (min-width: 768px) {
    .timeline-container {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .timeline-dot {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 1rem;
    }
    
    /* Proper content alignment for desktop */
    .experience-item .md\:w-1\/2.md\:pr-8 {
        text-align: right;
    }
    
    .experience-item .md\:w-1\/2.md\:pl-8 {
        text-align: left;
    }
    
    /* Remove mobile margins on desktop */
    .experience-item .ml-16.md\:ml-0 {
        margin-left: 0 !important;
    }
    
    /* Fix shine positioning on desktop */
    .timeline-shine {
        left: -8px;
    }
}

/* Achievement items hover effect */
.achievement-item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.achievement-item::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.5s ease;
}

.achievement-item:hover::before {
    left: 100%;
}

.achievement-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

/* 
  ===================================================================
  Component: Project Card TV Effect
  ===================================================================
*/
.project-card .thumbnail-placeholder {
    position: relative;
    overflow: hidden;
    /* border-radius: 0.75rem; */ /* Removed as the parent card handles rounding */
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
    background: #0B0A12;
    will-change: transform, box-shadow, filter;
    height: 100%; /* Ensure it fills the parent height */
}

.project-card .thumbnail-placeholder::after {
    /* soft vignette to unify thumbnails */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.18) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.project-card .thumbnail-placeholder img,
.project-card .thumbnail-placeholder video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

/* subtle lift + softened shadow on hover */
.project-card:hover .thumbnail-placeholder {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    filter: saturate(1.03) brightness(1.02);
    z-index: 2;
}

/* gently reveal overlay vignette on hover */
.project-card:hover .thumbnail-placeholder::after {
    opacity: 1;
}

/* if there's a video inside, fade it in smoothly on hover */
.project-card .thumbnail-placeholder video {
    opacity: 0;
    transform: scale(1);
}

.project-card:hover .thumbnail-placeholder video {
    opacity: 1;
    transform: scale(1.01);
}

/* keep previous subtle entrance animation for cards */
.project-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* remove old heavy effects selectors (if present) */
.tv-off-overlay,
.tv-off-line,
.tv-static-effect,
.preview-overlay {
    display: none !important;
}

/* 
  ===================================================================
  Component: Logo Marquee - RESTORED
  ===================================================================
*/
.marquee-track {
    display: flex;
    flex-shrink: 0;
    /* Adjust duration for speed. 40s is a good starting point. */
    animation: marquee-scroll 40s linear infinite;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* The track is duplicated, so we move it by half its width for a seamless loop */
        transform: translateX(-50%);
    }
}

/* Pause animation on hover for better UX */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* Accessibility: Stop animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

/* --- RESTORED: Core Competencies Original Styles --- */
.skill-tag {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-tag:hover {
    background: linear-gradient(45deg, var(--display-start)/30, var(--display-end)/30);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

/* --- Mobile Skills Accordion Styles --- */
.skill-accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease;
}

.skill-accordion-item.active {
    background: rgba(255, 255, 255, 0.05);
}

.skill-accordion-header {
    cursor: pointer;
    color: var(--muted);
    transition: color 0.3s ease;
}

.skill-accordion-header:hover {
    color: var(--text);
}

.skill-accordion-item.active .skill-accordion-chevron {
    transform: rotate(180deg);
}


/* If a slideUpMobile animation is needed elsewhere, define it separately */
@keyframes slideUpMobile {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Re-style skill-tag-mobile for the new context */
.skill-tag-mobile {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
}

.skill-tag-mobile:active {
    transform: scale(0.95);
    background: linear-gradient(45deg, var(--display-start)/40, var(--display-end)/40);
}

/* 
  ===================================================================
  Component: Client Reviews - Interactive Horizontal Carousel
  ===================================================================
*/
.reviews-carousel-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    /* Hide scrollbar but keep functionality; use safe fallbacks */
    -ms-overflow-style: none; /* IE and Edge fallback */
}

/* Apply Firefox-specific scrollbar-width only where supported to avoid warnings in other browsers */
@supports (scrollbar-width: none) {
    .reviews-carousel-wrapper {
        /* Hide scrollbar in Firefox */
        scrollbar-width: none;
    }
}

.reviews-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.reviews-track {
    will-change: transform;
    padding: 0 2rem;
    /* Smooth momentum scrolling */
    scroll-behavior: smooth;
}

.review-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    will-change: transform, filter;
}

/* Hover effects with realistic lighting */
.review-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(139, 92, 246, 0.15);
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 100%);
    transition: left 0.8s ease;
    pointer-events: none;
}

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

/* Enhanced border glow on hover */
.review-card:hover.group {
    background: rgba(255, 255, 255, 0.03);
}

/* Profile avatar hover effects */
.review-card:hover .w-16.h-16 {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* Star rating glow */
.review-card:hover svg {
    filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.6));
}

/* Blockquote emphasis on hover */
.review-card:hover blockquote {
    color: rgba(255, 255, 255, 0.9);
}

/* Progress indicators */
.review-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-indicator:hover {
    transform: scale(1.5);
    background: var(--display-start) !important;
}

.review-indicator.active {
    background: var(--display-start) !important;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

/* Smooth scroll behavior for touch devices */
@media (hover: none) and (pointer: coarse) {
    .reviews-carousel-wrapper {
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
    }
    
    .review-card {
        scroll-snap-align: center;
    }
}

/* Animation for card entrance */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

.review-card {
    animation: cardSlideIn 0.6s ease-out forwards;
}

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }
.review-card:nth-child(5) { animation-delay: 0.5s; }

/* About Me Section Text Visibility Fix */
#about .about-header,
#about .about-content,
#about .about-subheading {
    color: var(--muted);
}


/* 
  ===================================================================
  Component: Footer / Social Bar - REVISED
  ===================================================================
*/
.glass-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.6rem 1.2rem; /* 10px 20px */
    border-radius: 9999px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--muted);
    
    /* Liquid Glass Effect */
    background-color: rgba(255, 255, 255, 0.175) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(13px) !important;
    backdrop-filter: blur(13px) !important;
    
    transition: all 0.3s ease-in-out;
}

.glass-button:hover {
    color: var(--text);
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 
                0 0 15px rgba(139, 92, 246, 0.1);
}

.glass-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}