/* =====================================================================
   ANIMAÇÕES — sistema próprio de revelação e microinterações
   Todas as animações são desativadas por prefers-reduced-motion (base.css)
   ===================================================================== */

/* Revelação no scroll — usada por IntersectionObserver em ui.js */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-reveal="left"]  { transform: translateX(-22px); }
.reveal[data-reveal="right"] { transform: translateX(22px); }
.reveal[data-reveal="scale"] { transform: scale(0.965); }
.reveal.is-visible[data-reveal] { transform: none; }

/* Atraso em cascata para grupos */
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }
.reveal[data-delay="5"] { transition-delay: 350ms; }
.reveal[data-delay="6"] { transition-delay: 420ms; }

/* Entrada orquestrada do hero — único momento não acionado pelo usuário */
.hero__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: enter 760ms var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 120ms; }
.hero__content > *:nth-child(2) { animation-delay: 200ms; }
.hero__content > *:nth-child(3) { animation-delay: 280ms; }
.hero__content > *:nth-child(4) { animation-delay: 360ms; }
.hero__content > *:nth-child(5) { animation-delay: 440ms; }
.hero__content > *:nth-child(6) { animation-delay: 520ms; }
.hero .portrait { opacity: 0; animation: enter 900ms var(--ease-out) 300ms forwards; }

@keyframes enter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero .portrait { opacity: 1; animation: none; transform: none; }
}

/* Transição de saída entre páginas internas */
body.is-leaving { opacity: 0; transition: opacity 180ms var(--ease); }

/* Inclinação sutil em cards com dados 3D (aplicada por JS) */
.tilt { transform-style: preserve-3d; transition: transform 260ms var(--ease-out); }