/**
 * ============================================================================
 * BLAZE SPORTS INTEL - BRAND IDENTITY SYSTEM
 * ============================================================================
 * Version: 3.0.0
 * Description: Deep South sports aesthetic with Texas/SEC energy
 * Dependencies: blaze-design-system-enhanced.css
 * Last Updated: 2025-01-20
 * ============================================================================
 */

/**
 * ============================================================================
 * 1. STADIUM LIGHT GRADIENTS
 * ============================================================================
 * Atmospheric lighting effects inspired by Friday night lights
 */

/* Primary stadium light gradient (hero sections) */
.gradient-stadium-lights {
  background: linear-gradient(
    180deg,
    rgba(11, 14, 20, 1) 0%,           /* Dark sky top */
    rgba(26, 31, 44, 0.95) 20%,       /* Upper atmosphere */
    rgba(217, 98, 0, 0.15) 50%,       /* Burnt orange glow mid */
    rgba(168, 218, 220, 0.08) 70%,    /* Powder blue tint */
    rgba(11, 14, 20, 1) 100%          /* Dark field bottom */
  );
}

/* Horizontal stadium glow (section dividers) */
.gradient-stadium-glow-horizontal {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 98, 0, 0.3) 20%,
    rgba(217, 98, 0, 0.5) 50%,
    rgba(217, 98, 0, 0.3) 80%,
    transparent 100%
  );
  height: 2px;
  opacity: 0.6;
}

/* Radial stadium spotlight */
.gradient-stadium-spotlight {
  background: radial-gradient(
    ellipse at center,
    rgba(217, 98, 0, 0.2) 0%,
    rgba(217, 98, 0, 0.1) 30%,
    transparent 70%
  );
}

/* Night sky atmosphere */
.gradient-night-sky {
  background: linear-gradient(
    180deg,
    #000814 0%,           /* Deep midnight blue */
    #001d3d 30%,          /* Twilight */
    #0a0a0f 60%,          /* Our base dark */
    #0b0e14 100%          /* Slate-950 */
  );
}

/**
 * ============================================================================
 * 2. TEXAS LONGHORN BURNT ORANGE
 * ============================================================================
 * Official University of Texas burnt orange (#BF5700) enhanced for digital
 */

/* Burnt orange gradient (primary brand) */
.gradient-burnt-orange {
  background: linear-gradient(
    135deg,
    #D96200 0%,           /* Enhanced burnt orange */
    #BF5700 50%,          /* Official UT burnt orange */
    #8B3D00 100%          /* Darker burnt orange */
  );
}

/* Burnt orange with powder blue accent */
.gradient-burnt-powder {
  background: linear-gradient(
    135deg,
    #D96200 0%,
    #FF8C42 30%,
    #FFB81C 60%,
    #A8DADC 100%
  );
}

/* Burnt orange glow effect */
.glow-burnt-orange {
  box-shadow:
    0 0 20px rgba(217, 98, 0, 0.3),
    0 0 40px rgba(217, 98, 0, 0.15),
    0 0 60px rgba(217, 98, 0, 0.08);
}

/* Burnt orange text with gradient */
.text-burnt-orange-gradient {
  background: linear-gradient(135deg, #D96200 0%, #FF8C42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/**
 * ============================================================================
 * 3. SEC DOMINANCE THEME
 * ============================================================================
 * Colors representing SEC conference powerhouse energy
 */

/* SEC Championship gradient (burgundy to burnt orange) */
.gradient-sec-championship {
  background: linear-gradient(
    135deg,
    #660000 0%,           /* Deep SEC burgundy */
    #8B0000 25%,          /* Crimson */
    #BF5700 75%,          /* Burnt orange */
    #D96200 100%          /* Enhanced orange */
  );
}

/* SEC athletic department gold */
.gradient-sec-gold {
  background: linear-gradient(
    135deg,
    #FFB81C 0%,           /* Blaze accent gold */
    #FFC627 50%,
    #FFCB5C 100%
  );
}

/* Conference pride stripes */
.stripe-sec-pride {
  background: repeating-linear-gradient(
    45deg,
    #BF5700,
    #BF5700 10px,
    #FFB81C 10px,
    #FFB81C 20px
  );
}

/**
 * ============================================================================
 * 4. DEEP SOUTH HUMIDITY & HEAT
 * ============================================================================
 * Atmospheric effects capturing the intensity of southern summers
 */

/* Heat shimmer overlay */
.overlay-heat-shimmer {
  position: relative;
  overflow: hidden;
}

.overlay-heat-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 140, 66, 0.1) 50%,
    transparent 100%
  );
  animation: heat-shimmer 3s ease-in-out infinite;
}

