/* ==========================================================================
   Animations Stylesheet
   Keyframes + scroll-reveal utility classes + floating / hover micro-interactions.
   Scroll reveal: elements start hidden with [data-reveal]; script.js adds
   .is-visible via IntersectionObserver to trigger the transition.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

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

@keyframes spinIn {
    from { opacity: 0; transform: scale(0.8) rotate(-6deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------- Scroll Reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Directional reveal variants */
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.9); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="zoom"].is-visible  { transform: scale(1); }

/* Stagger helper — set inline via style="--delay:.1s" on children,
   or use these ready-made increment classes. */
[data-reveal].d1 { transition-delay: 0.08s; }
[data-reveal].d2 { transition-delay: 0.16s; }
[data-reveal].d3 { transition-delay: 0.24s; }
[data-reveal].d4 { transition-delay: 0.32s; }
[data-reveal].d5 { transition-delay: 0.40s; }

/* ---------- Floating cards (hero glass badges) ---------- */
.hero__float--tl { animation: float 5s ease-in-out infinite; }
.hero__float--br { animation: float 5s ease-in-out infinite 1.2s; }

/* ---------- WhatsApp pulse ---------- */
.float-btn--whatsapp { animation: pulse 2.4s infinite; }

/* ---------- Logo mark subtle intro ---------- */
.nav__logo-mark { animation: spinIn 0.6s var(--ease) both; }

/* ---------- Hover micro-interaction: icon lift on cards ---------- */
.feature-card:hover .feature-card__icon {
    transform: translateY(-4px) rotate(-4deg);
    transition: transform var(--transition);
}

/* ---------- Button shine on hover ---------- */
.btn--primary,
.btn--accent {
    position: relative;
    overflow: hidden;
}
.btn--primary::after,
.btn--accent::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease);
}
.btn--primary:hover::after,
.btn--accent:hover::after {
    left: 130%;
}

/* ---------- Counter subtle scale as it animates ---------- */
.stat__num.counting { animation: fadeInUp 0.6s var(--ease) both; }

/* ---------- Skeleton shimmer (used while images lazy-load, optional) ---------- */
.img-skeleton {
    background: linear-gradient(90deg, #e9edf5 25%, #f4f6fb 50%, #e9edf5 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
}