/* ==========================================================================
   1. ШРИФТЫ, ПЕРЕМЕННЫЕ И БАЗОВЫЙ СБРОС
   ========================================================================== */

/* ===== ЛОКАЛЬНЫЕ ШРИФТЫ ===== */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

/* ===== БАЗОВЫЕ ПЕРЕМЕННЫЕ И СБРОС ===== */
:root {
  --orange: #FF8C00;
  --black: #1A1A1A;
  --dark-gray: #2D2D2D;
  --gray: #4A4A4A;
  --light-gray: #F5F5F5;
  --white: #FFFFFF;
  --border: #E0E0E0;
  --font-heading: 'Montserrat', 'Arial', sans-serif;
  --font-body: 'Inter', 'Verdana', sans-serif;
}

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

html {
  scroll-behavior: smooth; /* Плавная прокрутка для всех якорных переходов */
}

html, body {
  min-height: 100vh;        /* Вместо height: 100% – позволяет контенту расти */
  overflow-x: hidden;       /* Отключаем горизонтальный скролл */
  max-width: 100%;          /* Страховка от вылезания за пределы экрана */
}

body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;       /* Дублируем для надёжности */
}

.hero-line {
  opacity: 0;
}

body.modal-open {
  overflow: hidden;         /* Блокируем скролл при открытых модалках */
}

/* ==========================================================================
   2. УТИЛИТЫ, АНИМАЦИИ И ОБЩИЕ СЕТКИ (GRIDS)
   ========================================================================== */

.hidden { display: none !important; }
.bg-white { background: var(--white); }
.bg-light { background: var(--light-gray); }
.container { max-width: 1280px; margin: 0 auto; }
.nowrap { white-space: nowrap; }

/* Анимации */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink-cursor { 50% { opacity: 0; } }
@keyframes map-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Общие Сетки (Grids) */
.intro-grid, .about-grid, .pairing-grid, .product-grid, .glass-grid {
  display: grid;
  align-items: start;
}
.intro-grid, .about-grid, .pairing-grid { grid-template-columns: 1fr 1fr; }
.intro-grid { gap: 60px; }
.about-grid { gap: 80px; }
.pairing-grid { gap: 60px; }
.product-grid, .glass-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

.log-grid, .merch-grid, #video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ==========================================================================
   4. ЗАГРУЗКА И ОШИБКИ
   ========================================================================== */

#app-content { display: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
#app-content.ready { display: block; opacity: 1; }

#loading-indicator, #error-message, #age-gate {
  position: fixed; inset: 0; background: var(--white); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
#loading-indicator.hidden, #error-message, #age-gate.hidden { display: none; opacity: 0; pointer-events: none; }
#error-message.visible { display: flex; z-index: 9998; }
#age-gate { background: var(--black); z-index: 10000; }

#loading-indicator img { width: 80px; height: 80px; margin-bottom: 24px; object-fit: contain; }
#loading-indicator h2, #error-message h2 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); }
#error-message h2 { font-size: 24px; margin-bottom: 16px; }
#loading-indicator p { font-size: 14px; color: var(--gray); margin-top: 8px; }
#error-message p { font-size: 16px; color: var(--gray); max-width: 500px; margin-bottom: 32px; }

.loader { margin-top: 24px; width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 0.8s linear infinite; }

.age-content { max-width: 560px; width: 100%; }
.age-logo { width: 80px; height: 80px; margin: 0 auto 40px; display: block; object-fit: contain; }
.age-content h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.age-content p { color: rgba(255, 255, 255, 0.7); font-size: 15px; margin-bottom: 40px; line-height: 1.7; }
.age-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }