/* General Body Styles */
body {
    background-color: #000000; /* Solid black is now the base */
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* NEW: Apply gradient to a fixed pseudo-element for mobile compatibility */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* UPDATED: Gradient now fades to black at 100% instead of 80% */
    background-image: linear-gradient(to bottom right, rgba(6, 182, 212, 0.5) 0%, #000000 100%);
    background-repeat: no-repeat;
    z-index: -2; /* Place behind the texture */
}


/* Background texture pseudo-element */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* This assumes you have saved the logo you uploaded
      to this path in your project: /assets/images/image_1bcd79.png
    */
    background-image: url('../images/image_1bcd79.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.03; 
    z-index: -1; /* Place in front of the gradient, behind content */
}

/* Apply the title font to all headers */
h1, h2, h3, .font-title {
    font-family: 'Saira Semi Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* --- THEME COLORS --- */

/* Background for main cards and containers */
.gotham-bg {
    background-color: #111111;
}

/* Background for highlighted elements within cards */
.gotham-bg-highlight {
    background-color: #222222;
}

/* The primary accent color for text, borders, etc. */
.gotham-accent {
    color: #22d3ee;
}

/* Border color for separating elements */
.gotham-border {
    border-color: #333333;
}

/* Enhanced hover effect for player cards */
.player-card-link .gotham-bg {
     /* Make all transitions smooth. 
       We target the inner div so the whole link doesn't "glow".
     */
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.player-card-link:hover .gotham-bg {
    transform: scale(1.05); /* The zoom effect */
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.4); /* The cyan glow */
    border-color: #22d3ee; /* Brighten border on hover */
}


/* Primary button styles */
.gotham-button {
    background-color: #06b6d4;
    color: #ffffff;
    transition: background-color 0.2s;
    font-family: 'Saira Semi Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gotham-button:hover {
    background-color: #0891b2;
}

/* Secondary button styles (outline) */
.gotham-button-secondary {
    border: 2px solid #06b6d4;
    color: #22d3ee;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Saira Semi Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gotham-button-secondary:hover {
    background-color: #06b6d4;
    color: #ffffff;
}

/* --- NEW: Scroll-in Animation --- */
.fade-in-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    /* Stagger the animation using a CSS variable */
    transition-delay: var(--delay, 0s);
}

.fade-in-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- CUSTOM SCROLLBAR --- */
* {
  scrollbar-width: thin;
  scrollbar-color: #333333 #111111;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111111;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #333333;
  border-radius: 10px;
  border: 2px solid #111111;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #4B5563;
}