/**
 * Clean Theme — Animações
 *
 * Port em CSS puro das utilidades da biblioteca "tailwindcss-animated"
 * (https://www.tailwindcss-animated.com/) para uso sem build de Tailwind,
 * acrescido de gatilhos "animar ao rolar" (scroll reveal).
 *
 * Uso:
 *   - Animação imediata:  class="animate-fade-up animate-duration-700"
 *   - Ao entrar na tela:  data-animate="fade-up" data-animate-delay="150"
 *
 * Todas as animações respeitam prefers-reduced-motion.
 */

/* ================================================================= *
 * 1. Keyframes (equivalentes aos da tailwindcss-animated)
 * ================================================================= */
@keyframes fade        { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-down    { from { opacity: 0; transform: translateY(-2rem) } to { opacity: 1; transform: translateY(0) } }
@keyframes fade-up      { from { opacity: 0; transform: translateY(2rem) }  to { opacity: 1; transform: translateY(0) } }
@keyframes fade-left    { from { opacity: 0; transform: translateX(2rem) }  to { opacity: 1; transform: translateX(0) } }
@keyframes fade-right   { from { opacity: 0; transform: translateX(-2rem) } to { opacity: 1; transform: translateX(0) } }
@keyframes flip-up      { from { transform: rotateX(90deg);  transform-origin: bottom } to { transform: rotateX(0); transform-origin: bottom } }
@keyframes flip-down    { from { transform: rotateX(-90deg); transform-origin: top }    to { transform: rotateX(0); transform-origin: top } }
@keyframes zoom-in      { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: scale(1) } }
@keyframes wiggle       { 0%,100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes wiggle-more  { 0%,100% { transform: rotate(-12deg) } 50% { transform: rotate(12deg) } }
@keyframes shake        { 0% { transform: translateX(0) } 25% { transform: translateX(-1rem) } 75% { transform: translateX(1rem) } 100% { transform: translateX(0) } }
@keyframes jump         { 0%,100% { transform: scale(1) } 10% { transform: scale(.8) } 50% { transform: scale(1.2) } }
@keyframes jump-in      { 0% { transform: scale(0) } 80% { transform: scale(1.2) } 100% { transform: scale(1) } }
@keyframes jump-out     { 0% { transform: scale(1) } 20% { transform: scale(1.2) } 100% { transform: scale(0) } }
@keyframes rotate-x     { 0% { transform: rotateX(360deg) } 100% { transform: rotateX(0) } }
@keyframes rotate-y     { 0% { transform: rotateY(360deg) } 100% { transform: rotateY(0) } }
@keyframes ct-spin      { to { transform: rotate(360deg) } }
@keyframes ct-ping      { 75%,100% { transform: scale(2); opacity: 0 } }
@keyframes ct-pulse     { 50% { opacity: .5 } }
@keyframes ct-bounce {
    0%,100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1) }
    50%     { transform: translateY(0);    animation-timing-function: cubic-bezier(0,0,.2,1) }
}

/* ================================================================= *
 * 2. Utilidades de animação  (animate-*)
 * ================================================================= */
.animate-fade        { animation: fade 1s ease both }
.animate-fade-down   { animation: fade-down 1s ease both }
.animate-fade-up     { animation: fade-up 1s ease both }
.animate-fade-left   { animation: fade-left 1s ease both }
.animate-fade-right  { animation: fade-right 1s ease both }
.animate-flip-up     { animation: flip-up 1s ease both }
.animate-flip-down   { animation: flip-down 1s ease both }
.animate-zoom-in     { animation: zoom-in 1s ease both }
.animate-wiggle      { animation: wiggle 1s ease both }
.animate-wiggle-more { animation: wiggle-more 1s ease both }
.animate-shake       { animation: shake .5s ease both }
.animate-jump        { animation: jump .5s ease both }
.animate-jump-in     { animation: jump-in .5s ease both }
.animate-jump-out    { animation: jump-out .5s ease both }
.animate-rotate-x    { animation: rotate-x 1s ease both }
.animate-rotate-y    { animation: rotate-y 1s ease both }
.animate-spin        { animation: ct-spin 1s linear infinite }
.animate-ping        { animation: ct-ping 1s cubic-bezier(0,0,.2,1) infinite }
.animate-pulse       { animation: ct-pulse 2s cubic-bezier(.4,0,.6,1) infinite }
.animate-bounce      { animation: ct-bounce 1s infinite }

/* ---- duração ------------------------------------------------------ */
.animate-duration-75   { animation-duration: 75ms }
.animate-duration-100  { animation-duration: 100ms }
.animate-duration-150  { animation-duration: 150ms }
.animate-duration-200  { animation-duration: 200ms }
.animate-duration-300  { animation-duration: 300ms }
.animate-duration-500  { animation-duration: 500ms }
.animate-duration-700  { animation-duration: 700ms }
.animate-duration-1000 { animation-duration: 1000ms }
.animate-duration-1500 { animation-duration: 1500ms }
.animate-duration-2000 { animation-duration: 2000ms }

