/* =========================================================================
   IZABELA PARIZIO ADVOCACIA — Landing Page
   animations.css  ·  Entradas, microinterações e keyframes
   -------------------------------------------------------------------------
   Princípio: movimento discreto e curto. Nada compete com a leitura.
   Todas as durações saem da escala declarada em style.css.
   Tudo é cancelável por `prefers-reduced-motion`.

   NOTA TÉCNICA — por que `translate`/`scale` e não `transform`
   -------------------------------------------------------------------------
   Alguns elementos são, ao mesmo tempo, alvo de revelação e de paralaxe
   (o cartão do hero, os retratos do interlúdio). Se ambos escrevessem em
   `transform`, um anularia o outro — e a paralaxe simplesmente não
   acontecia nesses elementos.

   A revelação usa agora as propriedades individuais `translate` e `scale`;
   a paralaxe continua em `transform`. O navegador compõe as três numa só
   matriz, então os dois efeitos convivem sem disputar a mesma declaração.
   ========================================================================= */


/* =========================================================================
   01. EFEITO DE ENTRADA (revelação no scroll)
   -------------------------------------------------------------------------
   O estado inicial só é aplicado quando o JS confirma suporte a
   IntersectionObserver (html.js-reveal). Sem JS, tudo permanece visível.
   ========================================================================= */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity var(--dur-reveal) var(--ease),
    translate var(--dur-reveal) var(--ease),
    scale var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 80ms);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  translate: none;
  scale: none;
}

/* Variações direcionais, atribuídas via data-reveal="..." */
.js-reveal [data-reveal='left']  { translate: -32px 0; }
.js-reveal [data-reveal='right'] { translate: 32px 0; }
.js-reveal [data-reveal='zoom']  { translate: 0 20px; scale: 0.94; }


/* =========================================================================
   02. HERO — sequência de abertura
   ========================================================================= */
@keyframes arc-draw {
  from { opacity: 0; translate: 0 24px; scale: 0.96; }
  to   { opacity: 1; translate: none;   scale: none; }
}

@keyframes ring-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

@keyframes blob-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Traço de caneta sob a última palavra da headline: desenha-se sozinho */
@keyframes stroke-draw {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}

/* Ponto que percorre a linha-guia de rolagem */
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(280%); }
  100% { transform: translateY(280%); }
}

/* Flutuação lenta do selo do monograma */
@keyframes selo-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.hero__arc  { animation: arc-draw 1.6s var(--ease) both 0.25s; }
.hero__blob { animation: blob-breathe 11s var(--ease-soft) infinite; }
.arch__ring { animation: ring-float 7s var(--ease-soft) infinite; }
.hero__cue i{ animation: cue-run 3.2s var(--ease-soft) infinite; }

.hero__selo { animation: selo-drift 8s var(--ease-soft) infinite 0.8s; }

.hero__stroke path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: stroke-draw 1.1s var(--ease) forwards;
}
.hero__stroke path:nth-child(1) { animation-delay: 1.05s; }
.hero__stroke path:nth-child(2) { animation-delay: 1.30s; }


/* =========================================================================
   03. MICROINTERAÇÕES
   ========================================================================= */

/* --- Botão magnético ------------------------------------------------------
   O deslocamento vem de --mx/--my (alimentadas por JS) somadas ao --lift
   do hover, para que o efeito magnético e a elevação convivam. */
.btn[data-magnetic] {
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift-btn, 0px)), 0);
  transition: transform 0.35s var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn[data-magnetic]:hover  { --lift-btn: var(--lift-sm); transition-duration: 0.12s; }
/* mantém o recuo do clique, que o transform magnético sobrescreveria */
.btn[data-magnetic]:active {
  --lift-btn: 0px;
  transform: translate3d(var(--mx, 0px), 0, 0) scale(0.985);
}

/* Rótulo em linha única: garante que a troca vertical fique limpa */
.btn__label { white-space: nowrap; }

/* --- Pulso do botão flutuante -------------------------------------------- */
@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(154, 53, 32, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(154, 53, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 53, 32, 0); }
}
.fab.is-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: fab-pulse 2.8s var(--ease-soft) infinite;
  pointer-events: none;
}

/* --- Sublinhado animado nos contatos do rodapé --------------------------- */
.contato__text {
  background-image: linear-gradient(var(--clay-soft), var(--clay-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-slow) var(--ease);
}
.contato:hover .contato__text { background-size: 100% 1px; }

/* --- Brilho que atravessa os cards de benefício --------------------------
   O card usa overflow:hidden (style.css), o que mantém o varrimento
   dentro dos próprios limites — antes ele cruzava os cards vizinhos. */
.card--beneficio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(253, 243, 233, 0.22) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.card--beneficio:hover::before { transform: translateX(120%); }

/* Conteúdo acima do brilho */
.card--beneficio > * { position: relative; z-index: 1; }


/* =========================================================================
   04. PARALAXE
   -------------------------------------------------------------------------
   Deslocamento aplicado por JS via --py. Fica em `transform` justamente
   para não colidir com o `translate`/`scale` da revelação.
   ========================================================================= */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}


/* =========================================================================
   05. CARREGAMENTO DA PÁGINA
   ========================================================================= */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body { animation: page-in 0.6s var(--ease-soft) both; }


/* =========================================================================
   06. ACESSIBILIDADE — respeito total a "reduzir movimento"
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* A revelação usa translate/scale — ambos precisam ser anulados */
  .js-reveal .reveal {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  [data-parallax] { transform: none !important; }

  .fab.is-visible::after { animation: none; }

  /* A troca de rótulo e de ícone vira um salto seco sem a transição.
     Melhor não acontecer: o botão apenas muda de cor. */
  .btn__label > span,
  .btn__label::after,
  .btn__icon svg { transform: none !important; }
  .btn__label::after { opacity: 0; }
}