/* PR-VIBECURB-06 — fundação de motion, segurança progressiva e reduced motion. */

:root {
  --vb-spring-snappy: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
    0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%,
    1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
  --vb-spring-smooth: linear(
    0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%,
    0.25 9.9%, 0.601 16.5%, 0.815 21%, 0.929 25.2%,
    0.987 29%, 1.025 33.5%, 1.042 38%, 1.04 43.5%,
    1.027 50%, 1.013 57.5%, 1.005 67%, 1.001 79%, 1
  );
  --vb-spring-bouncy: linear(
    0, 0.014, 0.055 1.8%, 0.218 3.7%, 0.867 8.5%,
    1.085 10.7%, 1.212 12.9%, 1.264 15%, 1.262 17%,
    1.217 19.5%, 1.098 24%, 1.035 28.5%, 0.993 33%,
    0.981 38%, 0.988 45%, 0.998 55%, 1.001 68%, 1
  );

  --vb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vb-ease-snap: cubic-bezier(.22, 1, .36, 1);
  --vb-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --vb-ease-dramatic: cubic-bezier(.77, 0, .175, 1);
  --vb-ease-spring-fallback: cubic-bezier(.34, 1.56, .64, 1);

  --vb-motion-instant: 120ms;
  --vb-motion-fast: 180ms;
  --vb-motion-control: 280ms;
  --vb-motion-reveal: 550ms;
  --vb-motion-state: 700ms;
  --vb-motion-hero: 820ms;
  --vb-motion-reduced: 120ms;

  --vb-motion-shift-xs: 6px;
  --vb-motion-shift-sm: 12px;
  --vb-motion-shift-md: 22px;
  --vb-motion-shift-lg: 34px;

  --vb-stagger-micro: 40ms;
  --vb-stagger-tight: 65ms;
  --vb-stagger-default: 90ms;
  --vb-stagger-narrative: 130ms;
}

@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --vb-spring-snappy: var(--vb-ease-spring-fallback);
    --vb-spring-smooth: var(--vb-ease-out);
    --vb-spring-bouncy: var(--vb-ease-spring-fallback);
  }
}

/*
 * Conteúdo só recebe estado inicial quando o JavaScript concluiu a preparação.
 * Sem JS, em falha de inicialização ou antes de vb-motion-ready, tudo permanece visível.
 */
html.vb-js.vb-motion-ready .vb-motion-item {
  --vb-motion-opacity-from: 0;
  --vb-motion-x-from: 0px;
  --vb-motion-y-from: 0px;
  --vb-motion-scale-x-from: 1;
  --vb-motion-scale-y-from: 1;
  --vb-motion-clip-from: inset(0);
  --vb-motion-duration: var(--vb-motion-reveal);
  --vb-motion-delay: 0ms;
  --vb-motion-easing: var(--vb-spring-snappy);

  opacity: var(--vb-motion-opacity-from);
  translate: var(--vb-motion-x-from) var(--vb-motion-y-from);
  scale: var(--vb-motion-scale-x-from) var(--vb-motion-scale-y-from);
  clip-path: var(--vb-motion-clip-from);
  transition-property: opacity, translate, scale, clip-path;
  transition-duration: var(--vb-motion-duration);
  transition-delay: var(--vb-motion-delay);
  transition-timing-function: var(--vb-motion-easing);
}

html.vb-js.vb-motion-ready .vb-motion-item.is-motion-visible,
html.vb-js.vb-motion-ready .vb-motion-item.is-motion-entered {
  opacity: 1;
  translate: 0 0;
  scale: 1 1;
  clip-path: inset(0);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="fade-up"] {
  --vb-motion-y-from: var(--vb-motion-shift-sm);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="fade-down"] {
  --vb-motion-y-from: calc(var(--vb-motion-shift-sm) * -1);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="fade-left"] {
  --vb-motion-x-from: calc(var(--vb-motion-shift-sm) * -1);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="fade-right"] {
  --vb-motion-x-from: var(--vb-motion-shift-sm);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="sheet-settle"] {
  --vb-motion-y-from: var(--vb-motion-shift-md);
  --vb-motion-scale-x-from: .985;
  --vb-motion-scale-y-from: .985;
  --vb-motion-easing: var(--vb-spring-smooth);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="mask-up"] {
  --vb-motion-y-from: var(--vb-motion-shift-sm);
  --vb-motion-clip-from: inset(100% 0 0);
  --vb-motion-duration: var(--vb-motion-hero);
  --vb-motion-easing: var(--vb-ease-dramatic);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="line-draw-x"] {
  --vb-motion-opacity-from: 1;
  --vb-motion-scale-x-from: 0;
  transform-origin: left center;
  --vb-motion-easing: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="line-draw-y"] {
  --vb-motion-opacity-from: 1;
  --vb-motion-scale-y-from: 0;
  transform-origin: center top;
  --vb-motion-easing: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="stamp"] {
  --vb-motion-scale-x-from: 1.08;
  --vb-motion-scale-y-from: 1.08;
  --vb-motion-easing: var(--vb-spring-smooth);
}

