/* ===========================
   ALLCORE SOLUTION - ANIMATIONS CSS
   =========================== */

/* ===== KEYFRAMES ===== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.5); }
    50% { box-shadow: 0 0 0 14px rgba(26, 86, 219, 0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes borderPulse {
    0%, 100% { border-color: rgba(26, 86, 219, 0.3); }
    50% { border-color: rgba(0, 180, 255, 0.8); }
}
@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(26, 86, 219, 0.3); }
    50% { text-shadow: 0 0 24px rgba(0, 180, 255, 0.6), 0 0 48px rgba(26, 86, 219, 0.3); }
}

/* ===== HERO ANIMATIONS ===== */
.hero-badge {
    animation: fadeInDown 0.7s ease 0.2s both;
}
.hero-title .line1 {
    animation: fadeInLeft 0.7s ease 0.3s both;
}
.hero-title .line2 {
    animation: fadeInLeft 0.7s ease 0.45s both;
}
.hero-title .line3 {
    animation: fadeInLeft 0.7s ease 0.6s both;
}
.hero-desc {
    animation: fadeInUp 0.7s ease 0.7s both;
}
.hero-stats {
    animation: fadeInUp 0.7s ease 0.85s both;
}
.hero-btns {
    animation: fadeInUp 0.7s ease 1s both;
}
.hero-img-container {
    animation: scaleIn 0.9s ease 0.5s both;
}
.hero-social-side {
    animation: fadeInRight 0.7s ease 1.1s both;
}
.float-badge {
    animation: bounceIn 0.6s ease both;
}
.badge-1 { animation-delay: 1.2s; }
.badge-2 { animation-delay: 1.4s; }
.badge-3 { animation-delay: 1.6s; }
.badge-4 { animation-delay: 1.8s; }

/* ===== HERO TITLE GRADIENT TEXT ===== */
.hero-title .line2 {
    background: linear-gradient(90deg, #1a56db, #00b4ff, #1a56db);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInLeft 0.7s ease 0.45s both, shimmer 4s linear 1.5s infinite;
}

/* ===== STAT NUMBERS COUNTER ANIMATION ===== */
.stat-num {
    display: block;
    animation: scaleIn 0.5s ease both;
}

/* ===== FLOATING IMAGE RINGS ===== */
.img-ring.ring-1 {
    animation: rotateSlow 18s linear infinite;
}
.img-ring.ring-2 {
    animation: rotateSlow 24s linear infinite reverse;
}
.img-ring.ring-3 {
    animation: rotateSlow 12s linear infinite;
}
@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== CALL BTN PULSE ===== */
.call-btn {
    animation: callPulse 2.5s ease-in-out infinite;
}
@keyframes callPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(26, 86, 219, 0.4); }
    50% { box-shadow: 0 6px 36px rgba(26, 86, 219, 0.7), 0 0 0 6px rgba(26, 86, 219, 0.1); }
}

/* ===== WHATSAPP BTN PULSE ===== */
.whatsapp-btn {
    animation: waPulse 2.5s ease-in-out 1.2s infinite;
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 6px 36px rgba(37, 211, 102, 0.7), 0 0 0 6px rgba(37, 211, 102, 0.1); }
}

/* ===== SCROLL TOP BUTTON ===== */
#scrollTop:hover i {
    animation: bounceArrow 0.5s ease;
}
@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ===== NAVBAR ENTRANCE ===== */
.navbar {
    animation: fadeInDown 0.5s ease both;
}
.top-bar {
    animation: fadeInDown 0.4s ease both;
}

/* ===== TICKER ANIMATION ===== */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.ticker-track {
    animation: tickerScroll 30s linear infinite;
}

/* ===== SERVICE CARD ICON HOVER ===== */
.service-card:hover .sc-icon {
    animation: bounceIn 0.4s ease;
}

