/* PR-VIBECURB-06 · Etapa 3 — coreografia integral do hero. */

.vb-hero__mast,
.vb-trust-line,
.vb-hero__continue {
  position: relative;
}

.vb-hero__mast::after,
.vb-trust-line::after,
.vb-hero__continue::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.vb-hero__mast::after {
  bottom: -1px;
  opacity: .32;
}

.vb-trust-line::after {
  top: 0;
  opacity: .22;
}

.vb-hero__continue::after {
  top: 0;
  opacity: .38;
}

html.vb-js .vb-hero__mast::after,
html.vb-js .vb-trust-line::after,
html.vb-js .vb-hero__continue::after {
  scale: 0 1;
  transition-property: scale;
  transition-duration: 650ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready .vb-hero__mast:has(.is-motion-entered)::after {
  scale: 1 1;
  transition-delay: 50ms;
}

html.vb-js.vb-motion-ready .vb-trust-line.is-motion-entered::after {
  scale: 1 1;
  transition-delay: 280ms;
}

html.vb-js.vb-motion-ready .vb-hero__continue.is-motion-entered::after {
  scale: 1 1;
  transition-delay: 0ms;
}

.vb-hero h1 > span {
  will-change: opacity, translate, clip-path;
}

/*
 * Estado inicial: caixa inteiramente fechada, sem expor descendentes.
 * Estado final: margem inferior ampliada para preservar p, j e g completos.
 */
html.vb-js.vb-motion-ready .vb-hero h1 > span.vb-motion-item[data-vb-motion="mask-up"] {
  --vb-motion-clip-from: inset(100% -.08em 0 -.08em);
}

html.vb-js.vb-motion-ready .vb-hero h1 > span.vb-motion-item.is-motion-visible,
html.vb-js.vb-motion-ready .vb-hero h1 > span.vb-motion-item.is-motion-entered {
  clip-path: inset(-.08em -.08em -.28em -.08em);
}

.vb-evidence-sheet--hero.vb-motion-item {
  transform-origin: center;
  will-change: opacity, translate, scale;
}

/*
 * A folha usa box-shadow deslocado como moldura editorial. O clip-path padrão
 * do reveal apagava esse quadro; o settle da folha não necessita de máscara.
 */
html.vb-js.vb-motion-ready .vb-evidence-sheet--hero.vb-motion-item {
  clip-path: none;
}

.vb-evidence-sheet--hero > .vb-motion-item {
  will-change: opacity, translate;
}

.vb-hero__continue > span:last-child {
  display: inline-block;
  translate: 0 0;
}

/* A seta precisa respirar abaixo da line box sem ser cortada pelo owner. */
html.vb-js.vb-motion-ready .vb-hero__continue.vb-motion-item {
  clip-path: none;
  overflow: visible;
}

.vb-hero__continue:hover > span:last-child,
.vb-hero__continue:focus-visible > span:last-child {
  translate: 0 3px;
}

html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__field span.is-motion-entered {
  animation-name: vb-hero-field-drift;
  animation-duration: 18s;
  animation-delay: 1.25s;
  animation-timing-function: var(--vb-ease-in-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__field span:nth-child(2).is-motion-entered {
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__field span:nth-child(3).is-motion-entered {
  animation-duration: 16s;
  animation-delay: 1.6s;
}

html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered > span:last-child {
  animation: vb-hero-continue-breathe 1.8s var(--vb-ease-in-out) .5s infinite alternate;
}

.vb-hero__signature {
  transform-origin: center;
  transition-property: scale, opacity;
  transition-duration: var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-hero__signature:hover {
  scale: 1.02;
}

@keyframes vb-hero-field-drift {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 6px -3px;
  }
}

@keyframes vb-hero-continue-breathe {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.vb-js .vb-hero__mast::after,
  html.vb-js .vb-trust-line::after,
  html.vb-js .vb-hero__continue::after {
    scale: 1 1;
    transition: none;
  }

  html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__field span.is-motion-entered,
  html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered > span:last-child {
    animation: none;
    translate: 0 0;
  }

  .vb-hero__continue:hover > span:last-child,
  .vb-hero__continue:focus-visible > span:last-child,
  .vb-hero__signature:hover {
    translate: 0 0;
    scale: 1;
  }
}