/* ============================================
   БАЗОВЫЕ СТИЛИ СЕКЦИЙ
   ============================================ */
.section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  min-height: 100px;
}

/* Контейнер для параллакс-фона */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.08;
  transition: transform 0.1s ease-out;
}

/* ============================================
   ЛЕСНАЯ ПАЛИТРА С ГРАДИЕНТАМИ
   ============================================ */
.section-forest-1 {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.section-forest-2 {
  background: linear-gradient(135deg, #c8e6c9 0%, #dcedc8 100%);
}

.section-forest-3 {
  background: linear-gradient(135deg, #a5d6a7 0%, #c5e1a5 100%);
}

.section-forest-4 {
  background: linear-gradient(135deg, #81c784 0%, #9ccc65 100%);
}

.section-forest-5 {
  background: linear-gradient(135deg, #66bb6a 0%, #7cb342 100%);
}

/* ============================================
   SVG-ПАТТЕРНЫ ДЛЯ КАЖДОЙ СЕКЦИИ
   ============================================ */
/* Секция 1: Листья */
.section-forest-1 .parallax-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5c-5 10-15 15-20 25 5 0 10-5 15-5s10 5 15 5c5 0 10 5 15 5-5-10-15-15-20-25-1.5 3-3.5 5-5 5s-3.5-2-5-5z' fill='%232e7d32' opacity='0.5'/%3E%3C/svg%3E");
}

/* Секция 2: Ёлочки */
.section-forest-2 .parallax-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10L25 35h10L20 60h15L20 80h40L45 60h15L45 35h10L40 10z' fill='%231b5e20' opacity='0.4'/%3E%3C/svg%3E");
}

/* Секция 3: Веточки */
.section-forest-3 .parallax-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 20c-5 10-15 15-20 25 10 0 15 5 20 15 5-10 10-15 20-15-5-10-15-15-20-25z' fill='%23388e3c' opacity='0.35'/%3E%3Cpath d='M50 50c-3 6-9 9-12 15 6 0 9 3 12 9 3-6 6-9 12-9-3-6-9-9-12-15z' fill='%23388e3c' opacity='0.25'/%3E%3C/svg%3E");
}

/* Секция 4: Сосновые иголки */
.section-forest-4 .parallax-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cline x1='35' y1='10' x2='35' y2='60' stroke='%231b5e20' stroke-width='2' opacity='0.3'/%3E%3Cline x1='25' y1='20' x2='45' y2='20' stroke='%231b5e20' stroke-width='2' opacity='0.25'/%3E%3Cline x1='28' y1='30' x2='42' y2='30' stroke='%231b5e20' stroke-width='2' opacity='0.25'/%3E%3Cline x1='30' y1='40' x2='40' y2='40' stroke='%231b5e20' stroke-width='2' opacity='0.25'/%3E%3Cline x1='32' y1='50' x2='38' y2='50' stroke='%231b5e20' stroke-width='2' opacity='0.25'/%3E%3C/svg%3E");
}

/* Секция 5: Дубовые листья */
.section-forest-5 .parallax-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 15c-8 5-15 12-20 20 5 3 10 8 15 8s10-5 15-8c8 5 15 12 20 20-10 5-20 15-30 20-10-5-20-15-30-20 5-8 12-15 20-20-5-8-10-15-15-20 10 5 20 15 30 20 10-5 20-15 30-20-5 5-10 12-15 20z' fill='%232e7d32' opacity='0.4'/%3E%3C/svg%3E");
}

/* ============================================
   РАЗДЕЛИТЕЛИ МЕЖДУ СЕКЦИЯМИ
   ============================================ */
.section + .section {
  border-top: 3px solid rgba(76, 175, 80, 0.2);
}

/* ============================================
   ТЁМНАЯ ТЕМА
   ============================================ */
@media (prefers-color-scheme: dark) {
  .section-forest-1 {
    background: linear-gradient(135deg, #00ff358a 0%, #23452ab5 100%);
  }
  .section-forest-2 {
    background: linear-gradient(135deg, #16291a 0%, #142417 100%);
  }
  .section-forest-3 {
    background: linear-gradient(135deg, #1a2f1e 0%, #183020 100%);
  }
  .section-forest-4 {
    background: linear-gradient(135deg, #142417 0%, #121f15 100%);
  }
  .section-forest-5 {
    background: linear-gradient(135deg, #183020 0%, #16291a 100%);
  }
  
  .section + .section {
    border-top: 3px solid rgba(76, 175, 80, 0.35);
  }
  
  .parallax-bg {
    opacity: 0.12;
  }
}

/* ============================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ КОНТЕНТА (FADE-IN)
   ============================================ */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Анимация для дочерних элементов внутри секции */
.fade-in-section.is-visible > .container,
.fade-in-section.is-visible .row,
.fade-in-section.is-visible .col,
.fade-in-section.is-visible h1,
.fade-in-section.is-visible h2,
.fade-in-section.is-visible h3,
.fade-in-section.is-visible p,
.fade-in-section.is-visible ul,
.fade-in-section.is-visible li,
.fade-in-section.is-visible a,
.fade-in-section.is-visible button {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Задержка для вложенных элементов (каскадная анимация) */
.fade-in-section.is-visible > .container > * {
  animation-delay: calc(0.1s * var(--item-index, 0));
}

/* ============================================
   ПАРАЛЛАКС-ЭФФЕКТ (JavaScript требуется)
   ============================================ */
/* Стили применяются через JS data-speed атрибут */
.parallax-active .parallax-bg {
  will-change: transform;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }
  
  .parallax-bg {
    background-size: 150px 150px;
    opacity: 0.06;
  }
  
  @media (prefers-color-scheme: dark) {
    .parallax-bg {
      opacity: 0.1;
    }
  }
}

/* Отключаем параллакс на мобильных для производительности */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .parallax-bg {
    transform: none !important;
  }
}