/* ==========================================================================
   ZUPOLY PROJETOS LTDA — animations.css
   Keyframes, animações de entrada (scroll reveal) e efeitos de movimento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll Reveal
   Elementos com [data-reveal] iniciam invisíveis e são revelados por JS
   (animations.js) ao entrarem na viewport, recebendo a classe .is-visible.
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variações direcionais */
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="zoom"].is-visible  { transform: scale(1); }

/* Atrasos escalonados (efeito cascata) */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

/* --------------------------------------------------------------------------
   2. Keyframes
   -------------------------------------------------------------------------- */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes scroll-hint {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0.2; }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* --------------------------------------------------------------------------
   3. Aplicações
   -------------------------------------------------------------------------- */
.animate-float { animation: float-slow 5s ease-in-out infinite; }

.scroll-hint i { animation: scroll-hint 1.4s ease-in-out infinite alternate; }

/* Placeholder "shimmer" para imagens do portfólio ainda não carregadas */
.placeholder-shimmer {
    background: linear-gradient(90deg, #0f1c2e 25%, #16273d 50%, #0f1c2e 75%);
    background-size: 800px 100%;
    animation: shimmer 1.8s infinite linear;
}

/* --------------------------------------------------------------------------
   4. Preferência por menos movimento (acessibilidade)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero { background-attachment: scroll; }
}