/* =========================================================
   AJVANTIQA TECHNOLOGY
   ANIMATIONS & TRANSITIONS
========================================================= */


/* =========================================================
   PRELOADER ANIMATIONS
========================================================= */

@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.03); }
}

@keyframes loaderMove {
    0%   { left: -100%; }
    100% { left:  100%; }
}


/* =========================================================
   FLOATING / HERO ANIMATIONS
========================================================= */

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

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(190, 127, 3, 0.15); }
    50%       { box-shadow: 0 0 0 8px rgba(190, 127, 3, 0.08); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   SCROLL REVEAL CLASSES
   (driven by IntersectionObserver in animations.js)
========================================================= */

.reveal,
.fade-up,
.fade-left,
.fade-right {
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal,
.fade-up {
    transform: translateY(36px);
}

.fade-left {
    transform: translateX(-36px);
}

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

.reveal.visible,
.fade-up.visible,
.fade-left.visible,
.fade-right.visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* =========================================================
   STAGGER DELAY HELPERS
   (applied via JS for card groups)
========================================================= */

.stagger-1  { transition-delay: 0.05s; }
.stagger-2  { transition-delay: 0.10s; }
.stagger-3  { transition-delay: 0.15s; }
.stagger-4  { transition-delay: 0.20s; }
.stagger-5  { transition-delay: 0.25s; }
.stagger-6  { transition-delay: 0.30s; }
.stagger-7  { transition-delay: 0.35s; }
.stagger-8  { transition-delay: 0.40s; }


/* =========================================================
   COUNTER (number roll)
========================================================= */

[data-counter] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   HOVER LIFT UTILITY
========================================================= */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(25, 24, 82, 0.12);
}


/* =========================================================
   PULSE RING (used on hero label dot)
========================================================= */

.hero-label-dot {
    animation: pulseDot 2.5s ease-in-out infinite;
}


/* =========================================================
   AI LOGO RINGS (rotation)
========================================================= */

.ai-ring-one  { animation: rotateSlow 18s linear infinite; }
.ai-ring-two  { animation: rotateSlow 12s linear infinite reverse; }
.ai-ring-three { animation: rotateSlow 8s linear infinite; }


/* =========================================================
   FLOATING HERO STAT CARDS
========================================================= */

.hero-stat-one {
    animation: floatUpDown 5s ease-in-out infinite;
}

.hero-stat-two {
    animation: floatUpDown 5s ease-in-out 1.5s infinite;
}


/* =========================================================
   PAGE LOAD — hero content staggers
========================================================= */

.js-loaded .hero-content .hero-label {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.1s;
}

.js-loaded .hero-content h1 {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.2s;
}

.js-loaded .hero-content .hero-desc {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.32s;
}

.js-loaded .hero-content .hero-actions {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.44s;
}

.js-loaded .hero-content .hero-trust-row {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.54s;
}

.js-loaded .hero-visual {
    animation: scaleIn 0.9s ease both;
    animation-delay: 0.3s;
}


/* =========================================================
   REDUCED MOTION OVERRIDE
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}