/* =========================================================
   GermAc Arees — Reusable Animation System
   Scroll reveal + staggered entrances + hover utilities.
   Shared across Home (Sections 1–5) and About Us.

   GPU-friendly: animates only `opacity` and `transform`.
   Driven by animations.js (IntersectionObserver adds .is-visible).

   How to use (no new CSS/JS needed for future content):
     • Add class  "reveal"        → element fades/slides up on scroll.
     • Add attr   data-stagger     → direct children reveal one-by-one.
     • Add attr   data-hero        → runs the Section-1 entrance sequence.
     • Add class  "card-hover"     → reusable premium hover lift.
   Variants: reveal-left / reveal-right / reveal-zoom.
   ========================================================= */

:root {
    --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --anim-duration: 0.7s;
    --stagger-step: 90ms;
}

/* ---------- Scroll reveal ---------- */
.reveal,
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--anim-duration) var(--anim-ease),
        transform var(--anim-duration) var(--anim-ease);
    will-change: opacity, transform;
}

.reveal.is-visible,
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* directional variants */
.reveal-left {
    transform: translateX(-36px);
}

.reveal-right {
    transform: translateX(36px);
}

.reveal-zoom {
    transform: scale(0.96);
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-zoom.is-visible {
    transform: none;
}

/* ---------- Staggered children ----------
   Uses `animation` (not transition) with `backwards` fill so each
   card's OWN hover transition/transform is preserved after it reveals. */
[data-stagger] > * {
    opacity: 0;
}

[data-stagger].is-visible > * {
    opacity: 1;
    animation: reveal-up 0.62s var(--anim-ease) backwards;
    animation-delay: calc(var(--stagger-index, 0) * var(--stagger-step));
}

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Reusable hover utility (opt-in) ---------- */
.card-hover {
    transition: transform 0.3s var(--anim-ease),
        box-shadow 0.3s var(--anim-ease),
        border-color 0.3s var(--anim-ease),
        background-color 0.3s var(--anim-ease);
}

.card-hover:hover {
    transform: translateY(-6px);
}

/* ---------- Accessibility: honor reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    [data-reveal],
    [data-stagger] > *,
    [data-hero] .v-eyebrow,
    [data-hero] .v-title,
    [data-hero] .v-sub,
    [data-hero] .v-hero-content,
    [data-hero] .v-btn,
    [data-hero] .counter {
        opacity: 1 !important;
        transform: none !important;
    }
}