/* =========================================================================
   animations.css — animações suaves e discretas
   ========================================================================= */

/* Scroll reveal: estado inicial */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.diff-card.reveal { transition-delay: var(--d, 0ms); }

/* Hero entra suave */
.hero-content.reveal { opacity: 0; transform: translateY(20px); animation: heroIn .9s ease .15s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Indicador de scroll no hero */
@keyframes scrollDot {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 1000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20,8,14,.92); padding: 24px;
    opacity: 0; transition: opacity .3s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox img {
    max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 40px 90px rgba(0,0,0,.6);
    transform: scale(.96); transition: transform .3s ease;
}
.lightbox.open img { transform: scale(1); }
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; font-size: 26px; transition: background .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close { top: 18px; right: 18px; transform: none; }
.lb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; letter-spacing: .05em; }
@media (max-width: 600px) { .lb-prev, .lb-next { width: 44px; height: 44px; } }

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