html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="panel-enter"] {
  --vb-motion-y-from: var(--vb-motion-shift-xs);
  --vb-motion-scale-x-from: .995;
  --vb-motion-scale-y-from: .995;
  --vb-motion-duration: var(--vb-motion-state);
  --vb-motion-easing: var(--vb-spring-smooth);
}

html.vb-motion-paused *,
html.vb-motion-paused *::before,
html.vb-motion-paused *::after {
  animation-play-state: paused !important;
}

/* Etapa 2 — sistema global, estados e microinterações. */

.vb-header {
  transition-property: background-color, border-color, box-shadow;
  transition-duration: var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vb-teal-bright), transparent);
  transform-origin: left center;
}

html.vb-js .vb-header::after {
  scale: 0 1;
  transition: scale 650ms var(--vb-ease-out) 100ms;
}

html.vb-js.vb-motion-ready .vb-header.is-motion-entered::after {
  scale: 1 1;
}

.vb-header.is-scrolled {
  border-bottom-color: rgba(94, 234, 212, .22);
  background-color: rgba(7, 16, 15, .965);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
}

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

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

.vb-brand:active {
  scale: .99;
}

.vb-header__coordinates span,
.vb-header__actions > *,
.vb-menu-button,
.vb-rail__edition,
.vb-rail__toggle,
.vb-rail nav > a {
  will-change: opacity, translate;
}

.vb-header__access,
.vb-header__demo,
.vb-nav a:not(.vb-button),
.vb-footer a,
.vb-page main a:not(.vb-button):not(.vb-hero__continue) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  text-decoration: none;
  transition-property: color, background-size, opacity;
  transition-duration: var(--vb-motion-fast), var(--vb-motion-control), var(--vb-motion-fast);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-header__access:hover,
.vb-header__access:focus-visible,
.vb-header__demo:hover,
.vb-header__demo:focus-visible,
.vb-nav a:not(.vb-button):hover,
.vb-nav a:not(.vb-button):focus-visible,
.vb-footer a:hover,
.vb-footer a:focus-visible,
.vb-page main a:not(.vb-button):not(.vb-hero__continue):hover,
.vb-page main a:not(.vb-button):not(.vb-hero__continue):focus-visible {
  background-size: 100% 1px;
}

.vb-header__demo > span,
.vb-link-arrow > span[aria-hidden="true"],
.vb-page main a:not(.vb-button) > span[aria-hidden="true"] {
  display: inline-block;
  transition: translate var(--vb-motion-control) var(--vb-ease-snap);
}

.vb-header__demo:hover > span,
.vb-header__demo:focus-visible > span,
.vb-link-arrow:hover > span[aria-hidden="true"],
.vb-link-arrow:focus-visible > span[aria-hidden="true"],
.vb-page main a:not(.vb-button):hover > span[aria-hidden="true"],
.vb-page main a:not(.vb-button):focus-visible > span[aria-hidden="true"] {
  translate: 3px 0;
}

.vb-dispatch__footer .vb-link-arrow:hover > span[aria-hidden="true"],
.vb-dispatch__footer .vb-link-arrow:focus-visible > span[aria-hidden="true"] {
  translate: 0 -3px;
}

.vb-button {
  transform: none;
  translate: 0 0;
  scale: 1;
  transition-property: translate, scale, box-shadow, background-color, border-color, color;
  transition-duration: 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);
}

.vb-button:hover {
  transform: none;
  translate: 0 -2px;
  scale: 1;
  box-shadow: 0 12px 30px rgba(34, 183, 173, .24);
}

.vb-button:active {
  transform: none;
  translate: 0 1px;
  scale: .985;
}

.vb-button:focus-visible {
  transform: none;
  translate: 0 0;
  scale: 1;
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .16);
}

