/* ==========================================================================
   Rey Visuals - Palette:
   - Pure Black (Đen đồng bộ): #000000
   - Dusk Blue (Sáng): #415A77, #778DA9, #E0E1DD
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/MONTSERRAT-MEDIUM.OTF') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #000000;
  --color-surface: #1B263B;
  --color-surface-hover: #22334A;
  --color-accent: #415A77;
  --color-accent-light: #778DA9;
  --color-accent-pale: #E0E1DD;
  --color-orange-primary: #415A77;
  --color-orange-secondary: #415A77;
  --color-orange-amber: #778DA9;
  --color-teal-bright: #415A77;
  --color-teal-medium: #1B263B;
  --color-teal-deep: #000000;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: #E0E1DD;
  overflow-x: hidden;
  selection-background-color: #415A77;
  selection-color: #ffffff;
}

::selection {
  background-color: #415A77;
  color: #FFFFFF;
}

.font-sans {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.font-heading {
  font-family: 'Montserrat', sans-serif !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: #415A77;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #778DA9;
}

/* Glassmorphism & Accent Glows */
.glass-panel {
  background: rgba(14, 14, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(65, 90, 119, 0.25);
}

.glass-panel:hover {
  border-color: rgba(65, 90, 119, 0.6);
}

.glow-accent {
  box-shadow: 0 0 35px -5px rgba(65, 90, 119, 0.45);
}

.text-gradient-accent {
  background: linear-gradient(135deg, #778DA9 0%, #415A77 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cinematic Vignette Overlay */
.cinematic-vignette {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 85%, rgba(0, 0, 0, 0.98) 100%);
}

/* Video Card Aspect Ratios */
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-9-16 {
  aspect-ratio: 9 / 16;
}

/* Partner Logo Grayscale Filter with Hover Reveal */
.partner-logo-img {
  filter: grayscale(100%) brightness(0.85) contrast(1.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.partner-logo-img:hover {
  filter: grayscale(0%) brightness(1) contrast(1);
  transform: scale(1.05);
}

/* Shimmer Animation for Updating / Coming Soon Badges */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-badge {
  background: linear-gradient(90deg, rgba(65, 90, 119, 0.15) 0%, rgba(65, 90, 119, 0.45) 50%, rgba(65, 90, 119, 0.15) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

/* Subtle Grid Background Pattern */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* ==========================================================================
   Header: Pure Black with 90% Translucency (Shows video background clearly)
   ========================================================================== */
.header-blur-90,
.header-blur-85,
.header-blur-5 {
  background-color: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.aspect-21-9 {
  aspect-ratio: 21 / 9;
}

.aspect-237-1 {
  aspect-ratio: 2.37 / 1;
}

.aspect-24-1 {
  aspect-ratio: 2.4 / 1 !important;
}

.aspect-cinematic-banner {
  aspect-ratio: 2.85 / 1;
}

/* ==========================================================================
   Stone Blue (Xanh Đá) Buttons with High-Contrast Glow
   ========================================================================== */
.lang-toggle-btn {
  background-color: rgba(65, 90, 119, 0.25) !important;
  color: #ffffff !important;
  border: 1px solid rgba(119, 141, 169, 0.5) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lang-toggle-btn:hover {
  background-color: #415A77 !important;
  border-color: #778DA9 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(65, 90, 119, 0.5) !important;
  transform: translateY(-1px);
}

.btn-login-monochrome {
  background-color: #415A77 !important;
  color: #ffffff !important;
  border: 1px solid #778DA9 !important;
  box-shadow: 0 0 18px rgba(65, 90, 119, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-login-monochrome:hover {
  background-color: #778DA9 !important;
  border-color: #E0E1DD !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(119, 141, 169, 0.65) !important;
  transform: translateY(-1px);
}