.wc-vzt {
  --vzt-zoom: 120vh;
  --vzt-text: 220vh;
  --vzt-ratio: 3/4;
  --vzt-ch: 62;
  --vzt-ch-mob: 40;
  --vzt-gap: 24px;
  --vzt-radius: 16px;
  /* o valor do editor chega em --vzt-stagger-user, para a media query
     de mobile o poder reduzir proporcionalmente */
  --vzt-stagger: var(--vzt-stagger-user, 32px);
  --vzt-fs: 54px;
  --vzt-textmaxw: 900px;
  --vzt-shade: 0.2;
  --vzt-text-color: #ffffff;
  --vzt-bg: #ffffff00;
  /* progresso do zoom (0-1) e das frases (0-1), escritos pelo JS */
  --vzt-pz: 0;
  --vzt-ts: 0;
  position: relative;
  background: var(--vzt-bg);
}
.wc-vzt *, .wc-vzt *::before, .wc-vzt *::after { box-sizing: border-box; }

/* ── Palco: 1 ecrã fixo + a distância de scroll do zoom e das frases ── */
.wc-vzt__stage {
  position: relative;
  height: calc(100vh + var(--vzt-zoom) + var(--vzt-text));
}
.wc-vzt__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@supports (height: 100svh) {
  .wc-vzt__stage { height: calc(100svh + var(--vzt-zoom) + var(--vzt-text)); }
  .wc-vzt__sticky { height: 100svh; }
}

/* ── Fila de cartões ── */
.wc-vzt__row {
  flex: 0 0 auto;
  display: flex;
  gap: var(--vzt-gap);
  align-items: center;
  will-change: transform;
  /* o JS reposiciona a origem no centro do vídeo a cada frame */
  transform-origin: 50% 50%;
  z-index: 1;
}

/* a altura manda; a largura vem da proporção — não precisa de JS para dimensionar */
.wc-vzt__card {
  position: relative;
  flex: 0 0 auto;
  height: calc(var(--vzt-ch) * 1vh);
  aspect-ratio: var(--vzt-ratio);
  border-radius: var(--vzt-radius);
  overflow: hidden;
  background: #fff;
}
.wc-vzt__card img,
.wc-vzt__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* os cartões laterais saem de cena logo no início do zoom */
.wc-vzt__card:not(.wc-vzt__card--video) {
  opacity: calc(1 - var(--vzt-pz) * 2);
}
/* o vídeo vai mudando de proporção durante o zoom (--vzt-vr, escrito pelo JS) */
.wc-vzt__card--video {
  opacity: 1;
  aspect-ratio: var(--vzt-vr, var(--vzt-ratio));
}

/* ── Degraus: o vídeo é o mais baixo e sobe-se 1 passo por cada posição de
   distância. É transform, não layout — a fila não muda de largura. ── */
.wc-vzt__card--video { transform: translateY(calc(var(--vzt-stagger) * 2)); }
.wc-vzt__card:has(+ .wc-vzt__card--video),
.wc-vzt__card--video + .wc-vzt__card { transform: translateY(var(--vzt-stagger)); }

/* ── Escurecimento por trás das frases ── */
.wc-vzt__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: calc(var(--vzt-shade) * var(--vzt-ts));
  pointer-events: none;
}

/* ── Frases ── */
.wc-vzt__texts {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 6vw;
  pointer-events: none;
}
.wc-vzt__phrase {
  grid-area: 1 / 1;
  margin: 0;
  max-width: var(--vzt-textmaxw);
  text-align: center;
  color: var(--vzt-text-color);
  font-size: clamp(22px, 4.4vw, var(--vzt-fs));
  line-height: 1.18;
  opacity: 0;
  text-wrap: balance;
  font-weight: 600;
}
.wc-vzt__w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  will-change: opacity, filter, transform;
}

/* ── Mobile: mesmo funcionamento, cartões mais baixos ── */
@media (max-width: 768px) {
  .wc-vzt {
    --vzt-ch: var(--vzt-ch-mob);
    --vzt-stagger: calc(var(--vzt-stagger-user, 32px) * 0.6);
  }
  .wc-vzt__texts { padding: 0 24px; }
  .wc-vzt__phrase {
  font-size: 34px;
}
}

/* ── Reduced motion: sem zoom nem escrita, tudo legível de uma vez ── */
@media (prefers-reduced-motion: reduce) {
  .wc-vzt__stage { height: auto; }
  .wc-vzt__sticky { position: static; height: auto; overflow: hidden; padding: 24px 0; }
  .wc-vzt__row { transform: none !important; }
  .wc-vzt__card { transform: none !important; }
  .wc-vzt__card:not(.wc-vzt__card--video) { opacity: 1; }
  .wc-vzt__shade { display: none; }
  .wc-vzt__texts {
    position: static;
    display: block;
    padding: 40px 24px 0;
  }
  .wc-vzt__phrase {
    opacity: 1 !important;
    color: inherit;
    margin: 0 auto 20px;
  }
  .wc-vzt__w {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}