@keyframes heat-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Humid atmosphere gradient */
.gradient-humid-atmosphere {
  background: linear-gradient(
    180deg,
    rgba(168, 218, 220, 0.05) 0%,    /* Powder blue mist top */
    transparent 30%,
    transparent 70%,
    rgba(217, 98, 0, 0.05) 100%      /* Orange heat bottom */
  );
}

/**
 * ============================================================================
 * 5. FRIDAY NIGHT LIGHTS AESTHETIC
 * ============================================================================
 * High school football atmosphere with intense community energy
 */

/* FNL hero banner */
.hero-friday-night-lights {
  background:
    linear-gradient(
      180deg,
      rgba(0, 8, 20, 0.9) 0%,
      rgba(0, 8, 20, 0.7) 50%,
      rgba(0, 8, 20, 0.95) 100%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(217, 98, 0, 0.3) 0%,
      transparent 60%
    );
  position: relative;
}

/* Floodlight beam effect */
.floodlight-beam {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 100%
  );
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}

/* Scoreboard LED glow */
.glow-scoreboard-led {
  text-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px rgba(255, 255, 255, 0.5);
  animation: led-flicker 0.15s ease-in-out infinite alternate;
}

@keyframes led-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

/**
 * ============================================================================
 * 6. TEXAS HERITAGE PATTERNS
 * ============================================================================
 * Subtle textures inspired by Texas flag and western aesthetics
 */

/* Lone star pattern (subtle background) */
.pattern-lone-star {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217, 98, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 218, 220, 0.02) 0%, transparent 50%);
  background-size: 400px 400px;
  background-position: 0 0, 200px 200px;
}

/* Western rope border */
.border-rope {
  border: 2px solid;
  border-image: repeating-linear-gradient(
    45deg,
    #8B3D00,
    #8B3D00 5px,
    #BF5700 5px,
    #BF5700 10px
  ) 1;
}

/* Leather texture overlay */
.texture-leather {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(139, 61, 0, 0.03) 0px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(139, 61, 0, 0.03) 0px,
      transparent 2px,
      transparent 4px
    );
}

/**
 * ============================================================================
 * 7. CHAMPIONSHIP TROPHY GOLD
 * ============================================================================
 * Metallic gold effects for championship-level content
 */

/* Championship gold gradient */
.gradient-championship-gold {
  background: linear-gradient(
    135deg,
    #FFD700 0%,           /* Gold */
    #FFC627 25%,
    #FFB81C 50%,          /* Blaze gold */
    #FFD700 75%,
    #FFCB5C 100%
  );
}

/* Metallic shine effect */
.shine-metallic {
  position: relative;
  overflow: hidden;
}

.shine-metallic::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: metallic-shine 3s ease-in-out infinite;
}

@keyframes metallic-shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Trophy engraving effect */
.text-engraved {
  color: #FFB81C;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 -1px 0 rgba(255, 255, 255, 0.2),
    1px 0 0 rgba(0, 0, 0, 0.3),
    -1px 0 0 rgba(255, 255, 255, 0.1);
}

/**
 * ============================================================================
 * 8. FIELD TURF & CHALK LINES
 * ============================================================================
 * Athletic field aesthetics for backgrounds
 */

/* Artificial turf texture */
.texture-turf {
  background-color: #1a4d2e;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    );
}

/* Chalk line divider */
.divider-chalk-line {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 10%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.8) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* End zone pattern */
.pattern-end-zone {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(217, 98, 0, 0.1) 0px,
      rgba(217, 98, 0, 0.1) 20px,
      transparent 20px,
      transparent 40px
    );
}

/**
 * ============================================================================
 * 9. HERO SECTION COMPOSITIONS
 * ============================================================================
 * Pre-built hero section styles
 */

/* Championship hero (main landing page) */
.hero-championship {
  min-height: 60vh;
  background:
    linear-gradient(
      180deg,
      rgba(11, 14, 20, 0.85) 0%,
      rgba(11, 14, 20, 0.95) 100%
    ),
    radial-gradient(
      ellipse at center top,
      rgba(217, 98, 0, 0.2) 0%,
      transparent 60%
    ),
    var(--color-slate-950);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-championship::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-brand-primary) 50%,
    transparent 100%
  );
  opacity: 0.5;
}

