/* =========================================================
   Thalyta Maia — animations.css
   Linguagem de movimento: easing suave, base sutil,
   destaques no hero e projetos. Reveal orquestrado por JS
   (adiciona a classe .is-in quando o elemento entra na tela).
   ========================================================= */

/* ---------- keyframes globais ---------- */

/* Ken Burns com pan direcional alternado por slide */
@keyframes kb-1 { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes kb-2 { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.12) translate(1.5%, -1%); } }
@keyframes kb-3 { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.12) translate(-1%, 1.2%); } }
@keyframes kb-4 { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.12) translate(1%, 1.2%); } }

.hero__slide.is-active[data-pan="1"] { animation: kb-1 19s ease-in-out infinite alternate; }
.hero__slide.is-active[data-pan="2"] { animation: kb-2 19s ease-in-out infinite alternate; }
.hero__slide.is-active[data-pan="3"] { animation: kb-3 19s ease-in-out infinite alternate; }
.hero__slide.is-active[data-pan="4"] { animation: kb-4 19s ease-in-out infinite alternate; }

/* seta de scroll pulsante */
@keyframes cue { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .85; } 50% { transform: translateX(-50%) translateY(9px); opacity: .25; } }
.hero__cue { animation: cue 2.2s ease-in-out infinite; }

/* =========================================================
   Intro do hero (revela no load via JS: body.loaded)
   ========================================================= */
.js .hero__content [data-hero] {
  opacity: 0; transform: translateY(26px);
}
body.loaded .hero__content [data-hero] {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  opacity: 1; transform: none;
}
body.loaded .hero__content [data-hero]:nth-child(1) { transition-delay: .05s; }
body.loaded .hero__content [data-hero]:nth-child(2) { transition-delay: .21s; }
body.loaded .hero__content [data-hero]:nth-child(3) { transition-delay: .37s; }

/* título letra a letra (spans criados pelo JS) */
.hero__title .char {
  display: inline-block;
}
.js .hero__title .char {
  opacity: 0; transform: translateY(40px) rotate(4deg);
}
.hero__title .char.space { width: .32em; }
body.loaded .hero__title .char {
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  opacity: 1; transform: none;
}

/* linhas do subtítulo crescendo */
.js .hero__rule { transform: scaleX(0); transform-origin: center; }
body.loaded .hero__subtitle .hero__rule {
  transition: transform 1s var(--ease) .5s; transform: scaleX(1);
}

/* cortina de intro que sobe revelando a página */
.page-curtain {
  position: fixed; inset: 0; z-index: 500; background: var(--brand-deep);
  transform: translateY(0); transition: transform 1s var(--ease);
  pointer-events: none;
}
body.loaded .page-curtain { transform: translateY(-100%); }

/* =========================================================
   Sistema de reveal (data-reveal="up|mask|scale|left|right")
   Estado inicial escondido; .is-in (via JS) revela.
   ========================================================= */
.js [data-reveal] {
  transition: opacity 1s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { opacity: 0; transform: translateY(30px); }
.js [data-reveal="scale"] { opacity: 0; transform: scale(.94); }
.js [data-reveal="left"]  { opacity: 0; transform: translateX(-46px); }
.js [data-reveal="right"] { opacity: 0; transform: translateX(46px); }
.js [data-reveal="mask"]  { clip-path: inset(0 0 100% 0); }

.js [data-reveal].is-in {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
}

/* stagger: atraso incremental nos filhos com data-reveal (via --i do JS) */
[data-stagger] [data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }

/* =========================================================
   Drawer mobile — links em cascata na abertura
   ========================================================= */
.drawer .drawer__links a {
  opacity: 0; transform: translateX(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer.is-open .drawer__links a { opacity: 1; transform: none; }
.drawer.is-open .drawer__links a:nth-child(1) { transition-delay: .10s; }
.drawer.is-open .drawer__links a:nth-child(2) { transition-delay: .16s; }
.drawer.is-open .drawer__links a:nth-child(3) { transition-delay: .22s; }
.drawer.is-open .drawer__links a:nth-child(4) { transition-delay: .28s; }
.drawer.is-open .drawer__links a:nth-child(5) { transition-delay: .34s; }
.drawer.is-open .drawer__links a:nth-child(6) { transition-delay: .40s; }

/* =========================================================
   WhatsApp flutuante — anel de aceno periódico
   Base opacity: 0 — o anel só existe enquanto a animação roda;
   no hover a animação para e ele some sem "congelar" visível.
   ========================================================= */
@keyframes wa-ping {
  0% { transform: scale(1); opacity: .5; }
  55%, 100% { transform: scale(1.55); opacity: 0; }
}

.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(74, 46, 33, .65);
  opacity: 0;
  animation: wa-ping 4s var(--ease) infinite;
  pointer-events: none;
}

.wa-float:hover::before {
  animation: none;
}

/* =========================================================
   Acessibilidade — respeitar prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* o seletor * acima não alcança pseudo-elementos — o anel precisa ser desligado à mão */
  .wa-float::before { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .drawer .drawer__links a { opacity: 1 !important; transform: none !important; }
  .hero__content [data-hero],
  .hero__title .char { opacity: 1 !important; transform: none !important; }
  .hero__rule { transform: scaleX(1) !important; }
  .page-curtain { display: none; }
  .hero__slide.is-active { animation: none !important; }
}