/* ==========================================================================
   EVENTIQO — ANIMATIONS.CSS
   Scroll Reveal · Stagger · Entrance · Motion Safety
   ========================================================================== */

/* ─── Reveal System (IntersectionObserver) ─────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
        transform var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94));
    transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade only — for items that don't move */
.reveal-fade {
    opacity: 0;
    transition: opacity var(--duration-reveal, 0.6s) ease;
    transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

.reveal-fade.visible {
    opacity: 1;
}

/* Reveal from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
        opacity var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
        transform var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94));
    transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition:
        opacity var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
        transform var(--duration-reveal, 0.6s) var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94));
    transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ─── Accent Line Draw Keyframe ────────────────────────────────────────── */
@keyframes lineDrawLeft {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

.accent-line--animate {
    animation: lineDrawLeft 0.6s var(--ease-reveal, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

/* ─── Page Entrance (below-hero content) ───────────────────────────────── */
.page-entrance {
    opacity: 0;
    transform: translateY(16px);
    animation: pageEnter 0.6s var(--ease-reveal) forwards;
    animation-delay: 0.2s;
}

@keyframes pageEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Hover Image Brightness (Gallery "Curated Reveal") ────────────────── */
.img-reveal {
    filter: saturate(0.85);
    transform: scale(1);
    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

.img-reveal:hover {
    filter: saturate(1);
    transform: scale(1.03);
}

/* ─── Testimonial Transition ───────────────────────────────────────────── */
.testimonial-content {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.testimonial-content.exiting {
    opacity: 0;
    transform: translateY(-12px);
}

.testimonial-content.entering {
    opacity: 0;
    transform: translateY(12px);
}

.testimonial-content.active {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Nav Transition (transparent → solid) ─────────────────────────────── */
.site-nav {
    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* ─── WhatsApp FAB entrance ────────────────────────────────────────────── */
@keyframes fabEntrance {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.whatsapp-fab.visible {
    animation: fabEntrance 0.4s var(--ease-reveal) forwards;
}

/* ─── Gallery Caption Slide-Up ─────────────────────────────────────────── */
.gallery-caption {
    transform: translateY(100%);
    transition: transform 0.35s var(--ease-reveal);
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* ─── Button CTA Border-Trace ──────────────────────────────────────────── */
@keyframes borderTrace {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ─── Reduced Motion Override ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-fade,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .page-entrance {
        opacity: 1;
        animation: none;
    }

    .img-reveal {
        filter: saturate(1);
        transition: none;
    }

    .testimonial-content {
        transition: none;
    }
}