/* ==========================================================================
   ОГЛАВЛЕНИЕ (course-divider.css) — Переходы между блоками на лендинге
   HTML: .section-divider между секциями #course-block-01 … 05

   1. Hero → «Смотреть бесплатно» — как .section-divider--slow на главной
   2. Блок 2 → блок 3 — мерцающие искры (как --b6-b7 на главной после FAQ)
   3. Блок 3 → 4 — линия на стыке (.section-divider--course-seam)
   3a. Блок 3 → FAQ (brera) — шарик и «?» (.section-divider--b5-b6, block-06-faq.css)
   4. Блок 4 → 5 (FAQ → отзывы) — пульс .section-divider--b4-b5
   5. О мастере → подвал — .section-divider--course-b6-b7 (как --b3-enter на главной)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. БЛОК 2 → БЛОК 3 — мерцающие искры (копия .section-divider--b6-b7, index.html)
   HTML: .section-divider--course-b2-b3 между #course-block-02 и #course-block-03
   -------------------------------------------------------------------------- */
.page-course .section-divider--course-b2-b3 {
  height: 72px;
  position: relative;
  z-index: 4;
  background: transparent;
  overflow: visible;
  margin-top: -36px;
  margin-bottom: -36px;
  pointer-events: none;
}

.page-course .section-divider--course-b2-b3 .section-divider__line,
.page-course .section-divider--course-b2-b3 .section-divider__orb {
  display: none;
}

.page-course .section-divider--course-b2-b3 .section-divider__seam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 72vw);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 159, 61, 0.15) 20%,
    rgba(255, 159, 61, 0.45) 50%,
    rgba(255, 159, 61, 0.15) 80%,
    transparent
  );
  animation: courseB2B3SeamBreath 5s ease-in-out infinite;
}

.page-course .section-divider--course-b2-b3 .section-divider__ember {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe0a8 0%, #ff9f3d 45%, transparent 70%);
  opacity: 0;
  animation: courseB2B3EmberTwinkle 4.2s ease-in-out infinite;
}

.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(2) { animation-delay: 0s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(3) { animation-delay: 0.7s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(4) { animation-delay: 1.4s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(5) { animation-delay: 2.1s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(6) { animation-delay: 2.8s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(7) { animation-delay: 3.5s; }
.page-course .section-divider--course-b2-b3 .section-divider__ember:nth-child(8) { animation-delay: 1.1s; }

@keyframes courseB2B3SeamBreath {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@keyframes courseB2B3EmberTwinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
    box-shadow: none;
  }
  45%, 55% {
    opacity: 0.95;
    transform: scale(1);
    box-shadow:
      0 0 8px rgba(255, 159, 61, 0.9),
      0 0 18px rgba(255, 107, 26, 0.45);
  }
}

/* --------------------------------------------------------------------------
   1. HERO → «СМОТРЕТЬ БЕСПЛАТНО»
   HTML: .section-divider--course-b1-b2
   -------------------------------------------------------------------------- */
.page-course .section-divider--course-b1-b2 {
  position: relative;
  z-index: 4;
  height: 72px;
  background: transparent;
  overflow-x: clip;
  overflow-y: visible;
  margin-top: -36px;
  margin-bottom: -36px;
  pointer-events: none;
}

.page-course .section-divider--course-b1-b2 .section-divider__scissors,
.page-course .section-divider--course-b1-b2 .section-divider__orb {
  display: none;
}

/* --------------------------------------------------------------------------
   2. ЛИНИЯ НА СТЫКЕ БЛОКОВ (3→4, 4→5) — половина в каждый фон
   HTML: .section-divider--course-seam
   -------------------------------------------------------------------------- */
.page-course .section-divider--course-seam {
  position: relative;
  z-index: 5;
  height: 72px;
  background: transparent;
  overflow: visible;
  margin-top: -36px;
  margin-bottom: -36px;
  pointer-events: none;
}

.page-course .section-divider--course-seam .section-divider__scissors,
.page-course .section-divider--course-seam .section-divider__orb {
  display: none;
}

.page-course .section-divider--course-seam .section-divider__line {
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3a. БЛОК 3 → FAQ (brera) — шарик слева направо (копия .section-divider--b5-b6, index.html)
   HTML: .section-divider--course-b3-faq между «О курсе» и #course-block-faq
   Стили анимации: block-06-faq.css (.b5b6-sun-unit, .b5b6-question)
   -------------------------------------------------------------------------- */
.page-course .section-divider--course-b3-faq {
  position: relative;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   4. БЛОК 6 → ПОДВАЛ — космическая волна (копия .section-divider--b3-enter, index.html)
   HTML: .section-divider--course-b6-b7 между #course-block-05 и #course-block-footer
   -------------------------------------------------------------------------- */
.page-course .section-divider--course-b6-b7 {
  position: relative;
  z-index: 2;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 107, 26, 0.04) 50%, rgba(255, 140, 40, 0.08) 100%);
  overflow: visible;
  pointer-events: none;
}

.page-course .section-divider--course-b6-b7 .section-divider__line,
.page-course .section-divider--course-b6-b7 .section-divider__orb {
  display: none;
}

.page-course .section-divider--course-b6-b7 .section-divider__cosmic-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%23ff6b1a' fill-opacity='0.12' d='M0 48V24c120-20 240 20 360 8s240-28 360-4 240 36 360 12 120-28 120-28v36H0z'/%3E%3Cpath fill='%23ffb347' fill-opacity='0.08' d='M0 48V32c80-12 160 16 240 8s160-24 240-8 160 20 240 4 160-16 240-8v20H0z'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 1200px 48px;
  animation: courseB6B7WaveScroll 14s linear infinite;
}

.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 8px #ff6b1a;
  animation: courseB6B7SparkFall 3s ease-in infinite;
}

.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span:nth-child(1) { left: 15%; animation-delay: 0s; }
.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span:nth-child(2) { left: 35%; animation-delay: 0.8s; }
.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span:nth-child(3) { left: 55%; animation-delay: 1.6s; }
.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span:nth-child(4) { left: 75%; animation-delay: 0.4s; }
.page-course .section-divider--course-b6-b7 .section-divider__cosmic-sparks span:nth-child(5) { left: 90%; animation-delay: 2.2s; }

@keyframes courseB6B7WaveScroll {
  from { background-position-x: 0; }
  to { background-position-x: 1200px; }
}

@keyframes courseB6B7SparkFall {
  0% { transform: translateY(-10px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(90px); opacity: 0; }
}