/* =========================================================
   ANIMATIONS & HOVER EFFECTS
========================================================= */

/* ---- Scroll reveal (only when JS is running) ---- */
.js .reveal{opacity:0;translate:0 34px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
.js .reveal.reveal-left{translate:-46px 0;}
.js .reveal.reveal-right{translate:46px 0;}
.js .reveal.reveal-zoom{translate:none;scale:.88;}
.js .reveal.in{opacity:1;translate:none;scale:none;}

/* ---- Keyframes ---- */
@keyframes heroUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes heroRight{from{opacity:0;transform:translateX(50px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes shine{from{left:-80%;}to{left:130%;}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.12);}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(26,152,166,.5);}50%{box-shadow:0 0 0 5px rgba(26,152,166,0);}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes ring{0%,60%,100%{transform:rotate(0);}65%,75%,85%{transform:rotate(-14deg);}70%,80%{transform:rotate(14deg);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.95);}to{opacity:1;transform:none;}}

/* ---- Hero entrance on page load ---- */
.hero-badge,.hero h1,.hero-desc,.hero-pills,.hero-trust,.hero-actions{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) both;}
.hero-badge{animation-delay:.05s;}
.hero h1{animation-delay:.15s;}
.hero-desc{animation-delay:.28s;}
.hero-pills{animation-delay:.4s;}
.hero-trust{animation-delay:.52s;}
.hero-actions{animation-delay:.64s;}
.hero-form-card{animation:heroRight .9s .3s cubic-bezier(.2,.7,.2,1) both;}
.hero::before{animation:blob 12s ease-in-out infinite;}
.hero-badge i{animation:floatY 2.6s ease-in-out infinite;}

