:root {
  --bg-main: #FAF6F0;
  --text-main: #3E2723;
  --text-muted: #795C52;
  --primary: #D4A373;
  --primary-hover: #C08D5D;
  --secondary: #FAEDCD;
  --accent: #E07A5F;
  --accent-hover: #D0664B;
  --border: #EAE0D5;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.main-content {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.bg-accent { background-color: var(--accent) !important; color: #fff; }
.text-accent { color: var(--accent) !important; }

a { color: var(--text-main); text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { color: var(--primary); }

.nav-link { font-weight: 500; position: relative; }
.nav-link::after {
  content: ''; position: absolute; width: 0; height: 2px;
  bottom: 0; left: 50%; background-color: var(--primary);
  transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-link:hover::after { width: 100%; }

.navbar-brand { font-family: 'Playfair Display', serif; font-size: 1.8rem; letter-spacing: 1px; }

.btn-primary { background-color: var(--primary); border: none; color: #fff; padding: 0.6rem 1.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 163, 115, 0.4); }

.card { border: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(62, 39, 35, 0.04); transition: transform 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(62, 39, 35, 0.08); }

.footer-dark { background-color: var(--text-main); color: var(--bg-main); }
.footer-dark a { color: #d1c4b9; }
.footer-dark a:hover { color: var(--primary); }

/* ==========================================================================
   ЖИВОЙ ФОН (AMBIENT MESH GRADIENT)
   ========================================================================== */

/* Контейнер фона фиксируется на весь экран и лежит позади всего сайта */
.ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: var(--bg-main); /* Базовый теплый цвет */
  overflow: hidden;
}

/* Градиентные сферы */
.gradient-sphere {
  position: absolute;
  /* Убрали жесткий border-radius: 50% */
  filter: blur(80px);
  opacity: 0.6;
  /* Добавили анимацию морфинга */
  animation: float 20s infinite ease-in-out alternate, morph 15s infinite ease-in-out;
  transition: transform 0.2s ease-out; /* Для плавного следования за мышью */
  will-change: transform, border-radius;
}

/* Сфера 1 (Верхняя левая - золотистая) */
.sphere-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary) 0%, rgba(212, 163, 115, 0) 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

/* Сфера 2 (Нижняя правая - акцентная терракотовая) */
.sphere-2 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--accent) 0%, rgba(224, 122, 95, 0) 70%);
  bottom: -200px;
  right: -200px;
  opacity: 0.4;
  animation-delay: -5s;
  animation-duration: 25s;
}

/* Сфера 3 (Центральная - светлая/песочная) */
.sphere-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #e6ccb2 0%, rgba(230, 204, 178, 0) 70%);
  top: 30%;
  left: 40%;
  animation-delay: -10s;
  animation-duration: 30s;
}

/* Анимация перетекания формы (Морфинг) */
@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Анимация плавного парения сфер */
@keyframes float {
  0% { top: -100px; }
  50% { top: 0px; }
  100% { top: -50px; }
}

/* === ЗОЛОТАЯ ПЫЛЬЦА (ЧАСТИЦЫ) === */
.ambient-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(212, 163, 115, 0.8) 0%, rgba(212, 163, 115, 0) 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: floatUp linear infinite;
  z-index: 0;
}

@keyframes floatUp {
  0% { transform: translateY(110vh) scale(0.5); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

/* Анимация плавного парения сфер */
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -50px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Эффект зернистости (Шум) - делает градиенты "дорогими" и убирает бандинг */
.noise-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04; /* Очень легкий шум */
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   АДАПТАЦИЯ КОНТЕНТА ПОД ФОН
   ========================================================================== */

/* Чтобы контент сайта красиво смотрелся на живом фоне, 
   убираем жесткий белый цвет у основного контейнера */
body {
  background-color: transparent !important;
}

/* Карточки товаров и боковые панели фильтров теперь должны иметь легкую прозрачность */
.card, .filter-card, .summary-card, .profile-sidebar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Нижний футер делаем полупрозрачным, чтобы фон не обрывался резко */
footer {
  background: rgba(62, 39, 35, 0.95) !important;
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   ПРЕМИАЛЬНЫЕ ИНТЕРАКТИВНЫЕ ЭФФЕКТЫ (AWWWARDS STYLE)
   ========================================================================== */

/* 1. КАСТОМНЫЙ КУРСОР */
/* Прячем стандартный курсор только на компьютерах (где есть мышь) */
@media (pointer: fine) {
  body, a, button, input, select, textarea {
    cursor: none !important;
  }
}

.custom-cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background-color: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.custom-cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 2px solid rgba(212, 163, 115, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  /* Смягчаем движение кольца */
  will-change: transform;
}

/* Состояние курсора при наведении на ссылки и кнопки */
.custom-cursor-ring.hovered {
  width: 60px; height: 60px;
  background-color: rgba(224, 122, 95, 0.1);
  border-color: var(--accent);
  mix-blend-mode: multiply;
}

/* 2. СВЕТОВАЯ КИСТЬ (SPOTLIGHT GLOW) ДЛЯ КАРТОЧЕК */
.glow-card {
  position: relative;
  overflow: hidden;
}

.glow-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Градиент, центр которого будет двигаться за мышкой через JS переменные */
  background: radial-gradient(
          800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
          rgba(255, 255, 255, 0.6),
          transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1; /* Лежит поверх фона карточки, но под текстом */
}

.glow-card:hover::before {
  opacity: 1;
}

/* Поднимаем контент карточек над светящимся слоем */
.glow-card > * {
  position: relative;
  z-index: 2;
}

/* 3. МАГНИТНЫЕ КНОПКИ */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}