/* ═══════════════════════════════════════════
   🍂 ОСЕНЬ — бархат, уют, тёплый янтарь
   Палитра: горький шоколад + терракота + латунь
   ═══════════════════════════════════════════ */

:root {
  /* Основа — глубокая кофейная ночь */
  --bg: #17110d;
  --bg-deep: #f4e9d9;
  --bg-surface: #1f1712;
  --bg-card: #291e17;
  --bg-card-gold: rgba(198, 128, 62, 0.11);
  --bg-surface-alpha: rgba(31, 23, 18, 0.86);
  --bg-gradient: linear-gradient(135deg, #2a1a10 0%, #1c130e 50%, #2d1710 100%);

  /* Текст */
  --text-primary: #f4e9d9;
  --text-secondary: #c6b39c;
  --text-muted: #8e7a66;

  /* Акцент — латунь и терракота */
  --accent-gold: #c6803e;
  --accent-gold-light: #dc9a55;
  --accent-gold-soft: #9a6230;
  --accent-secondary: #a1442f;

  /* Границы и тени */
  --border-subtle: rgba(244, 233, 217, 0.11);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.62);
  --shadow-glow: 0 0 44px rgba(198, 128, 62, 0.2);
}

/* Осеннее тёплое свечение по секциям */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 420px at 15% 10%, rgba(198, 128, 62, 0.09), transparent 70%),
    radial-gradient(560px 400px at 90% 90%, rgba(161, 68, 47, 0.08), transparent 70%);
  pointer-events: none;
}

.section { position: relative; }
.section > .container { position: relative; }

/* Осенний hero: янтарный закат сквозь листву */
.hero-veil {
  background: linear-gradient(180deg,
    rgba(24, 14, 8, 0.3) 0%,
    rgba(74, 38, 14, 0.52) 50%,
    rgba(16, 10, 7, 0.9) 100%);
}

/* Виньетка по краям — как у старого объектива */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 200px rgba(30, 12, 4, 0.7);
  pointer-events: none;
}

.section-kicker::before {
  content: '❧';
  margin-right: 8px;
  opacity: 0.75;
}

/* Карточки: тёплая бархатная рамка */
.work-card, .masonry-item, .package {
  background: linear-gradient(170deg, var(--bg-surface), var(--bg-card) 160%);
}

.work-card:hover,
.masonry-item:hover,
.package:hover {
  border-color: rgba(198, 128, 62, 0.5);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.btn-primary {
  background: linear-gradient(135deg, #c6803e 0%, #dc9a55 100%);
  color: #1a1109;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #d18b47 0%, #e8a962 100%);
  box-shadow: var(--shadow-glow);
}

.package-badge, .service-mini-badge {
  background: linear-gradient(135deg, #c6803e, #a1442f);
  color: #fff6ea;
}

/* ─── Боковые «кадры фото» — осень (терракота, янтарь, бархат) ─── */
body::before {
  background:
    radial-gradient(ellipse 85px 130px at 28% 15%, rgba(198, 128, 62, 0.5) 0%, transparent 68%),
    radial-gradient(ellipse 65px 100px at 68% 35%, rgba(161, 68, 47, 0.38) 0%, transparent 65%),
    radial-gradient(ellipse 75px 115px at 38% 60%, rgba(220, 154, 85, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 55px 90px at 82% 85%, rgba(198, 128, 62, 0.4) 0%, transparent 60%),
    linear-gradient(168deg,
      #1c130e 0%,
      #3a2010 20%,
      #a1442f 45%,
      #c6803e 68%,
      #dc9a55 85%,
      #f4e9d9 100%);
  box-shadow:
    inset 80px 60px 120px rgba(198, 128, 62, 0.5),
    inset -40px 200px 100px rgba(161, 68, 47, 0.35),
    inset 60px 400px 140px rgba(220, 154, 85, 0.4),
    inset -80px 600px 120px rgba(198, 128, 62, 0.25);
  animation: bloomLeftAutumn 30s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(ellipse 80px 125px at 70% 10%, rgba(220, 154, 85, 0.45) 0%, transparent 68%),
    radial-gradient(ellipse 60px 95px at 25% 50%, rgba(161, 68, 47, 0.32) 0%, transparent 65%),
    radial-gradient(ellipse 70px 110px at 55% 78%, rgba(198, 128, 62, 0.38) 0%, transparent 70%),
    radial-gradient(ellipse 50px 85px at 12% 92%, rgba(220, 154, 85, 0.3) 0%, transparent 60%),
    linear-gradient(192deg,
      #f4e9d9 0%,
      #dc9a55 25%,
      #c6803e 45%,
      #a1442f 70%,
      #3a2010 85%,
      #1c130e 100%);
  box-shadow:
    inset -80px 60px 120px rgba(198, 128, 62, 0.45),
    inset 40px 200px 100px rgba(161, 68, 47, 0.3),
    inset -60px 400px 140px rgba(220, 154, 85, 0.35),
    inset 80px 600px 120px rgba(198, 128, 62, 0.2);
  animation: bloomRightAutumn 36s ease-in-out infinite alternate-reverse;
}

@keyframes bloomLeftAutumn {
  0%   { opacity: 0.3; transform: translateY(0) scale(1); }
  50%  { opacity: 0.5; }
  100% { opacity: 0.38; transform: translateY(-40px) scale(1.04); }
}

@keyframes bloomRightAutumn {
  0%   { opacity: 0.28; transform: translateY(0) scale(1); }
  50%  { opacity: 0.48; }
  100% { opacity: 0.36; transform: translateY(35px) scale(1.03); }
}