/* Live games hero (smaller, focused) */
.hero-live-games {
  min-height: 30vh;
  background:
    linear-gradient(
      135deg,
      rgba(255, 45, 85, 0.1) 0%,
      rgba(11, 14, 20, 1) 50%
    );
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--rhythm-xl) var(--rhythm-md);
}

/* Analytics hero (data-focused) */
.hero-analytics {
  min-height: 40vh;
  background:
    linear-gradient(
      to bottom,
      rgba(11, 14, 20, 1) 0%,
      rgba(26, 31, 44, 0.98) 50%,
      rgba(11, 14, 20, 1) 100%
    );
  position: relative;
}

/**
 * ============================================================================
 * 10. TIGHT PALETTE SYSTEM (2 Neutrals + 2 Accents)
 * ============================================================================
 * Restricted color usage for brand consistency
 */

/* Neutral 1: Slate Gray (primary background) */
.bg-neutral-primary {
  background: var(--color-slate-950);
}

.text-neutral-primary {
  color: var(--color-text-primary);
}

/* Neutral 2: Slate Gray 900 (secondary background) */
.bg-neutral-secondary {
  background: var(--color-slate-900);
}

.text-neutral-secondary {
  color: var(--color-text-secondary);
}

/* Accent 1: Burnt Orange (primary brand) */
.bg-accent-primary {
  background: var(--color-brand-primary);
}

.text-accent-primary {
  color: var(--color-brand-primary);
}

.border-accent-primary {
  border-color: var(--color-brand-primary);
}

/* Accent 2: Electric Red (LIVE indicator only) */
.bg-accent-live {
  background: var(--color-live-primary);
}

.text-accent-live {
  color: var(--color-live-primary);
}

.border-accent-live {
  border-color: var(--color-live-primary);
}

/**
 * ============================================================================
 * 11. BRAND CONSISTENCY UTILITIES
 * ============================================================================
 * Helper classes for maintaining tight palette
 */

/* Brand-compliant card */
.card-branded {
  background: var(--glass-surface-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.card-branded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-brand);
}

/* Brand-compliant button */
.btn-branded {
  background: var(--gradient-brand);
  color: white;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 32px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
  box-shadow:
    0 4px 12px rgba(217, 98, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-branded:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(217, 98, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Brand-compliant heading */
.heading-branded {
  font-family: var(--font-heading);
  background: var(--gradient-burnt-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/**
 * ============================================================================
 * 12. ATMOSPHERIC PARTICLES
 * ============================================================================
 * Subtle motion for depth
 */

/* Stadium dust particles */
@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-30px) translateX(-5px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) translateX(15px);
    opacity: 0.6;
  }
}

.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float-particle 8s ease-in-out infinite;
}

.particle:nth-child(2) { animation-delay: 1s; left: 20%; }
.particle:nth-child(3) { animation-delay: 2s; left: 40%; }
.particle:nth-child(4) { animation-delay: 3s; left: 60%; }
.particle:nth-child(5) { animation-delay: 4s; left: 80%; }

/**
 * ============================================================================
 * 13. RESPONSIVE BRAND ADJUSTMENTS
 * ============================================================================
 * Mobile-specific brand treatments
 */

@media (max-width: 767px) {
  /* Reduce gradient intensity on mobile */
  .gradient-stadium-lights {
    background: linear-gradient(
      180deg,
      rgba(11, 14, 20, 1) 0%,
      rgba(26, 31, 44, 0.98) 40%,
      rgba(217, 98, 0, 0.08) 50%,
      rgba(11, 14, 20, 1) 100%
    );
  }

  /* Simplify hero sections */
  .hero-championship {
    min-height: 40vh;
  }

  /* Disable particles for performance */
  .particle-container {
    display: none;
  }

  /* Reduce shimmer effects */
  .overlay-heat-shimmer::after {
    animation: none;
  }
}

/**
 * ============================================================================
 * 14. PRINT-FRIENDLY BRAND
 * ============================================================================
 * Ensure brand identity in printed materials
 */

@media print {
  .gradient-burnt-orange,
  .gradient-stadium-lights,
  .gradient-sec-championship {
    background: #BF5700 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .text-burnt-orange-gradient {
    color: #BF5700 !important;
    -webkit-text-fill-color: #BF5700 !important;
  }

  .hero-championship,
  .hero-live-games,
  .hero-analytics {
    min-height: auto;
    padding: 2rem;
    page-break-inside: avoid;
  }
}

/**
 * ============================================================================
 * END BRAND IDENTITY SYSTEM
 * ============================================================================
 */