/* ==========================================================================
   IAL Pakistan - animation layer
   Loads after enhancements.css. Nothing here changes layout or content:
   hidden "before reveal" states only apply when JS has switched on
   html.ial-anim, so the site stays fully visible if scripts fail.
   Everything is switched off for visitors who prefer reduced motion.
   ========================================================================== */

:root {
  --ial-ease: cubic-bezier(.22, .8, .24, 1);
  --ial-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ial-red-a: #E63946;
  --ial-navy-a: #211D70;
}

/* ---------- 1. Page load / exit ---------------------------------------- */
@keyframes ialPageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ialHeaderIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }

html.ial-anim .header.fixed-top { animation: ialHeaderIn .8s var(--ial-ease) .05s backwards; }
html.ial-anim.ial-leaving body { opacity: 0; transition: opacity .12s ease; }

/* ---------- 2. Scroll progress bar ------------------------------------- */
.ial-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 2500; pointer-events: none; background: transparent;
}
.ial-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ial-red-a), #ff6b6b 55%, var(--ial-navy-a));
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 10px rgba(230, 57, 70, .55);
  will-change: transform;
}

/* ---------- 3. Home hero: caption + slow zoom -------------------------- */
@keyframes ialRiseIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ialTitleIn {
  from { opacity: 0; transform: translateY(40px); letter-spacing: .06em; filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: normal;  filter: blur(0); }
}
@keyframes ialKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes ialLineGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

html.ial-anim .header-carousel .owl-item.active .carousel-caption h1,
html.ial-anim .header-carousel .owl-item.active .carousel-caption .slide-title {
  animation: ialTitleIn 1s var(--ial-ease) .25s backwards;
}
html.ial-anim .header-carousel .owl-item.active .carousel-caption .lead {
  animation: ialRiseIn .9s var(--ial-ease) .55s backwards;
}
html.ial-anim .header-carousel .owl-item.active .carousel-caption .lead { transform-origin: left center; }
html.ial-anim .header-carousel .owl-item.active .carousel-caption .d-flex {
  animation: ialRiseIn .9s var(--ial-ease) .8s backwards;
}
html.ial-anim .header-carousel .owl-item.active .item img {
  animation: ialKenBurns 9s ease-out both;
}

/* ---------- 4. Inner-page heroes --------------------------------------- */
@keyframes ialFadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ialPop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ialFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ialSpinSlow { to { transform: rotate(360deg); } }

html.ial-anim .subpage-hero-section .breadcrumb,
html.ial-anim .authorized-hero-section .breadcrumb { animation: ialFadeDown .7s var(--ial-ease) .2s backwards; }
html.ial-anim .subpage-hero-section .hero-content h1,
html.ial-anim .authorized-hero-section .hero-content h1 { animation: ialTitleIn 1s var(--ial-ease) .35s backwards; }
html.ial-anim .subpage-hero-section .hero-content > p,
html.ial-anim .authorized-hero-section .hero-content > p { animation: ialRiseIn .9s var(--ial-ease) .6s backwards; }
html.ial-anim .subpage-hero-section .hero-content > *:not(h1):not(p),
html.ial-anim .authorized-hero-section .hero-content > *:not(h1):not(p) { animation: ialRiseIn .9s var(--ial-ease) .8s backwards; }

/* drifting light blobs injected into hero sections by animations.js */
.ial-hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ial-hero-glow i {
  position: absolute; border-radius: 50%; opacity: .55;
  will-change: transform;
}
.ial-hero-glow i:nth-child(1) { width: 340px; height: 340px; left: -80px; top: -90px; background: radial-gradient(circle, rgba(230, 57, 70, .55) 0%, rgba(230, 57, 70, 0) 68%); animation: ialDriftA 16s ease-in-out infinite alternate; }
.ial-hero-glow i:nth-child(2) { width: 420px; height: 420px; right: -120px; bottom: -160px; background: radial-gradient(circle, rgba(120, 112, 255, .5) 0%, rgba(120, 112, 255, 0) 68%); animation: ialDriftB 19s ease-in-out infinite alternate; }
.ial-hero-glow i:nth-child(3) { width: 220px; height: 220px; left: 46%; top: 20%; background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 68%); animation: ialDriftC 22s ease-in-out infinite alternate; }
@keyframes ialDriftA { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes ialDriftB { to { transform: translate(-160px, -70px) scale(1.2); } }
@keyframes ialDriftC { to { transform: translate(-90px, 120px) scale(.8); } }

/* 404 page */
html.ial-anim .error-hero-section .error-code { animation: ialPop .9s var(--ial-ease-spring) .15s backwards; }
html.ial-anim .error-hero-section .error-code span { display: inline-block; animation: ialFloatY 3.2s ease-in-out 1.2s infinite; }
html.ial-anim .error-hero-section .error-title { animation: ialRiseIn .8s var(--ial-ease) .45s backwards; }
html.ial-anim .error-hero-section .error-message { animation: ialRiseIn .8s var(--ial-ease) .65s backwards; }

/* ---------- 5. Scroll reveals ------------------------------------------ */
/* Hidden state only exists while the element is waiting to be revealed.
   Once revealed the attribute is removed, so hover effects behave normally. */
@keyframes ialRevUp    { from { opacity: 0; transform: translateY(40px); } }
@keyframes ialRevLeft  { from { opacity: 0; transform: translateX(-56px); } }
@keyframes ialRevRight { from { opacity: 0; transform: translateX(56px); } }
@keyframes ialRevZoom  { from { opacity: 0; transform: scale(.88); } }
@keyframes ialRevFade  { from { opacity: 0; } }
@keyframes ialRevPop   { from { opacity: 0; transform: translateY(30px) scale(.9); } }

html.ial-anim [data-ial]:not(.ial-in) { opacity: 0; }
html.ial-anim [data-ial="up"]:not(.ial-in)    { transform: translateY(40px); }
html.ial-anim [data-ial="left"]:not(.ial-in)  { transform: translateX(-56px); }
html.ial-anim [data-ial="right"]:not(.ial-in) { transform: translateX(56px); }
html.ial-anim [data-ial="zoom"]:not(.ial-in)  { transform: scale(.88); }
html.ial-anim [data-ial="pop"]:not(.ial-in)   { transform: translateY(30px) scale(.9); }

html.ial-anim [data-ial].ial-in { animation-duration: .85s; animation-timing-function: var(--ial-ease); animation-fill-mode: backwards; animation-delay: var(--ial-d, 0ms); }
html.ial-anim [data-ial="up"].ial-in    { animation-name: ialRevUp; }
html.ial-anim [data-ial="left"].ial-in  { animation-name: ialRevLeft; }
html.ial-anim [data-ial="right"].ial-in { animation-name: ialRevRight; }
html.ial-anim [data-ial="zoom"].ial-in  { animation-name: ialRevZoom; }
html.ial-anim [data-ial="fade"].ial-in  { animation-name: ialRevFade; }
html.ial-anim [data-ial="pop"].ial-in   { animation-name: ialRevPop; animation-timing-function: var(--ial-ease-spring); }

/* ---------- 6. Hover and focus micro-interactions ---------------------- */
/* Button light sweep */
.btn:not(.dropdown-toggle):not(.btn-lg-square):not(.btn-close),
.banner-cta-button, .contact-btn, .ial-download-btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.dropdown-toggle):not(.btn-lg-square):not(.btn-close)::after,
.banner-cta-button::after, .contact-btn::after, .ial-download-btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ial-ease); pointer-events: none; z-index: -1;
}
.btn:not(.dropdown-toggle):not(.btn-lg-square):not(.btn-close):hover::after,
.banner-cta-button:hover::after, .contact-btn:hover::after, .ial-download-btn:hover::after { left: 130%; }
.btn:not(:disabled):active, .banner-cta-button:active, .contact-btn:active { transform: translateY(0) scale(.97); }

