/* PR-VIBECURB-06 · Etapa 15 — guardas finais de interação e fallback. */

/* Leitura inicial: feedback explícito sem competir com a respiração ambiente. */
.vb-hero__continue {
  transition-property: color, letter-spacing;
  transition-duration: var(--vb-motion-fast), var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-hero__continue:hover,
.vb-hero__continue:focus-visible {
  color: var(--vb-paper);
  letter-spacing: .17em;
}

html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered:hover > span:last-child,
html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered:focus-visible > span:last-child {
  animation-play-state: paused;
  translate: 0 4px;
}

.vb-hero__continue:hover::after,
.vb-hero__continue:focus-visible::after {
  opacity: .9;
  scale: 1.08 1;
}

/*
 * Todos os CTAs teal do percurso usam o mesmo feedback do CTA principal:
 * elevação curta, leve ganho de presença e resposta consistente a foco/active.
 */
.vb-page main .vb-button {
  transform: none;
  translate: 0 0;
  scale: 1;
  transition-property: opacity, translate, scale, box-shadow, background-color, border-color, color;
  transition-duration:
    var(--vb-motion-reveal),
    var(--vb-motion-control),
    var(--vb-motion-instant),
    var(--vb-motion-control),
    var(--vb-motion-fast),
    var(--vb-motion-fast),
    var(--vb-motion-fast);
  transition-timing-function: var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready .vb-page main .vb-button.vb-motion-item:not(.is-motion-entered) {
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms,
    0ms,
    0ms,
    0ms;
}

.vb-page main .vb-button:hover,
.vb-page main .vb-button:focus-visible,
html.vb-js.vb-motion-ready .vb-page main .vb-button.vb-motion-item.is-motion-entered:hover,
html.vb-js.vb-motion-ready .vb-page main .vb-button.vb-motion-item.is-motion-entered:focus-visible {
  transform: none;
  translate: 0 -2px;
  scale: 1.01;
  border-color: var(--vb-teal-bright);
  background-color: var(--vb-teal-bright);
  box-shadow: 0 12px 30px rgba(34, 183, 173, .28);
}

.vb-page main .vb-button:active,
html.vb-js.vb-motion-ready .vb-page main .vb-button.vb-motion-item.is-motion-entered:active {
  transform: none;
  translate: 0 1px;
  scale: .985;
  box-shadow: 0 5px 14px rgba(34, 183, 173, .2);
}

/* A leitura central da Luma permanece ancorada à composição editorial aprovada. */
#luma .vb-interpretive-layer__actions {
  position: absolute !important;
  z-index: 3;
  right: 2.5rem !important;
  bottom: 14.5rem !important;
  left: .5rem !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns:
    max-content .75rem
    max-content .75rem
    max-content .75rem
    max-content;
  align-items: center;
  justify-content: center;
  column-gap: .3rem;
  row-gap: .25rem;
  transform: none !important;
  text-align: center;
  visibility: visible !important;
}

#luma .vb-interpretive-layer__actions > span {
  grid-column: 1 / -1;
  white-space: nowrap;
}

#luma .vb-interpretive-layer__actions b {
  margin: 0;
  white-space: nowrap;
}

#luma .vb-interpretive-layer__actions i {
  width: .75rem;
  margin: -3px;
}

#luma .vb-interpretive-layer__core blockquote {
  position: absolute !important;
  z-index: 4;
  inset: auto 1.4rem 10px 1.4rem !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* Foco por teclado não deve aguardar o stagger narrativo do scroll. */
html.vb-js.vb-motion-ready .vb-motion-item:focus-visible,
html.vb-js.vb-motion-ready .vb-motion-item:focus-within {
  --vb-motion-delay: 0ms !important;
  --vb-motion-duration: 0ms !important;
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 1 !important;
  clip-path: inset(0) !important;
  transition-delay: 0ms !important;
  transition-duration: 0ms !important;
}

/*
 * Sem JavaScript, o botão dinâmico desaparece, mas a navegação permanece como
 * índice estático e rolável. A identificação de cada documento continua nos
 * cabeçalhos editoriais do próprio percurso.
 */
@media (max-width: 1080px) {
  #luma .vb-interpretive-layer__actions {
    top: 1rem !important;
    right: .8rem !important;
    bottom: auto !important;
    left: .8rem !important;
    grid-template-columns:
      max-content .55rem
      max-content .55rem
      max-content .55rem
      max-content;
    column-gap: .24rem;
    row-gap: .2rem;
    transform: none !important;
  }

  #luma .vb-interpretive-layer__actions i {
    width: .55rem;
    margin: 0;
  }

  #luma .vb-interpretive-layer__core blockquote {
    top: auto !important;
    right: auto !important;
    bottom: clamp(.75rem, 2vw, 1rem) !important;
    left: 50% !important;
    width: min(680px, calc(100% - 2rem)) !important;
    transform: translateX(-50%) !important;
  }

  html.vb-no-js body.vb-page {
    padding-top: 0;
  }

  html.vb-no-js .vb-header {
    position: relative;
    inset: auto;
    height: auto;
  }

  html.vb-no-js .vb-header__inner {
    min-height: 0;
    height: auto;
    flex-wrap: wrap;
    padding-block: .7rem;
  }

  html.vb-no-js .vb-menu-button,
  html.vb-no-js .vb-menu-backdrop {
    display: none !important;
  }

  html.vb-no-js .vb-nav {
    position: static !important;
    inset: auto !important;
    order: 10;
    display: flex !important;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: .65rem 0 0;
    padding: .65rem 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-top: 1px solid rgba(242, 236, 221, .22);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: 0 0 !important;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    scrollbar-width: thin;
  }

  html.vb-no-js .vb-nav::before {
    content: "Navegação";
    flex: 0 0 auto;
    color: var(--vb-teal-bright);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  html.vb-no-js .vb-nav a,
  html.vb-no-js .vb-nav .vb-button {
    flex: 0 0 auto;
    min-height: 38px;
    width: auto;
    margin: 0;
    padding: .55rem .65rem;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  #luma .vb-interpretive-layer__actions {
    top: .85rem !important;
    right: .25rem !important;
    left: .25rem !important;
    grid-template-columns:
      max-content .42rem
      max-content .42rem
      max-content .42rem
      max-content;
    column-gap: .18rem;
  }

  #luma .vb-interpretive-layer__actions b {
    font-size: .67rem !important;
    letter-spacing: .045em;
  }

  #luma .vb-interpretive-layer__actions i {
    width: .5rem !important;
  }

  #luma .vb-interpretive-layer__core blockquote {
    width: calc(100% - 1.5rem) !important;
    bottom: .75rem !important;
    padding: .85rem 1rem !important;
  }
}

@media (max-width: 420px) {
  #luma .vb-interpretive-layer__actions b {
    font-size: .54rem !important;
  }

  #luma .vb-interpretive-layer__actions > span {
    font-size: .58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vb-hero__continue,
  .vb-page main .vb-button {
    transition: none;
  }

  .vb-hero__continue:hover,
  .vb-hero__continue:focus-visible {
    letter-spacing: .14em;
  }

  html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered:hover > span:last-child,
  html.vb-js.vb-motion-ready #hero.is-hero-motion-started .vb-hero__continue.is-motion-entered:focus-visible > span:last-child,
  .vb-page main .vb-button:hover,
  .vb-page main .vb-button:focus-visible,
  .vb-page main .vb-button:active {
    translate: 0 0;
    scale: 1;
  }
}