/* ==========================================================================
   05 — ANIMAÇÕES
   Todo o movimento da página fica reunido aqui: abertura, revelações
   ligadas ao scroll, reações ao ponteiro e os @keyframes.

   O último bloco desliga tudo para quem pediu menos movimento no sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abertura
   `.is-active` é ligada pelo script inline do HTML, antes da primeira pintura.
   `.is-gone` sobe a cortina. As duas ficam no próprio elemento para que a
   transição continue mesmo depois de o documento sair do estado de abertura.
   -------------------------------------------------------------------------- */
html.is-booting { overflow: hidden; }

.boot { display: none; }

.boot.is-active {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  background: var(--color-ink);
  transition: transform .95s var(--ease-curtain), opacity .5s .4s;
}

.boot.is-active.is-gone {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-101%);
}

.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 40% at 50% 44%, rgba(37, 99, 235, .28), transparent 68%);
}

.boot__mark {
  position: relative;
  z-index: 1;
  width: min(36vw, 142px);
  height: auto;
}

/* Os dois arcos do círculo se desenham um depois do outro */
.boot__arc {
  stroke-dasharray: 285 301;
  stroke-dashoffset: 285;
  animation: mark-draw 1.05s var(--ease) forwards;
}

.boot__arc--dark { animation-delay: .14s; }

.boot__letter {
  opacity: 0;
  transform: scale(.72);
  transform-box: fill-box;
  transform-origin: center;
  animation: mark-pop .75s .42s var(--ease) forwards;
}

.boot__letter--t { animation-delay: .56s; }

.boot__bar {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .13);
}

.boot__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue), var(--color-blue-glow));
  animation: bar-load 1.2s var(--ease) forwards;
}

/* --------------------------------------------------------------------------
   Entrada do topo, encadeada com o fim da abertura
   -------------------------------------------------------------------------- */
.site-header {
  transition: background .35s var(--ease), backdrop-filter .35s, transform .85s var(--ease);
}

.is-booting .site-header { transform: translateY(-115%); }

.status-badge,
.hero__lede,
.hero__actions,
.hero__note {
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

.status-badge { transition-delay: .10s; }
.hero__lede { transition-delay: .30s; }
.hero__actions { transition-delay: .42s; }
.hero__note { transition-delay: .54s; }

.is-booting .status-badge,
.is-booting .hero__lede,
.is-booting .hero__actions,
.is-booting .hero__note {
  opacity: 0;
  transform: translateY(20px);
}

/* --------------------------------------------------------------------------
   Títulos que sobem palavra a palavra
   O JavaScript quebra o texto em .word > .word__inner e escalona o atraso.
   -------------------------------------------------------------------------- */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .09em;
  margin-bottom: -.09em;
}

.word__inner {
  display: inline-block;
  transform: translateY(118%);
  transition: transform .9s var(--ease);
}

.is-revealed .word__inner { transform: none; }

/* --------------------------------------------------------------------------
   Revelação no scroll

   Repare que os @keyframes mexem em `translate` e `scale`, nunca em
   `transform`. O motivo: os cards usam `transform` para a inclinação com o
   mouse, e uma animação com fill `both` congelaria essa propriedade. Separando
   as duas, cada efeito segue o seu caminho sem atrapalhar o outro.

   O atraso sai da variável --reveal-delay, definida no HTML quando um bloco
   precisa entrar depois dos vizinhos.
   -------------------------------------------------------------------------- */
.reveal,
.reveal--left,
.reveal--right,
.reveal--scale { opacity: 0; }

.reveal.is-visible {
  animation: reveal-up .8s var(--ease) var(--reveal-delay, 0s) both;
}

.reveal--left.is-visible {
  animation: reveal-left .8s var(--ease) var(--reveal-delay, 0s) both;
}

.reveal--right.is-visible {
  animation: reveal-right .8s var(--ease) var(--reveal-delay, 0s) both;
}

.reveal--scale.is-visible {
  animation: reveal-scale .8s var(--ease) var(--reveal-delay, 0s) both;
}

/* Etapas do processo entram uma de cada vez */
.process__step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), background .4s var(--ease);
}

.process.is-visible .process__step {
  opacity: 1;
  transform: none;
}

.process.is-visible .process__step:nth-child(1) { transition-delay: .04s; }
.process.is-visible .process__step:nth-child(2) { transition-delay: .13s; }
.process.is-visible .process__step:nth-child(3) { transition-delay: .22s; }
.process.is-visible .process__step:nth-child(4) { transition-delay: .31s; }

/* Conteúdo do serviço aberto entra escalonado */
.services__text,
.services__feature {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.services__item.is-open .services__text,
.services__item.is-open .services__feature {
  opacity: 1;
  transform: none;
}

.services__item.is-open .services__text { transition-delay: .14s; }
.services__item.is-open .services__feature:nth-child(1) { transition-delay: .18s; }
.services__item.is-open .services__feature:nth-child(2) { transition-delay: .25s; }
.services__item.is-open .services__feature:nth-child(3) { transition-delay: .32s; }
.services__item.is-open .services__feature:nth-child(4) { transition-delay: .39s; }

/* --------------------------------------------------------------------------
   Reações ao ponteiro
   -------------------------------------------------------------------------- */
.brand__ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.05s var(--ease);
}

.brand__ring--blue { transform: rotate(165deg); }
.brand__ring--dark { transform: rotate(345deg); }
.brand:hover .brand__ring--blue { transform: rotate(525deg); }
.brand:hover .brand__ring--dark { transform: rotate(705deg); }

.brand__name { transition: letter-spacing .5s var(--ease); }
.brand:hover .brand__name { letter-spacing: .19em; }

.btn .icon { transition: transform .45s var(--ease); }
.btn:hover .icon { transform: scale(1.14) rotate(-7deg); }

.card__icon { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }

.card:hover .card__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -12px rgba(59, 130, 246, .9);
}

.card:hover .card__tag { border-color: rgba(96, 165, 250, .45); }

/* Anel pulsante no botão flutuante */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-success);
  border-radius: 50%;
  pointer-events: none;
  animation: wa-pulse 2.8s ease-out infinite;
}

/* --------------------------------------------------------------------------
   @keyframes
   -------------------------------------------------------------------------- */
@keyframes mark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mark-pop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes bar-load {
  to { width: 100%; }
}

@keyframes tech-slide {
  to { transform: translateX(-50%); }
}

@keyframes reveal-up {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes reveal-left {
  from { opacity: 0; translate: -30px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes reveal-right {
  from { opacity: 0; translate: 30px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes reveal-scale {
  from { opacity: 0; scale: .95; }
  to { opacity: 1; scale: 1; }
}

@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

@keyframes choice-pop {
  0% { transform: scale(.88); }
  55% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .65; }
  72%, 100% { transform: scale(1.85); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Preferência por menos movimento
   Nada some: tudo aparece direto, no lugar final.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .process__step,
  .services__text,
  .services__feature,
  .wa-float {
    opacity: 1;
    transform: none;
  }

  .word__inner { transform: none; }

  .boot,
  .cursor { display: none !important; }
}