/* =========================================================
   iTuti AOS (Ultra Light) — aos.css
   Objetivos: UX premium, leve, rápido, responsivo, acessível.
   Compatível com: [data-aos], .aos-init, .aos-animate
   Timing (delay/duration/easing) é setado via JS (inline styles).
   ========================================================= */

/* Base: comportamento padrão de qualquer elemento com data-aos */
[data-aos]{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition-property: opacity, transform;
  /* duração/easing/delay ficam via inline (setNodeTiming no JS) */
  will-change: opacity, transform;
}

/* Quando inicializa (classe aplicada no init) */
.aos-init[data-aos]{
  /* mantém will-change só enquanto precisa */
  backface-visibility: hidden;
}

/* Estado animado */
.aos-animate[data-aos]{
  opacity: 1;
  transform: none;
  will-change: auto; /* libera custo de render */
}

/* =========================================================
   EASING PRESETS (opcionais)
   Se algum elemento definir data-aos-easing, o JS já aplica no inline.
   Mas se você quiser forçar via CSS (fallback), mantém poucos.
   ========================================================= */
[data-aos-easing="linear"]{ transition-timing-function: linear; }
[data-aos-easing="ease"]{ transition-timing-function: ease; }
[data-aos-easing="ease-in"]{ transition-timing-function: ease-in; }
[data-aos-easing="ease-out"]{ transition-timing-function: ease-out; }
[data-aos-easing="ease-in-out"]{ transition-timing-function: ease-in-out; }

/* =========================================================
   FADE (tech premium: micro movimento, nada de 100px)
   ========================================================= */
[data-aos="fade"]{ transform: none; }

[data-aos="fade-up"]{ transform: translate3d(0, 14px, 0); }
[data-aos="fade-down"]{ transform: translate3d(0, -14px, 0); }
[data-aos="fade-right"]{ transform: translate3d(-14px, 0, 0); }
[data-aos="fade-left"]{ transform: translate3d(14px, 0, 0); }

[data-aos="fade-up-right"]{ transform: translate3d(-12px, 12px, 0); }
[data-aos="fade-up-left"]{ transform: translate3d(12px, 12px, 0); }
[data-aos="fade-down-right"]{ transform: translate3d(-12px, -12px, 0); }
[data-aos="fade-down-left"]{ transform: translate3d(12px, -12px, 0); }

/* =========================================================
   ZOOM (sutil; ERP não é pra fazer "show")
   ========================================================= */
[data-aos="zoom-in"]{ transform: scale(.96); }
[data-aos="zoom-out"]{ transform: scale(1.04); }

[data-aos="zoom-in-up"]{ transform: translate3d(0, 12px, 0) scale(.96); }
[data-aos="zoom-in-down"]{ transform: translate3d(0, -12px, 0) scale(.96); }
[data-aos="zoom-in-right"]{ transform: translate3d(-12px, 0, 0) scale(.96); }
[data-aos="zoom-in-left"]{ transform: translate3d(12px, 0, 0) scale(.96); }

[data-aos="zoom-out-up"]{ transform: translate3d(0, 12px, 0) scale(1.04); }
[data-aos="zoom-out-down"]{ transform: translate3d(0, -12px, 0) scale(1.04); }
[data-aos="zoom-out-right"]{ transform: translate3d(-12px, 0, 0) scale(1.04); }
[data-aos="zoom-out-left"]{ transform: translate3d(12px, 0, 0) scale(1.04); }

/* =========================================================
   SLIDE (mantém, mas sem exagero)
   (slide costuma ser mais "agressivo"; por padrão só transform)
   ========================================================= */
[data-aos^="slide"]{
  transition-property: transform;
  opacity: 1;                 /* slide não precisa sumir */
}

[data-aos="slide-up"]{ transform: translate3d(0, 18px, 0); }
[data-aos="slide-down"]{ transform: translate3d(0, -18px, 0); }
[data-aos="slide-right"]{ transform: translate3d(-18px, 0, 0); }
[data-aos="slide-left"]{ transform: translate3d(18px, 0, 0); }

.aos-animate[data-aos^="slide"]{
  transform: none;
}

/* =========================================================
   FLIP (muito raro em ERP; mantido mas domado)
   ========================================================= */
[data-aos^="flip"]{
  backface-visibility: hidden;
  transition-property: transform, opacity;
  transform-style: preserve-3d;
}

[data-aos="flip-left"]{ transform: perspective(1600px) rotateY(-16deg); }
[data-aos="flip-right"]{ transform: perspective(1600px) rotateY(16deg); }
[data-aos="flip-up"]{ transform: perspective(1600px) rotateX(-16deg); }
[data-aos="flip-down"]{ transform: perspective(1600px) rotateX(16deg); }

.aos-animate[data-aos^="flip"]{
  transform: none;
}

/* =========================================================
   Performance guardrails
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  [data-aos]{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}

/* Se você quiser desativar animações via classe no html/body */
html.aos-off [data-aos],
body.aos-off [data-aos]{
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}
