/* ==========================================================================
   ОГЛАВЛЕНИЕ (block-05.css) — Блок 5: Отзывы
   0. Переход 4→5 — пульс на стыке (без отдельного фона)
   1. Две ленты: 5 карточек на экран, бесконечный сдвиг мышью
   2. Hover только на своей ленте, click — lightbox
   3. Ссылка на Telegram
   ========================================================================== */

/* 0. Переход 4→5: только пульс поверх стыка голубой (блок 4) и чёрный (блок 5) — без своего фона */
.section-divider--b4-b5 {
  height: 110px;
  position: relative;
  z-index: 4;
  background: transparent;
  overflow: visible;
  margin-top: -55px;
  margin-bottom: -55px;
  pointer-events: none;
}
.section-divider--b4-b5 .section-divider__line,
.section-divider--b4-b5 .section-divider__orb { display: none; }

.section-divider__pulse-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.22) 0%, transparent 72%);
  animation: b5HeartbeatGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}

.section-divider__pulse-beats {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.section-divider__pulse-ring {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 140, 60, 0.5);
  box-shadow: 0 0 16px rgba(255, 107, 26, 0.25);
  animation: b5PulseRing 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.section-divider__pulse-ring:nth-child(2) {
  animation-delay: 0.18s;
  border-color: rgba(255, 107, 26, 0.35);
}

.section-divider__pulse-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 70px;
  opacity: 0.75;
}

.section-divider__pulse-path {
  stroke-width: 2;
  stroke-dasharray: 100 1100;
  animation: b5PulseLineTravel 7s linear infinite;
}

/* Мягкий lub-dub — без резких скачков */
@keyframes b5HeartbeatGlow {
  0%, 100% { transform: scale(0.94); opacity: 0.15; }
  11% { transform: scale(1.06); opacity: 0.5; }
  22% { transform: scale(0.96); opacity: 0.18; }
  33% { transform: scale(1.03); opacity: 0.38; }
  50%, 100% { transform: scale(0.94); opacity: 0.15; }
}

@keyframes b5PulseRing {
  0% {
    transform: scale(0.55);
    opacity: 0.55;
  }
  75% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes b5PulseLineTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1200; }
}

.block-05 {
  background: var(--gradient-dark);
  position: relative;
  z-index: 1;
}

/* 1. Галерея — две ленты по 6 карточек на всю ширину */
.block-05__gallery {
  margin-top: var(--gap-lg);
}

.block-05__row-label {
  margin: 0 0 var(--gap-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.block-05__row-label--reviews {
  margin-top: var(--gap-xl);
}

.block-05__strip {
  position: relative;
  width: 100%;
}

.block-05__strip-viewport {
  position: relative;
  overflow: hidden;
  padding: 14px 4px 18px;
  margin: 0 -4px;
  cursor: default;
}

.block-05__strip-track {
  display: flex;
  gap: var(--gap-md);
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.block-05__card {
  flex-shrink: 0;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-smooth),
    filter 0.35s var(--ease-smooth);
}
.block-05__card-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(22, 24, 32, 0.95), rgba(10, 10, 15, 0.98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth);
}
.block-05__card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.block-05__card--model .block-05__card-frame {
  background: linear-gradient(160deg, #1a1c24, #0a0a0f);
}
.block-05__card--review .block-05__card-frame {
  background: #0f1018;
}

.block-05__card:hover,
.block-05__card:focus-visible {
  transform: translateY(-6px);
  z-index: 2;
}
.block-05__card:hover .block-05__card-frame,
.block-05__card:focus-visible .block-05__card-frame {
  border-color: rgba(255, 159, 61, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 107, 26, 0.35),
    0 16px 40px rgba(255, 107, 26, 0.2),
    0 0 48px rgba(255, 107, 26, 0.12);
}
.block-05__card:focus-visible {
  outline: none;
}

/* Подсказка зоны сдвига у краёв */
.block-05__strip-viewport::before,
.block-05__strip-viewport::after {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 18px;
  width: 12%;
  max-width: 120px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.block-05__strip-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 107, 26, 0.08), transparent);
}
.block-05__strip-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 107, 26, 0.08), transparent);
}
.block-05__strip-viewport.is-zone-left::before,
.block-05__strip-viewport.is-zone-right::after {
  opacity: 1;
}

.block-05__tg-link {
  display: inline-flex;
  margin-top: var(--gap-xl);
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* 2. Lightbox — увеличение по клику */
.block-05__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(5, 5, 8, 0.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}
.block-05__lightbox:not([hidden]) {
  opacity: 1;
  visibility: visible;
}
.block-05__lightbox-figure {
  margin: 0;
  max-width: min(920px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transform: scale(0.94);
  transition: transform var(--duration-normal);
}
.block-05__lightbox:not([hidden]) .block-05__lightbox-figure {
  transform: scale(1);
}
.block-05__lightbox-img {
  max-width: 100%;
  max-height: min(82vh, 820px);
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 159, 61, 0.35);
}
.block-05__lightbox-caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.block-05__lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: calc(var(--z-modal) + 1);
  transition: background var(--duration-fast);
}
.block-05__lightbox-close:hover {
  background: rgba(255, 107, 26, 0.35);
}

@media (max-width: 900px) {
  .block-05__strip[data-visible="5"] {
    --b5-visible: 4;
  }
}
@media (max-width: 560px) {
  .block-05__strip[data-visible="5"] {
    --b5-visible: 3;
  }
}