@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Component Styles */
@layer components {
    /* Navigation Links */
    .nav-link {
        @apply text-text-secondary hover:text-text-primary transition-all duration-300 font-medium relative;
    }
    
    .nav-link.active {
        @apply text-accent-blue-primary;
    }
    
    .nav-link::after {
        @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-accent-blue-primary transition-all duration-300;
        content: '';
    }
    
    .nav-link.active::after,
    .nav-link:hover::after {
        @apply w-full;
    }
    
    /* Mobile Navigation Links */
    .mobile-nav-link {
        @apply block px-4 py-3 text-text-secondary hover:text-text-primary hover:bg-glass-blue rounded-xl transition-all duration-300 font-medium;
    }
    
    .mobile-nav-link.active {
        @apply text-accent-blue-primary bg-glass-blue;
    }
    
    /* Primary Button */
    .btn-primary {
        @apply glass-blue hover:bg-accent-blue-primary/20 text-accent-blue-primary hover:text-text-primary px-6 py-2.5 rounded-xl font-semibold transition-all duration-300 hover:shadow-glow hover:scale-105;
    }
    
    /* Secondary Button */
    .btn-secondary {
        @apply glass hover:bg-text-primary/10 text-text-primary px-6 py-2.5 rounded-xl font-semibold transition-all duration-300 hover:shadow-glass border border-dark-border;
    }
    
    /* Footer Links */
    .footer-link {
        @apply text-text-secondary hover:text-accent-blue-primary transition-colors duration-300;
    }
    
    /* Social Links */
    .social-link {
        @apply glass p-3 rounded-xl text-text-secondary hover:text-accent-blue-primary hover:bg-glass-blue transition-all duration-300 hover:scale-110;
    }
    
    /* Card Components */
    .card {
        @apply glass-dark rounded-2xl p-6 hover:shadow-glow transition-all duration-300;
    }
    
    .card-header {
        @apply mb-6;
    }
    
    .card-title {
        @apply font-heading text-xl font-semibold text-text-primary mb-2;
    }
    
    .card-subtitle {
        @apply text-text-secondary text-sm;
    }
    
    .card-content {
        @apply text-text-secondary leading-relaxed;
    }
    
    /* Section Styling */
    .section {
        @apply py-16 lg:py-24;
    }
    
    .section-title {
        @apply font-heading text-3xl lg:text-4xl font-bold text-text-primary mb-4 text-glow;
    }
    
    .section-subtitle {
        @apply text-lg text-text-secondary mb-8 max-w-2xl mx-auto text-center;
    }
    
    /* Input Styling */
    .form-input {
        @apply glass-dark border-dark-border focus:border-accent-blue-primary focus:ring-accent-blue-primary/20 text-text-primary placeholder-text-secondary rounded-xl transition-all duration-300;
    }
    
    .form-label {
        @apply block text-sm font-medium text-text-primary mb-2;
    }
    
    .form-error {
        @apply text-red-400 text-sm mt-1;
    }
    
    /* Animation Classes */
    .fade-in {
        @apply opacity-0 transform translate-y-8;
    }
    
    .scale-in {
        @apply opacity-0 transform scale-95;
    }
    
    .slide-up {
        @apply opacity-0 transform translate-y-12;
    }
    
    /* Utility Classes */
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }
    
    .grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .grid-auto-fill {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    /* Background Patterns */
    .bg-pattern {
        background-image: 
            radial-gradient(circle at 25% 25%, rgba(0, 163, 255, 0.1) 0%, transparent 25%),
            radial-gradient(circle at 75% 75%, rgba(0, 123, 255, 0.1) 0%, transparent 25%);
        background-size: 60px 60px;
    }
    
    .bg-dots {
        background-image: radial-gradient(circle, rgba(0, 163, 255, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }
    
    /* Scrollbar Styling */
    .scrollbar-custom::-webkit-scrollbar {
        width: 6px;
    }
    
    .scrollbar-custom::-webkit-scrollbar-track {
        background: rgba(22, 23, 41, 0.3);
    }
    
    .scrollbar-custom::-webkit-scrollbar-thumb {
        background: rgba(0, 163, 255, 0.3);
        border-radius: 3px;
    }
    
    .scrollbar-custom::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 163, 255, 0.5);
    }
}

/* Custom Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 163, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 163, 255, 0.6);
    }
}

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

/* Alpine.js Cloak */
[x-cloak] {
    display: none !important;
}

/* Advanced Visual Effects & Utilities */
@layer components {
    /* Shine sweep on hover */
    .shine { position: relative; overflow: hidden; }
    .shine::after {
        content: "";
        position: absolute;
        inset: -1px;
        background-image: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
        transform: translateX(-120%);
        transition: transform 800ms ease;
        pointer-events: none;
    }
    .group:hover .shine::after { transform: translateX(120%); }
    .shine:hover::after { transform: translateX(120%); }

    /* 3D tilt on hover */
    .tilt-container { perspective: 1000px; }
    .tilt-3d {
        transform-style: preserve-3d;
        transition: transform 300ms ease, box-shadow 300ms ease;
        will-change: transform;
    }
    @media (hover: hover) and (pointer: fine) {
        .group:hover .tilt-3d { transform: rotateX(6deg) rotateY(-6deg) translateY(-4px); }
    }

    /* Corner accents */
    .corner-accent { position: absolute; width: 24px; height: 24px; pointer-events: none; }
    .corner-accent-tl { top: 10px; left: 10px; border-top: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); border-top-left-radius: 8px; }
    .corner-accent-br { bottom: 10px; right: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); border-bottom-right-radius: 8px; }

    /* Particles */
    .particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .particle {
        position: absolute;
        width: 6px; height: 6px; border-radius: 9999px;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(0,163,255,0.5) 40%, rgba(0,163,255,0.25) 70%, transparent 80%);
        filter: drop-shadow(0 0 6px rgba(0,163,255,0.4));
        animation: particleFloat var(--dur, 9s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        left: var(--x); top: var(--y);
        transform: translate(0, 0);
    }

    /* Reveal utility for staggered entrances */
    .reveal-up { @apply opacity-0 translate-y-6; }

    /* Badges & Variants */
    .badge { @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold; }
    .badge-accent { @apply bg-accent-blue-primary/10 text-accent-blue-primary border border-accent-blue-primary/20; }

    .card-variant-primary { @apply glass-blue border border-accent-blue-primary/20; }
    .card-variant-dark { @apply glass-dark border border-dark-border; }

    /* Filter chips */
    .chip { @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm text-text-secondary bg-glass-blue hover:text-accent-blue-primary hover:bg-accent-blue-primary/15 border border-accent-blue-primary/10 transition-colors; }
    .chip-active { @apply text-accent-blue-primary bg-accent-blue-primary/20 border-accent-blue-primary/30; }

    /* Tags for job skills/meta */
    .tag { @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs bg-glass-blue text-text-secondary border border-accent-blue-primary/10; }

    /* Job cards */
    .job-card { @apply card card-variant-dark shine tilt-container; }
    .job-card .inner { @apply tilt-3d; }
    .job-card--featured { @apply card-variant-primary; }
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(var(--dx, 0px), var(--dy, -20px)) scale(1.05); }
}