/* ========================================
   PREMIUM VISUAL EFFECTS & ANIMATIONS
   FORCE APPLY WITH !IMPORTANT
   ======================================== */

/* HERO Z-INDEX FIX - CRITICAL FOR VISIBILITY */
.hero {
    position: relative;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 100 !important;
    /* Ensure content is above all effects */
}

/* GLASSMORPHISM NAVBAR - FORCE */
.header {
    background: rgba(0, 0, 0, 0.45) !important;
    /* Darker initial state for text visibility */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s ease !important;
}

.header.scrolled {
    background: rgba(10, 10, 10, 0.95) !important;
    /* Solid dark background when scrolled */
    backdrop-filter: blur(30px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Force Nav Links White for Visibility */
.nav-link {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* CRISP WHITE TEXT FOR READABILITY */
.hero-title .title-line:nth-child(1),
.hero-title .title-line:nth-child(2) {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    animation: none !important;
    /* Strong drop shadow for contrast */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)) !important;
    font-weight: 800 !important;
}

.hero-title .title-line.accent {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffd700 !important;
    color: #ffd700 !important;
    animation: none !important;
    /* Premium Glow */
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9)) !important;
}

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

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

/* HERO SUBTITLE - HIGH CONTRAST */
.hero-subtitle {
    color: #ffffff !important;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 0.8) !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    opacity: 1 !important;
}

/* FLOATING PARTICLES - BEHIND CONTENT */
.particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    /* Changed from 1 to 10, but hero-content is 100 */
}

.particle {
    position: absolute;
    width: 6px;
    /* Slightly larger */
    height: 6px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: float-up 20s infinite linear;
    opacity: 0;
}

@keyframes float-up {
    0% {
        transform: translateY(100vh) translateX(0) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100px) translateX(100px) scale(1);
        opacity: 0;
    }
}

/* CURSOR SPOTLIGHT - BEHIND CONTENT */
.cursor-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    /* Behind content */
    transition: background 0.1s ease;
    /* Faster response */
    opacity: 0.6;
}

/* PREMIUM BUTTONS */
.hero-buttons {
    position: relative;
    z-index: 101 !important;
}

.hero-buttons .btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

.hero-buttons .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 70%);
    background-size: 200% 200%;
    animation: button-shine 3s infinite;
}

@keyframes button-shine {
    0% {
        background-position: -200% 0;
    }

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

.hero-buttons .btn-primary {
    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    border: none !important;
}

.hero-buttons .btn-primary:hover {
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

.hero-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
}

.hero-buttons .btn-secondary:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* PREMIUM NAVBAR HOVER EFFECTS & MOBILE MENU */
.nav-link {
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    position: relative;
    padding: 5px 0;
    transition: all 0.3s ease !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.nav-link:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    transform: translateY(-1px);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    background: linear-gradient(135deg, #ffd700, #fff0a0, #ffd700) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700 !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4)) !important;
}

.nav-link.active::after {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ffffff, #ffd700);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* MOBILE MENU OVERRIDES - FULL SCREEN GLASSMORPHISM */
@media (max-width: 768px) {
    .nav {
        top: 0 !important;
        height: 100vh !important;
        padding-top: 100px !important;
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        justify-content: flex-start !important;
        gap: 2rem !important;
        border-right: 1px solid rgba(255, 215, 0, 0.2);
    }

    .nav-link {
        font-size: 1.5rem !important;
        text-align: center;
        width: 100%;
        color: #ffffff !important;
    }

    .nav-link:hover {
        transform: scale(1.1);
        color: #ffd700 !important;
    }
}

/* CRITICAL: RESTORED TEXT REVEAL ANIMATION */
@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(5px);
    }

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