/* Desktop nav underline */
@media (min-width: 992px) {
  .navbar-nav > .nav-item > .nav-link { position: relative; }
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::before {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
    background: var(--ial-red-a); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ial-ease);
  }
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::before,
  .navbar-nav > .nav-item > .nav-link.active:not(.dropdown-toggle)::before { transform: scaleX(1); }
}

/* Mega menu columns cascade in */
@keyframes ialMenuItem { from { opacity: 0; transform: translateY(12px); } }
.dropdown-menu.megamenu.show .col-md-3 { animation: ialMenuItem .45s var(--ial-ease) backwards; }
.dropdown-menu.megamenu.show .col-md-3:nth-child(1) { animation-delay: .02s; }
.dropdown-menu.megamenu.show .col-md-3:nth-child(2) { animation-delay: .07s; }
.dropdown-menu.megamenu.show .col-md-3:nth-child(3) { animation-delay: .12s; }
.dropdown-menu.megamenu.show .col-md-3:nth-child(4) { animation-delay: .17s; }
.dropdown-menu.megamenu.show .col-md-3:nth-child(n+5) { animation-delay: .22s; }

/* Product cards: image zoom */
.product-card .card-img-top { transition: transform .7s var(--ial-ease); }
.product-card:hover .card-img-top { transform: scale(1.07); }

/* Icons: little bounce when their card is hovered */
@keyframes ialIconBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(2px); } }
.stat-card-item:hover .stat-card-icon i,
.service-card-item:hover .service-icon-wrapper i,
.contact-info-card:hover .contact-info-icon i,
.info-item:hover i { animation: ialIconBounce .6s var(--ial-ease); }

/* Floating WhatsApp button: entrance */
@keyframes ialFabIn { 0% { opacity: 0; transform: translateY(40px) scale(.4); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
html.ial-anim .floating_btn { animation: ialFabIn .8s var(--ial-ease-spring) 1.4s backwards; }

/* Footer social icons + links */
.footer .social-links a { transition: transform .3s var(--ial-ease-spring), background .3s ease; }
.footer .social-links a:hover { transform: translateY(-4px) rotate(8deg) scale(1.1); }

/* FAQ: answer eases open */
@keyframes ialFaqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-item[open] .faq-answer { animation: ialFaqOpen .4s var(--ial-ease); }
.faq-item summary::after { transition: transform .35s var(--ial-ease), background .25s, color .25s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* Section badges: soft glow pulse */
@keyframes ialBadgeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); } 50% { box-shadow: 0 0 0 7px rgba(230, 57, 70, .12); } }
.services-badge, .stats-subtitle, .clients-badge { animation: ialBadgeGlow 3.6s ease-in-out infinite; }

/* Form fields lift gently on focus */
.form-input-field:focus, .form-textarea-field:focus { transform: translateY(-2px); }
.form-input-field, .form-textarea-field { transition: all .3s ease, transform .3s var(--ial-ease); }

/* Form status messages slide in */
@keyframes ialStatusIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.form-status { animation: ialStatusIn .4s var(--ial-ease); }

/* ---------- 7. Safety nets --------------------------------------------- */
@media print {
  html.ial-anim [data-ial]:not(.ial-in) { opacity: 1 !important; transform: none !important; }
  .ial-progress, .ial-hero-glow { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.ial-anim [data-ial]:not(.ial-in) { opacity: 1 !important; transform: none !important; }
  .ial-progress, .ial-hero-glow { display: none !important; }
  .services-badge, .stats-subtitle, .clients-badge { animation: none !important; }
}