/* ===================== БЛОК 1.5 «НАПРИМЕР…» =====================
   Статичная панель (в потоке страницы) + полноэкранный «захват» (example.js).
   Размеры панели = размеры блока «Честно про деньги» (ширина контента, высота --exh).
   Цвет заливки = --sage (третья карточка блока цен). */

/* ---------- статичная панель ---------- */
.ex-panel {
  margin-top: clamp(20px, 3vw, 48px);
  background: var(--sage);
  color: var(--ink-deep);
}
.ex-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 18px 20px;
  align-items: stretch;
}
.ex-text {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0 clamp(0px, 1vw, 16px);
}
.ex-dots { display: none; }                       /* точки видны только в захвате */
.ex-copy {
  grid-area: 1 / 1;
  font-size: var(--ex-fs, clamp(16px, 1.75vw, 30px));
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  max-width: 820px;
}
.ex-copy b { font-weight: 900; }

/* ---------- галерея: слайды выезжают справа ---------- */
.ex-gallery {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: rgba(39, 36, 33, .08);
}
.ex-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(100%);                    /* в ожидании — за правым краем, без анимации */
}
.ex-slide.is-active { transform: none;              transition: transform .6s var(--ease); }
.ex-slide.is-prev   { transform: translateX(-100%); transition: transform .6s var(--ease); }

@media (min-width: 861px) {
  .ex-panel { height: var(--exh, auto); }
  .ex-panel .ex-inner { height: 100%; }
  .ex-panel .ex-gallery { height: 100%; }
}
@media (max-width: 860px) {
  .ex-inner { grid-template-columns: 1fr; }
  .ex-panel .ex-gallery { aspect-ratio: 4 / 3; }
}

/* ---------- заливка: растёт из третьей карточки, лежит ПОД контентом страницы ---------- */
.ex-fill {
  position: fixed; inset: 0;
  z-index: -1;
  background: var(--sage);
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(50% 50% 50% 50%);
}

/* ---------- полноэкранный контент захвата (поверх всего) ---------- */
.ex-fixed {
  position: fixed; inset: 0;
  z-index: 70;
  display: flex; align-items: center;
  color: var(--ink-deep);
  visibility: hidden;
  pointer-events: none;
}
.ex-fixed.on  { visibility: visible; pointer-events: auto; }
.ex-fixed.out { opacity: 0; transition: opacity .35s var(--ease); }
.ex-fixed .ex-inner {
  width: 100%; height: 100%;
  padding: clamp(72px, 9vh, 120px) var(--pad) clamp(40px, 7vh, 80px);
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 72px);
  align-items: center;
}
.ex-fixed .ex-copy { --ex-fs: clamp(22px, 2.7vw, 48px); }
.ex-fixed .ex-gallery {
  height: min(78vh, 820px);
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.ex-fixed.ex-text-on .ex-gallery { opacity: 1; transform: none; }

/* точки: появляются по одной, потом мерцают волной; текст встаёт на их место */
.ex-fixed .ex-dots {
  display: flex; gap: .12em;
  grid-area: 1 / 1; align-self: start;
  font-size: clamp(56px, 8vw, 140px);
  font-weight: 900; line-height: .6;
  transition: opacity .3s var(--ease);
}
.ex-dots span { opacity: 0; }
.ex-fixed.ex-go .ex-dots span {
  animation: ex-dot-in .25s var(--ease) forwards, ex-blink .8s ease-in-out infinite;
  animation-delay: 0s, .9s;
}
.ex-fixed.ex-go .ex-dots span:nth-child(2) { animation-delay: .3s, 1.02s; }
.ex-fixed.ex-go .ex-dots span:nth-child(3) { animation-delay: .6s, 1.14s; }
.ex-fixed.ex-text-on .ex-dots { opacity: 0; }
@keyframes ex-dot-in { to { opacity: 1; } }
@keyframes ex-blink  { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }

/* слова текста проявляются по очереди (задержку ставит example.js) */
.ex-w {
  display: inline-block;
  opacity: 0; transform: translateY(.45em);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.ex-fixed.ex-text-on .ex-w { opacity: 1; transform: none; }

/* ---------- пока идёт захват: всё остальное плавно гаснет ---------- */
main, .footer { transition: opacity .7s var(--ease); }
.cookiebar, .geo-banner { transition: opacity .6s var(--ease); }
body.ex-active main,
body.ex-active .footer,
body.ex-active .header,
body.ex-active .dock,
body.ex-active .dock-backdrop,
body.ex-active .cookiebar,
body.ex-active .geo-banner {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ex-slide.is-active, .ex-slide.is-prev { transition: none; }
}