/* ---------------------------------
   TAILWIND CORE IMPORTS
-----------------------------------*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------
   GLOBAL VARIABLES & BASE STYLES
-----------------------------------*/
:root {
  --accent: #b8860b; /* Tango Force dark gold */
}

body {
  background-color: #111827; /* deep charcoal */
  color: #fff;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

nav {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ---------------------------------
   TYPOGRAPHY
-----------------------------------*/
.billboard {
  font-family: 'Anton', 'Impact', sans-serif;
  letter-spacing: -0.02em;
}

/* Optional: metallic gold gradient text (for hero headings) */
.gold-gradient {
  background: linear-gradient(to bottom, #b8860b, #d4af37, #ffecb3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------
   HERO POSITION ADJUSTMENTS
-----------------------------------*/
.top-1\/3 { top: 60%; }
.top-1\/4 { top: 70%; }
.top-1\/5 { top: 80%; }

@media (min-width: 900px) {
  .md\:text-7xl { font-size: 8rem; }
  .top-1\/6 { top: 65%; }
}

@media (max-width: 800px) {
  .md\:text-7xl { font-size: 3.8rem; }

  img, video { max-width: 46vh; }

  .top-1\/3 { top: 57%; }
  .top-1\/4 { top: 69%; }
  .top-1\/5 { top: 87%; }
  .top-1\/6 { top: 66%; }

  .h-screen,
  .h-full { height: 78vh !important; }
}

/* ---------------------------------
   MARQUEE ANIMATION
-----------------------------------*/
@keyframes tf-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: tf-marquee 25s linear infinite;
  will-change: transform;
}

/* Pause marquee when hovered */
.pause-on-hover:hover .marquee-track {
  animation-play-state: paused;
}

/* ---------------------------------
   ACCENT UTILITIES
-----------------------------------*/
.text-accent   { color: var(--accent); }
.bg-accent     { background-color: var(--accent); color: #1f2937; }
.border-accent { border-color: var(--accent); }

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(184, 134, 11, 0.45);
}

/* Subtle gold glow for marquee text */
.accent-glow span {
  text-shadow: 0 0 4px rgba(184, 134, 11, 0.5);
}

/* ---------------------------------
   EDGE FADE MASK FOR MARQUEE
-----------------------------------*/
.edge-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------------------------------
   GOLD TEXT SHIMMER ANIMATION
-----------------------------------*/
@keyframes goldShine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

.animate-goldShine {
  background-size: 100% 200%;
  animation: goldShine 5s ease-in-out infinite;
}