.vb-menu-button {
  transform: none;
  translate: 0 0;
  scale: 1;
  transition-property: border-color, background-color, color, scale, box-shadow;
  transition-duration: var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-instant), var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-menu-button:hover {
  border-color: rgba(94, 234, 212, .72);
  background-color: rgba(94, 234, 212, .08);
}

.vb-menu-button:active {
  scale: .985;
}

.vb-menu-button[aria-expanded="true"] {
  border-color: var(--vb-teal-bright);
  background-color: rgba(94, 234, 212, .12);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .12);
}

.vb-menu-button__action i {
  display: inline-block;
  transform: none;
  rotate: 0deg;
  transition-property: rotate, scale, color;
  transition-duration: var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

.vb-menu-button[aria-expanded="true"] .vb-menu-button__action i {
  rotate: 90deg;
  scale: .92;
  color: var(--vb-teal-bright);
}

.vb-menu-button__folio.is-motion-updating {
  animation: vb-folio-crossfade var(--vb-motion-fast) var(--vb-ease-snap) both;
}

@keyframes vb-folio-crossfade {
  0% { opacity: .35; }
  100% { opacity: 1; }
}

@media (min-width: 1051px) {
  .vb-rail {
    transition-property: width, box-shadow, background-color;
    transition-duration: var(--vb-motion-state), var(--vb-motion-control), var(--vb-motion-control);
    transition-timing-function: var(--vb-spring-smooth), var(--vb-ease-snap), var(--vb-ease-snap);
  }

  .vb-rail:hover,
  .vb-rail:focus-within,
  .vb-rail.is-pinned {
    box-shadow: 18px 0 42px rgba(12, 23, 21, .16);
  }

  .vb-rail__toggle {
    transform: none;
    translate: 0 0;
    scale: 1;
    transition-property: border-color, background-color, color, scale;
    transition-duration: var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-instant);
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-rail__toggle:hover,
  .vb-rail__toggle:focus-visible {
    border-color: rgba(94, 234, 212, .52);
    background-color: rgba(94, 234, 212, .09);
    color: var(--vb-teal-bright);
  }

  .vb-rail__toggle:active {
    scale: .985;
  }

  .vb-rail__toggle-icon {
    display: inline-block;
    transform: none;
    rotate: 0deg;
    transition-property: rotate, color;
    transition-duration: var(--vb-motion-control);
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-rail:hover .vb-rail__toggle-icon,
  .vb-rail:focus-within .vb-rail__toggle-icon,
  .vb-rail.is-pinned .vb-rail__toggle-icon {
    transform: none;
    rotate: 180deg;
    color: var(--vb-teal-bright);
  }

  .vb-rail a {
    position: relative;
    border-left-color: transparent;
    transition-property: color, background-color;
    transition-duration: var(--vb-motion-fast);
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-rail a::before {
    content: "";
    position: absolute;
    top: .42rem;
    bottom: .42rem;
    left: 0;
    width: 2px;
    background: var(--vb-teal-bright);
    transform-origin: center top;
    scale: 1 0;
    transition: scale var(--vb-motion-control) var(--vb-ease-snap);
  }

  .vb-rail a:hover,
  .vb-rail a:focus-visible {
    background-color: rgba(94, 234, 212, .07);
    color: var(--vb-paper);
  }

  .vb-rail a.is-active {
    border-left-color: transparent;
    background-color: rgba(94, 234, 212, .09);
    color: var(--vb-teal-bright);
  }

  .vb-rail a.is-active::before {
    scale: 1 1;
  }

  .vb-rail__number {
    display: inline-block;
    translate: 0 0;
    transition-property: translate, color;
    transition-duration: var(--vb-motion-control), var(--vb-motion-fast);
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-rail a:hover .vb-rail__number,
  .vb-rail a:focus-visible .vb-rail__number,
  .vb-rail a.is-active .vb-rail__number {
    translate: 2px 0;
  }

  .vb-rail__label {
    transform: none;
    translate: -6px 0;
    transition-property: opacity, translate;
    transition-duration: var(--vb-motion-fast), var(--vb-motion-control);
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-rail:hover .vb-rail__label,
  .vb-rail:focus-within .vb-rail__label,
  .vb-rail.is-pinned .vb-rail__label {
    transform: none;
    translate: 0 0;
  }
}

@media (max-width: 1080px) {
  body.vb-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .48);
    transition: opacity var(--vb-motion-control) var(--vb-ease-snap), visibility 0s linear var(--vb-motion-control);
  }

  body.vb-page.vb-menu-open::before {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .vb-menu-backdrop:not([hidden]) {
    background: transparent;
  }

  .vb-nav.vb-nav--mobile-portal {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: none;
    translate: 0 -10px;
    scale: .985;
    transition:
      opacity var(--vb-motion-control) var(--vb-ease-snap),
      translate var(--vb-motion-state) var(--vb-spring-smooth),
      scale var(--vb-motion-state) var(--vb-spring-smooth),
      visibility 0s linear var(--vb-motion-control);
  }

  .vb-nav.vb-nav--mobile-portal.is-open {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
    scale: 1;
    transition-delay: 0s;
  }

  .vb-nav.vb-nav--mobile-portal .vb-motion-menu-link {
    opacity: 0;
    transform: none;
    translate: 0 -6px;
    transition-property: opacity, translate, color, background-color, border-color, background-size;
    transition-duration: var(--vb-motion-fast), var(--vb-motion-control), var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-fast), var(--vb-motion-control);
    transition-delay: 0ms;
    transition-timing-function: var(--vb-ease-snap);
  }

  .vb-nav.vb-nav--mobile-portal.is-open .vb-motion-menu-link {
    opacity: 1;
    translate: 0 0;
    transition-delay: var(--vb-menu-link-delay, 0ms);
  }

  .vb-nav.vb-nav--mobile-portal .vb-motion-menu-link:hover,
  .vb-nav.vb-nav--mobile-portal .vb-motion-menu-link:focus-visible {
    border-color: rgba(94, 234, 212, .42);
    background-color: rgba(94, 234, 212, .09);
    color: var(--vb-teal-bright);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.vb-js.vb-motion-ready .vb-motion-item {
    --vb-motion-duration: var(--vb-motion-reduced);
    --vb-motion-delay: 0ms !important;
    --vb-motion-x-from: 0px;
    --vb-motion-y-from: 0px;
    --vb-motion-scale-x-from: 1;
    --vb-motion-scale-y-from: 1;
    --vb-motion-clip-from: inset(0);
    transition-property: opacity;
    transition-timing-function: var(--vb-ease-snap);
  }

  html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="line-draw-x"],
  html.vb-js.vb-motion-ready .vb-motion-item[data-vb-motion="line-draw-y"] {
    opacity: 1;
    scale: 1 1;
  }

  html.vb-js.vb-motion-ready .vb-motion-ambient {
    animation: none !important;
  }

  html.vb-js .vb-header::after {
    scale: 1 1;
    transition: none;
  }

  .vb-brand:hover,
  .vb-brand:active,
  .vb-button:hover,
  .vb-button:active,
  .vb-button:focus-visible,
  .vb-menu-button:active,
  .vb-rail__toggle:active {
    transform: none;
    translate: 0 0;
    scale: 1;
  }

  .vb-menu-button__action i,
  .vb-menu-button[aria-expanded="true"] .vb-menu-button__action i,
  .vb-rail__toggle-icon,
  .vb-rail:hover .vb-rail__toggle-icon,
  .vb-rail:focus-within .vb-rail__toggle-icon,
  .vb-rail.is-pinned .vb-rail__toggle-icon {
    transform: none;
    rotate: 0deg;
    scale: 1;
  }

  .vb-menu-button__folio.is-motion-updating {
    animation: none;
  }

  .vb-rail,
  .vb-rail__label,
  .vb-rail__number,
  .vb-rail a::before {
    transition-duration: 0ms;
  }

  .vb-rail__label,
  .vb-rail a:hover .vb-rail__number,
  .vb-rail a:focus-visible .vb-rail__number,
  .vb-rail a.is-active .vb-rail__number {
    translate: 0 0;
  }

  @media (max-width: 1080px) {
    body.vb-page::before {
      transition: opacity var(--vb-motion-reduced) var(--vb-ease-snap), visibility 0s linear var(--vb-motion-reduced);
    }

    .vb-nav.vb-nav--mobile-portal,
    .vb-nav.vb-nav--mobile-portal.is-open {
      transform: none;
      translate: 0 0;
      scale: 1;
      transition: opacity var(--vb-motion-reduced) var(--vb-ease-snap), visibility 0s linear var(--vb-motion-reduced);
    }

    .vb-nav.vb-nav--mobile-portal .vb-motion-menu-link,
    .vb-nav.vb-nav--mobile-portal.is-open .vb-motion-menu-link {
      translate: 0 0;
      transition-delay: 0ms;
      transition-property: opacity, color, background-color, border-color, background-size;
      transition-duration: var(--vb-motion-reduced);
    }
  }
}