/* ============================================================
   ANIMATIONS — keyframes, reveals, reduced motion
   ============================================================ */

/* Entrada (DS1 — fade + slide + blur) */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Rotação do conic-gradient (DS2 — border-sweep do botão) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Shine percorrendo (alternativa ao conic) */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Marquee infinito (DS3) */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Image reveal (clip-path wipe) */
@keyframes imageReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Soft pulse (dots / status) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------------------------------------------------------------
   Scroll reveal — .animate-on-scroll + .animated
   Estado inicial invisível; IntersectionObserver adiciona .animated
   --------------------------------------------------------------- */
/* Só esconde quando JS está confirmado — sem JS, conteúdo é visível */
html.js .animate-on-scroll,
html.js .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out);
  will-change: opacity, transform;
}
html.js .animate-on-scroll.animated,
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Delays staggered (DS1 — 30-50ms por item, aqui escalonados) */
.reveal.d-100,
.animate-on-scroll.d-100 { transition-delay: 100ms; }
.reveal.d-200,
.animate-on-scroll.d-200 { transition-delay: 200ms; }
.reveal.d-300,
.animate-on-scroll.d-300 { transition-delay: 300ms; }
.reveal.d-400,
.animate-on-scroll.d-400 { transition-delay: 400ms; }
.reveal.d-500,
.animate-on-scroll.d-500 { transition-delay: 500ms; }
.reveal.d-600,
.animate-on-scroll.d-600 { transition-delay: 600ms; }
.reveal.d-700,
.animate-on-scroll.d-700 { transition-delay: 700ms; }

/* Image reveal wrapper */
.img-reveal {
  overflow: hidden;
}
.img-reveal.animated img {
  animation: imageReveal 1.2s var(--ease-out) both;
}

/* 3D metallic shapes (hero visual) */
@keyframes shape-1 {
  0%, 100% { transform: perspective(1200px) rotateY(-15deg) rotateX(10deg) rotateZ(2deg); }
  25%      { transform: perspective(1200px) rotateY(-8deg) rotateX(18deg) rotateZ(-1deg); }
  50%      { transform: perspective(1200px) rotateY(-22deg) rotateX(5deg) rotateZ(4deg); }
  75%      { transform: perspective(1200px) rotateY(-12deg) rotateX(14deg) rotateZ(0deg); }
}

@keyframes shape-2 {
  0%, 100% { transform: perspective(1000px) rotateY(20deg) rotateX(-5deg) translateY(0); }
  50%      { transform: perspective(1000px) rotateY(10deg) rotateX(-15deg) translateY(-20px); }
}

@keyframes shape-3 {
  0%, 100% { transform: perspective(800px) rotateX(20deg) rotateY(-10deg) rotate(45deg); }
  50%      { transform: perspective(800px) rotateX(10deg) rotateY(-20deg) rotate(45deg); }
}

@keyframes shape-4 {
  0%, 100% { transform: perspective(600px) rotateY(5deg) scaleX(1); }
  50%      { transform: perspective(600px) rotateY(-5deg) scaleX(0.8); }
}

@keyframes shape-5 {
  0%, 100% { transform: perspective(900px) rotateY(-25deg) rotateX(15deg) translateY(0); }
  33%      { transform: perspective(900px) rotateY(-15deg) rotateX(5deg) translateY(-10px); }
  66%      { transform: perspective(900px) rotateY(-30deg) rotateX(20deg) translateY(5px); }
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}