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

/* =========================
   NAVBAR DESIGN SYSTEM
========================= */
@layer components {

  .nav-link {
    @apply font-medium text-[14px] uppercase tracking-[1px] text-[#454240] transition-all duration-300;
    font-family: 'Inter', sans-serif;
  }

  .nav-link:hover {
    background: linear-gradient(to right, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .mobile-link {
    @apply font-medium text-[18px] uppercase tracking-[1px] text-[#454240];
    font-family: 'Inter', sans-serif;
  }

  .btn-primary {
    @apply px-6 py-2 rounded-lg text-white text-sm uppercase tracking-[1px] font-medium transition-all duration-300;
    background: linear-gradient(to right, #3b82f6, #1d4ed8);
  }

  .btn-primary:hover {
    @apply opacity-90;
  }
}

@layer utilities {
  .navbar-scrolled {
    border-bottom: 1px solid #EBEBEB;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
}

/* Custom CSS Variables - Light Theme */
:root {
    --titans-black: #111827;
    --bg-primary: #F8F9FA;
    --bg-secondary: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --border-color: #E5E7EB;
}

/* Base Styles */
@layer base {
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
}

/* Custom Components - Light Theme */
@layer components {
    .hero-title {
        font-size: clamp(4rem, 15vw, 10rem);
        line-height: 0.85;
        letter-spacing: -0.08em;
        font-weight: 900;
        text-transform: uppercase;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .cta-button {
        @apply inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-bold text-lg uppercase tracking-wider transition-all duration-300;
        box-shadow: 0 10px 30px rgba(220, 38, 38, 0.25);
        color: white;
    }
    .cta-button:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(220, 38, 38, 0.35);
    }

    /* Stats Card - Light */
    /* Stats Card - Premium Light Metallic Style (Matches your reference image) */
.stats-card {
    @apply relative overflow-hidden rounded-3xl border p-8 text-center;
    background: linear-gradient(145deg, #f8fafc, #e2e8f0, #f1f5f9);
    border: 1px solid #e2e8f0;
    box-shadow:
        0 10px 30px -10px rgb(0 0 0 / 0.08),
        inset 0 3px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    filter: blur(14px);
}



.stats-card.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.stats-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 45px -15px rgb(220 38 38 / 0.18),
        inset 0 3px 0 rgba(255, 255, 255, 0.95);
    border-color: #fcd34d40; /* subtle gold tint on hover */
}

/* Large number gradient for better visual pop */
.stats-card .text-6xl {
    background: linear-gradient(90deg, #f59e0b, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

    /* Registration Card - Light */
    .registration-card {
        @apply relative overflow-hidden rounded-3xl border p-10;
        background: var(--bg-secondary);
        border-color: var(--border-color);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    }

    /* Form Input - Light */
    .form-input {
        @apply w-full px-4 py-3 rounded-xl border bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:border-titans-red focus:ring-2 focus:ring-titans-red/20 transition-all;
    }
}

/* Custom Utilities */
@layer utilities {
    .floating-element {
        position: fixed;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        opacity: 0.15;
        animation: float 10s infinite ease-in-out;
        z-index: 1;
        pointer-events: none;
    }

    .hero-reveal-item {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.22, 0.68, 0, 1);
    }
}


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

/* Color Classes */