/* ==========================================================
   Casino Booking Agency — style.css
   Design tokens (CSS variables) + custom animations that
   Tailwind's CDN build can't generate on its own.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* BRAND COLORS */
  --primary: #D4AF37;
  --primary-light: #F6D365;
  --primary-dark: #C9A227;
  --primary-deep: #8B6B1F;

  /* ACCENT COLORS */
  --accent: #FFE8A3;
  --accent-bronze: #B8860B;

  /* BACKGROUND COLORS */
  --bg: #0D0D0D;
  --bg-secondary: #111111;
  --bg-tertiary: #1A1A1A;
  --surface: #222222;
  --surface-light: #2D2D2D;

  /* TEXT COLORS */
  --text-primary: #FFFFFF;
  --text-secondary: #D9D9D9;
  --text-muted: #9A9A9A;
  --text-gold: #F6D365;

  /* BORDER COLORS */
  --border: rgba(212, 175, 55, 0.25);
  --border-light: rgba(255, 232, 163, 0.35);
  --border-dark: rgba(255, 255, 255, 0.08);

  /* GRADIENTS */
  --gradient-gold: linear-gradient(135deg, #8B6B1F 0%, #C9A227 25%, #D4AF37 50%, #F6D365 75%, #FFE8A3 100%);
  --gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #111111 50%, #0D0D0D 100%);
  --gradient-premium: linear-gradient(145deg, #0D0D0D 0%, #1A1A1A 45%, #111111 100%);
  --gradient-button: linear-gradient(135deg, #C9A227 0%, #D4AF37 50%, #F6D365 100%);

  /* SHADOWS */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 0 18px rgba(212, 175, 55, 0.35);
  --shadow-gold-lg: 0 0 35px rgba(212, 175, 55, 0.45);

  /* GLOW EFFECTS */
  --glow-gold: 0 0 12px rgba(246, 211, 101, 0.55);
  --glow-hover: 0 0 25px rgba(212, 175, 55, 0.6);

  /* BUTTON COLORS */
  --btn-primary-bg: var(--gradient-button);
  --btn-primary-text: #111111;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--primary);
  --btn-secondary-border: var(--primary);

  /* LINK COLORS */
  --link: #F6D365;
  --link-hover: #FFE8A3;

  /* STATUS COLORS */
  --success: #39C46A;
  --warning: #FFB800;
  --danger: #E74C3C;
  --info: #3498DB;

  /* CARD */
  --card-bg: rgba(26, 26, 26, 0.95);
  --card-border: rgba(212, 175, 55, 0.18);
  --card-hover-border: rgba(246, 211, 101, 0.45);

  /* GLASS EFFECT */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(18px);

  /* BORDER RADIUS */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* TRANSITIONS */
  --transition-fast: 0.2s ease;
  --transition: 0.35s ease;
  --transition-slow: 0.5s ease;

  /* TYPOGRAPHY */
  --font-heading: "Cinzel", serif;
  --font-body: "Montserrat", sans-serif;
}

/* ==========================================================
   BASE
   ========================================================== */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}

::selection { background: var(--primary); color: #111; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gradient-gold); border-radius: var(--radius-pill); }

/* Accessible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

/* ==========================================================
   REUSABLE UTILITY CLASSES
   ========================================================== */
.text-gold { color: var(--text-gold); }
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-premium { background: var(--gradient-premium); }
.bg-gradient-dark { background: var(--gradient-dark); }

.border-gold { border-color: var(--border); }

.divider-gold {
  width: 64px;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--radius-pill);
}

/* Glassmorphism panel */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Card */
.card-premium {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.card-premium:hover {
  transform: translateY(-6px);
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-gold-lg);
}

/* Buttons */
.btn-primary-gold {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-gold);
  transition: box-shadow var(--transition), transform var(--transition-fast);
}
.btn-primary-gold:hover {
  box-shadow: var(--glow-hover);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1.5px solid var(--btn-secondary-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition);
}
.btn-outline-gold:hover {
  background: var(--primary);
  color: #111;
  box-shadow: var(--glow-gold);
}

/* ==========================================================
   NAVBAR
   ========================================================== */
#navbar {
  transition: background-color var(--transition), box-shadow var(--transition), padding var(--transition);
}
#navbar.scrolled {
  background-color: rgba(13, 13, 13, 0.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--border-dark);
}

.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--gradient-gold);
  transition: width var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ==========================================================
   HERO
   ========================================================== */
.hero-video-overlay {
  background: linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.75) 55%, rgba(13,13,13,0.97) 100%);
}

.hero-badge {
  animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Shimmer sweep across hero heading */
.shimmer-text {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 20%, var(--primary-light) 40%, var(--primary) 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% center; }
}

/* ==========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.92); }

[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* stagger helper via inline style --delay */
[data-reveal] { transition-delay: var(--delay, 0s); }

/* ==========================================================
   FLOATING BUTTONS
   ========================================================== */
.floating-btn {
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition);
}
.floating-btn:hover { transform: scale(1.08); }

.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(57, 196, 106, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(57, 196, 106, 0); }
}

/* ==========================================================
   SCROLL PROGRESS BAR
   ========================================================== */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-gold);
  z-index: 100;
  box-shadow: var(--glow-gold);
}

/* ==========================================================
   FAQ ACCORDION
   ========================================================== */
.faq-item { border-bottom: 1px solid var(--border-dark); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow) ease, padding var(--transition);
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-icon { transition: transform var(--transition); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ==========================================================
   TESTIMONIAL STARS
   ========================================================== */
.star-gold { color: var(--primary-light); filter: drop-shadow(0 0 4px rgba(246,211,101,0.5)); }

/* ==========================================================
   LOADER
   ========================================================== */
#page-loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.loaded { opacity: 0; visibility: hidden; }

.loader-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--border-dark);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================
   BACK TO TOP
   ========================================================== */
#back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition-fast);
}
#back-to-top.show { opacity: 1; pointer-events: auto; }

/* ==========================================================
   COUNTER SECTION
   ========================================================== */
.counter-value { font-variant-numeric: tabular-nums; }

/* ==========================================================
   GAME CARD (image hover)
   ========================================================== */
.game-card img {
  transition: transform var(--transition-slow);
}
.game-card:hover img { transform: scale(1.08); }

/* ==========================================================
   FORM ELEMENTS
   ========================================================== */
.input-premium {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-dark);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-premium:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
  outline: none;
}
.input-premium::placeholder { color: var(--text-muted); }

.form-status { transition: opacity var(--transition); }

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}