/* ===== LOADER ANIMATIONS ===== */
.loader-logo-circle {
    animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(26, 86, 219, 0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 70px rgba(0, 180, 255, 0.9); }
}
.loader-bar {
    animation: loadBar 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loadBar {
    0% { width: 0%; }
    20% { width: 30%; }
    60% { width: 75%; }
    90% { width: 95%; }
    100% { width: 100%; }
}

/* ===== ABOUT IMAGE FLOAT ===== */
.about-img-placeholder {
    animation: float 6s ease-in-out infinite;
}
.about-exp-badge {
    animation: float 5s ease-in-out 1s infinite;
}
.about-clients-badge {
    animation: float 5s ease-in-out 0.5s infinite reverse;
}

/* ===== PACKAGE CARD FEATURED GLOW ===== */
.pkg-card.featured {
    animation: featuredGlow 3s ease-in-out infinite;
}
@keyframes featuredGlow {
    0%, 100% { box-shadow: 0 24px 60px rgba(26, 86, 219, 0.4); }
    50% { box-shadow: 0 24px 80px rgba(26, 86, 219, 0.65), 0 0 0 1px rgba(0, 180, 255, 0.3); }
}

/* ===== BLOG CARD HOVER ICON ===== */
.blog-link i {
    transition: transform 0.3s ease;
}
.blog-card:hover .blog-link i {
    animation: arrowBounce 0.5s ease infinite alternate;
}
@keyframes arrowBounce {
    from { transform: translateX(0); }
    to { transform: translateX(5px); }
}

/* ===== FILTER BUTTON ACTIVE ===== */
.filter-btn.active {
    animation: scaleIn 0.25s ease;
}

/* ===== TESTIMONIAL CARD ENTRANCE ===== */
.swiper-slide-active .testi-card {
    animation: fadeInUp 0.5s ease;
}

/* ===== CONTACT FORM INPUT FOCUS ===== */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    animation: focusIn 0.3s ease;
}
@keyframes focusIn {
    from { transform: scale(0.99); }
    to { transform: scale(1); }
}

/* ===== SUBMIT BUTTON SUCCESS ===== */
.btn-submit.success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: successPop 0.4s ease;
}
@keyframes successPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ===== SCROLL PROGRESS BAR ===== */
#scroll-bar {
    transition: width 0.1s linear;
    background: linear-gradient(90deg, #1a56db, #00b4ff, #1a56db);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
}

/* ===== HERO PLACEHOLDER GLOW ===== */
.hero-img-placeholder {
    animation: heroGlow 4s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% { box-shadow: 0 20px 60px rgba(26, 86, 219, 0.4); }
    50% { box-shadow: 0 20px 80px rgba(0, 180, 255, 0.6), 0 0 120px rgba(26, 86, 219, 0.2); }
}

/* ===== SOCIAL SIDE LINE ===== */
.social-line {
    animation: growLine 1.5s ease 2s both;
}
@keyframes growLine {
    from { height: 0; opacity: 0; }
    to { height: 60px; opacity: 1; }
}

/* ===== SECTION TAG BADGE ===== */
.section-tag {
    animation: scaleIn 0.4s ease;
}

/* ===== NAV LINK UNDERLINE ===== */
.nav-link::after {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== FOOTER SOCIAL HOVER ===== */
.footer-social a:hover {
    animation: socialPop 0.3s ease;
}
@keyframes socialPop {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.1); }
    100% { transform: translateY(-3px) scale(1.05); }
}

/* ===== PROJECT CARD REVEAL ===== */
.proj-card:hover .proj-placeholder {
    animation: imgZoom 0.5s ease forwards;
}
@keyframes imgZoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* ===== NAVBAR SCROLL EFFECT ===== */
.navbar.scrolled {
    animation: navShrink 0.3s ease forwards;
}
@keyframes navShrink {
    from { padding: 12px 0; }
    to { padding: 8px 0; }
}

/* ===== HAMBURGER MENU ANIMATE ===== */
.hamburger span {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                background 0.3s ease;
}