/* ==========================================================================
   ENGTEC — Animations: Scroll Reveals, Counters, Micro-interactions
   ========================================================================== */

/* ── Scroll Reveal Base ───────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
}

.reveal--left {
    transform: translateX(-40px);
}

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

.reveal--scale {
    transform: scale(0.95);
}

.reveal--visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Staggered children */
.reveal-stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

.reveal-stagger--visible>*:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-stagger--visible>*:nth-child(2) {
    transition-delay: 100ms;
}

.reveal-stagger--visible>*:nth-child(3) {
    transition-delay: 200ms;
}

.reveal-stagger--visible>*:nth-child(4) {
    transition-delay: 300ms;
}

.reveal-stagger--visible>*:nth-child(5) {
    transition-delay: 400ms;
}

.reveal-stagger--visible>*:nth-child(6) {
    transition-delay: 500ms;
}

.reveal-stagger--visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* ── Line Draw Effect ─────────────────────────────────────────────────────── */
.line-draw {
    position: relative;
}

.line-draw::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width var(--duration-slow) var(--ease-out);
}

.line-draw--visible::after {
    width: 60px;
}

/* ── Counter Animation ────────────────────────────────────────────────────── */
@keyframes counter-fill {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.counter-animated {
    animation: counter-fill var(--duration-slow) var(--ease-out) forwards;
}

/* ── Pulse Effect (WhatsApp) ──────────────────────────────────────────────── */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-float {
    animation: pulse-ring 2.5s ease-out infinite;
}

/* ── Logo Diamond Rotation ────────────────────────────────────────────────── */
@keyframes diamond-float {

    0%,
    100% {
        transform: translateY(-50%) rotate(0deg);
    }

    50% {
        transform: translateY(calc(-50% - 10px)) rotate(2deg);
    }
}

.hero__diamond {
    animation: diamond-float 6s var(--ease-in-out) infinite;
}

/* ── Diagonal Slide In (for page hero accent) ─────────────────────────────── */
@keyframes diagonal-slide {
    from {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    }

    to {
        clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

.hero__bg::before {
    animation: diagonal-slide var(--duration-slower) var(--ease-out) 0.3s both;
}

/* ── Nav Link Underline Glow ──────────────────────────────────────────────── */
.nav__link::after {
    box-shadow: 0 0 0 rgba(14, 154, 167, 0);
    transition:
        width var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.nav__link:hover::after {
    box-shadow: 0 2px 8px rgba(14, 154, 167, 0.3);
}

/* ── Card Border Shimmer ──────────────────────────────────────────────────── */
@keyframes border-shimmer {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

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

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

    .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal-stagger>* {
        opacity: 1;
        transform: none;
    }

    .hero__diamond {
        animation: none;
        transform: translateY(-50%);
    }

    .whatsapp-float {
        animation: none;
    }
}