/* ============================================
   Channel Luxury — Design System
   ============================================ */

/* --- Local Font: Laeva Vietnam --- */
@font-face {
  font-family: 'Laeva';
  src: url('../fonts/LaevaVietnam-Light.woff2') format('woff2'),
       url('../fonts/LaevaVietnam-Light.woff') format('woff'),
       url('../fonts/Laeva-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Laeva';
  src: url('../fonts/LaevaVietnam-Light.woff2') format('woff2'),
       url('../fonts/LaevaVietnam-Light.woff') format('woff'),
       url('../fonts/Laeva-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Laeva';
  src: url('../fonts/LaevaVietnam-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Laeva';
  src: url('../fonts/LaevaVietnam-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #1a1a1a;
  --color-gray-lightest: #fafafa;
  --color-gray-light: #f6f6f6;
  --color-gray-mid: #d4d4d4;
  --color-gray-dark: #666666;
  --color-gray-darker: #333333;
  --color-text: #000000;
  --color-text-light: #666666;
  --color-text-inverse: #ffffff;
  --color-border: #e0e0e0;
  --color-overlay: rgba(0, 0, 0, 0.45);
  --font-primary: 'Laeva', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Laeva', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-size-xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;
  --font-size-hero: 4rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.2em;
  --letter-spacing-widest: 0.3em;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;
  --container-max: 1440px;
  --container-content: 1200px;
  --container-narrow: 800px;
  --header-height: 140px;
  --header-height-scrolled: 70px;
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease-in-out;
  --transition-mega: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --z-overlay: 800;
  --z-mega-menu: 900;
  --z-header: 1000;
  --z-mobile-nav: 1100;
  --z-modal: 1200;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-text); background: var(--color-secondary); overflow-x: hidden; }
body.menu-open, body.nav-open { overflow: hidden; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
p { margin-bottom: var(--spacing-sm); line-height: var(--line-height-relaxed); }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-gray-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: transparent; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; border: none; outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-lg); }
.container--narrow { max-width: var(--container-narrow); }
.container--content { max-width: var(--container-content); }
.text-uppercase { text-transform: uppercase; }
.text-center { text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; cursor: pointer; transition: all var(--transition-base); min-width: 200px; text-align: center; text-decoration: none; }
.btn--outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-secondary); }
.btn--outline-white { background: transparent; color: var(--color-secondary); border: 1px solid var(--color-secondary); }
.btn--outline-white:hover { background: var(--color-secondary); color: var(--color-primary); }
.btn--solid { background: var(--color-primary); color: var(--color-secondary); border: 1px solid var(--color-primary); }
.btn--solid:hover { background: transparent; color: var(--color-primary); }

/* Overlay */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-overlay); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.overlay.active { opacity: 1; visibility: visible; }

/* Section Base */
.section { position: relative; width: 100%; overflow: hidden; }
.section--full { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.section__content { position: relative; z-index: 2; text-align: center; padding: var(--spacing-xl) var(--spacing-lg); }
.section__subtitle { font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; margin-bottom: var(--spacing-sm); }
.section__title { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; margin-bottom: var(--spacing-md); }
.section__cta { margin-top: var(--spacing-lg); }

/* Background Media */
.bg-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.bg-media img, .bg-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bg-media::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.15); pointer-events: none; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.animate-fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-fade-in-up.in-view { opacity: 1; transform: translateY(0); }
.animate-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-stagger.in-view > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.animate-stagger.in-view > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.animate-stagger.in-view > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.animate-stagger.in-view > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-gray-light); }
::-webkit-scrollbar-thumb { background: var(--color-gray-mid); border-radius: 3px; }
::selection { background: var(--color-primary); color: var(--color-secondary); }