/* Ефекти GAZDA: базовий стан — без JS і при reduced motion, живий — під класом is-*-live.
   Кольори й криві — лише токени з gazda-tokens.css. */

/* ---------- FrostReveal ---------- */
.gz-frost {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--gz-window-glass, #2E2A25);
}
.gz-frost__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-frost__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* img лишається в DOM заради alt і як запасний кадр; зникає лише з-під живого полотна */
.gz-frost.is-frost-live .gz-frost__img { visibility: hidden; }

/* ---------- LouvreGallery ---------- */
.gz-louvre__slide { position: relative; margin: 0; }
.gz-louvre__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gz-louvre__band { display: none; }

/* Без JS / reduced motion: кадри один під одним, кожен зі своїм підписом */
.gz-louvre:not(.is-louvre-live) .gz-louvre__slide { aspect-ratio: 16 / 10; }
.gz-louvre:not(.is-louvre-live) .gz-louvre__slide + .gz-louvre__slide { margin-top: 2px; }

.gz-louvre.is-louvre-live { position: relative; height: 100svh; overflow: hidden; }
.gz-louvre.is-louvre-live .gz-louvre__stage { position: absolute; inset: 0; }
.gz-louvre.is-louvre-live .gz-louvre__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.gz-louvre.is-louvre-live .gz-louvre__slide img {
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
/* Підписи кадрів лишаються для читачів екрана, візуально їх замінює стрічка */
.gz-louvre.is-louvre-live figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Текст поверх кадру — лише на суцільній плашці (правило AAA ≥ 7:1) */
.gz-louvre.is-louvre-live .gz-louvre__band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 3fr auto;
  align-items: baseline;
  gap: 2rem;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
  background: var(--gz-black, #080808);
  color: var(--gz-ink-statement-dark, #FFF4E3);
  font-family: var(--gz-font-text);
}
.gz-louvre__count, .gz-louvre__title { display: block; overflow: hidden; }
.gz-louvre__count > span, .gz-louvre__title > span { display: block; will-change: transform; }
.gz-louvre__count { font-size: .8rem; letter-spacing: var(--gz-track-caps, .12em); }
.gz-louvre__title { font-family: var(--gz-font-display); font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; }
.gz-louvre__link { color: inherit; font-size: .8rem; letter-spacing: var(--gz-track-caps, .12em); text-transform: uppercase; }

/* ---------- HoverPreview ---------- */
.gz-hlist { list-style: none; margin: 0; padding: 0; }
.gz-hlist__row { position: relative; transition: opacity var(--gz-dur-makhno-caption, .45s) var(--gz-ease-makhno, ease); }
.gz-hlist__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--gz-ease-makhno, ease);
}
.gz-hlist.has-active .gz-hlist__row { opacity: .5; }
.gz-hlist.has-active .gz-hlist__row.is-active { opacity: 1; }
.gz-hlist__row.is-active::after { transform: scaleX(1); }

.gz-hpreview {
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  width: clamp(14rem, 22vw, 22rem);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .6s var(--gz-ease-makhno, ease);
  will-change: transform, clip-path;
}
.gz-hpreview.is-open { clip-path: inset(0 0 0 0); }
.gz-hpreview img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--gz-ease-makhno, ease);
}
.gz-hpreview img.is-front { opacity: 1; }

/* LouvreGallery у липкій обкладинці історії: секція липне, а не закріплюється */
.gz-louvre[data-louvre-track].is-louvre-live { position: sticky; top: 0; }
.gz-louvre[data-louvre-track].is-louvre-live.is-louvre-stacked { position: relative; }