/* ---- atraso ------------------------------------------------------- */
.animate-delay-none { animation-delay: 0s }
.animate-delay-75   { animation-delay: 75ms }
.animate-delay-100  { animation-delay: 100ms }
.animate-delay-150  { animation-delay: 150ms }
.animate-delay-200  { animation-delay: 200ms }
.animate-delay-300  { animation-delay: 300ms }
.animate-delay-500  { animation-delay: 500ms }
.animate-delay-700  { animation-delay: 700ms }
.animate-delay-1000 { animation-delay: 1000ms }

/* ---- timing-function -------------------------------------------- */
.animate-ease         { animation-timing-function: ease }
.animate-ease-linear  { animation-timing-function: linear }
.animate-ease-in      { animation-timing-function: cubic-bezier(.4,0,1,1) }
.animate-ease-out     { animation-timing-function: cubic-bezier(0,0,.2,1) }
.animate-ease-in-out  { animation-timing-function: cubic-bezier(.4,0,.2,1) }

/* ---- iteração / direção / fill / play-state -------------------- */
.animate-infinite { animation-iteration-count: infinite }
.animate-once     { animation-iteration-count: 1 }
.animate-twice    { animation-iteration-count: 2 }
.animate-normal            { animation-direction: normal }
.animate-reverse           { animation-direction: reverse }
.animate-alternate         { animation-direction: alternate }
.animate-alternate-reverse { animation-direction: alternate-reverse }
.animate-fill-none      { animation-fill-mode: none }
.animate-fill-forwards  { animation-fill-mode: forwards }
.animate-fill-backwards { animation-fill-mode: backwards }
.animate-fill-both      { animation-fill-mode: both }
.animate-run   { animation-play-state: running }
.animate-pause { animation-play-state: paused }

/* ================================================================= *
 * 3. Scroll reveal — elementos com [data-animate]
 * ================================================================= *
 * Estado inicial: escondido/deslocado. Ao receber .is-visible
 * (adicionada via IntersectionObserver em main.js) a animação roda.
 */
[data-animate] {
    opacity: 0;
    will-change: opacity, transform;
}

/* Sem JS: revela tudo (evita conteúdo preso invisível) */
html.no-js [data-animate],
html.no-js [data-animate-children] > * {
    opacity: 1 !important;
    transform: none !important;
}
[data-animate="fade"]       { }
[data-animate="fade-up"]     { transform: translateY(2rem) }
[data-animate="fade-down"]   { transform: translateY(-2rem) }
[data-animate="fade-left"]   { transform: translateX(2rem) }
[data-animate="fade-right"]  { transform: translateX(-2rem) }
[data-animate="zoom-in"]     { transform: scale(.92) }
[data-animate="flip-up"]     { transform: rotateX(90deg); transform-origin: bottom }

[data-animate].is-visible {
    animation-duration: var(--animate-duration, .7s);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-delay: var(--animate-delay, 0s);
    animation-fill-mode: both;
}
[data-animate="fade"].is-visible      { animation-name: fade }
[data-animate="fade-up"].is-visible    { animation-name: fade-up }
[data-animate="fade-down"].is-visible  { animation-name: fade-down }
[data-animate="fade-left"].is-visible  { animation-name: fade-left }
[data-animate="fade-right"].is-visible { animation-name: fade-right }
[data-animate="zoom-in"].is-visible    { animation-name: zoom-in }
[data-animate="flip-up"].is-visible    { animation-name: flip-up }

/* Escalonamento automático de filhos (ex.: grade de produtos) */
[data-animate-children] > * {
    opacity: 0;
    transform: translateY(1.5rem);
}
[data-animate-children].is-visible > * {
    animation: fade-up .6s cubic-bezier(.4, 0, .2, 1) both;
}
[data-animate-children].is-visible > *:nth-child(1)  { animation-delay: .00s }
[data-animate-children].is-visible > *:nth-child(2)  { animation-delay: .06s }
[data-animate-children].is-visible > *:nth-child(3)  { animation-delay: .12s }
[data-animate-children].is-visible > *:nth-child(4)  { animation-delay: .18s }
[data-animate-children].is-visible > *:nth-child(5)  { animation-delay: .24s }
[data-animate-children].is-visible > *:nth-child(6)  { animation-delay: .30s }
[data-animate-children].is-visible > *:nth-child(7)  { animation-delay: .36s }
[data-animate-children].is-visible > *:nth-child(8)  { animation-delay: .42s }
[data-animate-children].is-visible > *:nth-child(n+9) { animation-delay: .48s }

/* ================================================================= *
 * 4. Acessibilidade — reduzir movimento
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    [data-animate],
    [data-animate-children] > * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}