/* ---- Navbar ---- */
.navbar{transition:box-shadow .3s,background .3s;}
.navbar .container{transition:padding .3s;}
.navbar .logo img{transition:height .3s,transform .3s;}
.navbar.scrolled{background:rgba(11,75,87,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(0,0,0,.25);}
.navbar.scrolled .container{padding-top:7px;padding-bottom:7px;}
.logo:hover img{transform:scale(1.04);}
.nav-links > li > a{position:relative;}
.nav-links > li > a::after{content:'';position:absolute;left:0;bottom:4px;height:2px;width:0;background:var(--slate);border-radius:2px;transition:width .3s;}
.nav-links > li > a:hover::after{width:100%;}
.nav-item-services:hover .mega-dropdown{animation:heroUp .25s ease both;}
.mega-col ul li a{transition:background .2s,color .2s,padding-left .2s;}
.mega-col ul li a:hover{padding-left:16px;}
.nav-phone i{transition:transform .4s;}
.nav-phone:hover i{transform:rotate(-15deg) scale(1.1);}

/* ---- Button shine sweep ---- */
.btn-primary:hover{box-shadow:0 10px 24px rgba(11,75,87,.28);}
.btn-wa:hover{box-shadow:0 10px 24px rgba(37,211,102,.35);}
.btn-submit:hover i{transform:translateX(4px) rotate(8deg);}

/* ---- Hero bits ---- */
.hero-pills span{transition:all .25s;cursor:default;}
.hero-pills span:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-3px);box-shadow:0 8px 18px rgba(11,75,87,.2);}
.hero-trust i{transition:transform .35s,background .3s;}
.hero-trust div:hover i{transform:rotate(-10deg) scale(1.12);background:var(--brand-bright);}
.hero-form-card{transition:box-shadow .3s;}
.hero-form-card:hover{box-shadow:0 30px 70px rgba(4,35,42,.2);}
.form-group input,.form-group select,.form-group textarea{transition:border-color .2s,box-shadow .2s,background .2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{box-shadow:0 0 0 4px rgba(26,152,166,.14);}

/* ---- Trusted strip & stats ---- */
.trusted-strip span.item{transition:color .3s,transform .3s;}
.trusted-strip span.item i{transition:color .3s;}
.trusted-strip span.item:hover{color:var(--brand);transform:translateY(-2px);}
.trusted-strip span.item:hover i{color:var(--brand-mid);}
.stat-item h3{transition:transform .3s;}
.stat-item:hover h3{transform:scale(1.08);}

/* ---- Section badge ---- */
.section-badge::before{animation:pulseDot 1.8s ease-in-out infinite;}


/* ---- Documents ---- */
.doc-tab-btn:hover:not(.active){background:var(--slate-soft);color:var(--brand);transform:translateY(-2px);}
.doc-item{transition:transform .25s,box-shadow .25s,background .25s;}
.doc-item:hover{transform:translateY(-3px);background:#fff;box-shadow:0 10px 24px rgba(4,35,42,.1);}
.doc-panel.active .doc-item{animation:heroUp .45s ease both;}
.doc-panel.active .doc-item:nth-child(2){animation-delay:.05s;}
.doc-panel.active .doc-item:nth-child(3){animation-delay:.1s;}
.doc-panel.active .doc-item:nth-child(4){animation-delay:.15s;}
.doc-panel.active .doc-item:nth-child(5){animation-delay:.2s;}
.doc-panel.active .doc-item:nth-child(6){animation-delay:.25s;}

/* ---- Process ---- */
.process-num{transition:background .35s,color .35s,transform .35s;}
.process-step:hover .process-num{background:var(--brand);color:#fff;transform:translateY(-6px);}
.process-step:hover .process-num small{background:var(--brand-bright);}

/* ---- Connect ---- */
.connect-option-card:hover{box-shadow:0 18px 36px rgba(4,35,42,.16);}
.connect-option-icon{transition:transform .4s;}
.connect-option-card:hover .connect-option-icon{transform:rotate(-12deg) scale(1.1);}

/* ---- Why choose us ---- */
.why-item i{transition:transform .6s,background .3s;}
.why-item:hover i{transform:rotateY(180deg);background:#fff;}
.why-item:hover{border-color:rgba(197,206,210,.45);}

/* ---- Countries ---- */
.country-filter-btn:hover:not(.active){background:var(--slate-soft);color:var(--brand);}
.country-flag img{transition:transform .3s;}
.country-card:hover .country-flag img{transform:scale(1.15) rotate(-3deg);}
.country-card.pop{animation:zoomIn .4s ease both;}

/* ---- Testimonials ---- */
.testi-card{transition:transform .3s,box-shadow .3s;}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(4,35,42,.14);}
.testi-card::after{transition:color .3s;}
.testi-card:hover::after{color:var(--slate);}
.testi-avatar{transition:transform .4s;}
.testi-card:hover .testi-avatar{transform:scale(1.1) rotate(-6deg);}

/* ---- FAQ ---- */
.faq-item:hover:not(.active){border-color:var(--slate);}
.faq-q{transition:color .2s;}
.faq-q:hover{color:var(--brand-mid);}

/* ---- CTA box ---- */
.cta-box{transition:transform .4s,box-shadow .4s;}
.cta-box:hover{transform:translateY(-6px);box-shadow:0 40px 80px rgba(4,35,42,.35);}
.cta-box::after{animation:spinSlow 18s linear infinite;}
.cta-box-icon{animation:floatY 3s ease-in-out infinite;}
.cta-box:hover .cta-box-icon{background:#fff;}
@keyframes spinSlow{to{transform:rotate(360deg);}}

/* ---- Footer & socials ---- */
footer ul li a{display:inline-block;transition:color .2s,transform .2s;}
footer ul li a:hover{transform:translateX(5px);}
.footer-social a:hover,.top-bar-social a:hover{transform:translateY(-3px) rotate(8deg);}

/* ---- Floating buttons ---- */
.fab-call i{animation:ring 2.4s ease-in-out infinite;}

/* ---- Modal ---- */
.modal-overlay.active{animation:fadeIn .25s ease both;}
.modal-overlay.active .modal-box{animation:modalIn .35s cubic-bezier(.2,.8,.2,1.2) both;}
.modal-close{transition:transform .3s,background .3s;}
.modal-close:hover{transform:rotate(90deg);background:var(--slate-soft);}

/* ---- Touch screens: no hover lifts that "stick" after tapping ---- */
@media (hover:none){
  .srow:hover,.testi-card:hover,.doc-item:hover,.country-card:hover,.connect-option-card:hover,.why-item:hover{transform:none;}
}

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .js .reveal{opacity:1;translate:none;scale:none;}
}
