/* ============================================
   XBK MEDIA — Base Styles
   Reset, Typography, Global
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--neutral-300);
  background: #0a0a0a;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
  color: var(--neutral-50);
}

h1 {
  font-family: var(--font-brand);
  font-size: 6rem; /* 96px display-xl */
  line-height: 1.0;
  letter-spacing: -2.4px;
}

h2 {
  font-family: var(--font-brand);
  font-size: 4.5rem; /* 72px display-lg */
  line-height: 1.0;
  letter-spacing: -1.8px;
}

h3 {
  font-family: var(--font-brand);
  font-size: 3rem; /* 48px display-md */
  line-height: 1.0;
  letter-spacing: -1.2px;
}

h4 {
  font-family: var(--font-display);
  font-size: 2rem; /* 32px display-sm */
  line-height: 1.125;
  letter-spacing: -0.6px;
}

@media (max-width: 768px) {
  h1 { font-size: 3rem !important; letter-spacing: -1.2px !important; }
  h2 { font-size: 2.25rem !important; letter-spacing: -0.9px !important; }
  h3 { font-size: 1.875rem !important; letter-spacing: -0.7px !important; }
  h4 { font-size: 1.5rem !important; letter-spacing: -0.5px !important; }
}

p { margin-bottom: var(--space-md); }

.text-gradient {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-silver {
  background: var(--gradient-silver);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-muted { color: var(--neutral-400); }
.text-light { color: var(--neutral-300); }
.text-white { color: var(--neutral-50); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); }
.lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--neutral-300); }
.display-number { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1; }

::selection { background: var(--accent-blue); color: var(--neutral-50); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--primary-900); }
::-webkit-scrollbar-thumb { background: var(--primary-600); border-radius: var(--radius-full); }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-scale.active { opacity: 1; transform: scale(1); }

.stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger-children.active > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }

:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Language Toggle */
[data-lang="vi"] [data-i18n-en],
[data-lang="en"] [data-i18n-vi] { display: none !important; }

/* Mobile background attachment fallback */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
}