/* ============================================================
   MINZAJ SOLUTIONS — animations.css  v4.0
   Loader · reveals · keyframes · micro-interactions
   ============================================================ */

/* ── PAGE LOADER ─────────────────────────────────────────── */
#page-loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:20px;
  transition:opacity .55s ease, visibility .55s ease;
}
#page-loader.loaded { opacity:0; visibility:hidden; pointer-events:none; }

.loader-logo { height:38px; width:auto; opacity:0; animation:loaderLogoIn .4s ease .1s forwards; }
@keyframes loaderLogoIn { to { opacity:.7; } }

.loader-ring {
  width:32px; height:32px;
  border:2px solid rgba(37,99,235,0.2);
  border-top-color:var(--blue); border-radius:50%;
  animation:loaderSpin .75s linear infinite;
}
@keyframes loaderSpin { to { transform:rotate(360deg); } }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.fade-up    { opacity:0; transform:translateY(32px);  transition:opacity .7s ease, transform .7s ease; }
.fade-in    { opacity:0;                               transition:opacity .7s ease; }
.fade-left  { opacity:0; transform:translateX(-32px); transition:opacity .7s ease, transform .7s ease; }
.fade-right { opacity:0; transform:translateX(32px);  transition:opacity .7s ease, transform .7s ease; }
.scale-in   { opacity:0; transform:scale(0.93);       transition:opacity .6s ease, transform .6s ease; }

.fade-up.visible,.fade-in.visible,.fade-left.visible,.fade-right.visible,.scale-in.visible {
  opacity:1; transform:none;
}

/* Stagger */
.stagger > *:nth-child(1){transition-delay:.04s;}
.stagger > *:nth-child(2){transition-delay:.10s;}
.stagger > *:nth-child(3){transition-delay:.17s;}
.stagger > *:nth-child(4){transition-delay:.24s;}
.stagger > *:nth-child(5){transition-delay:.31s;}
.stagger > *:nth-child(6){transition-delay:.38s;}
.stagger > *:nth-child(7){transition-delay:.45s;}
.stagger > *:nth-child(8){transition-delay:.52s;}

/* ── NAVBAR ENTRANCE ──────────────────────────────────────── */
#navbar { animation:navIn .5s ease both .1s; }
@keyframes navIn { from{opacity:0;transform:translateY(-16px);} to{opacity:1;transform:none;} }

/* ── HERO CONTENT ENTRANCE ────────────────────────────────── */
.hero-content > * { opacity:0; animation:heroIn .75s ease forwards; }
.hero-content > *:nth-child(1){ animation-delay:.15s; }
.hero-content > *:nth-child(2){ animation-delay:.26s; }
.hero-content > *:nth-child(3){ animation-delay:.38s; }
.hero-content > *:nth-child(4){ animation-delay:.50s; }
.hero-content > *:nth-child(5){ animation-delay:.62s; }
.hero-content > *:nth-child(6){ animation-delay:.74s; }
.hero-content > *:nth-child(7){ animation-delay:.86s; }
@keyframes heroIn { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:none;} }

.hero-right { opacity:0; animation:heroRight .95s ease forwards .7s; }
@keyframes heroRight { from{opacity:0;transform:translateX(36px);} to{opacity:1;transform:none;} }

/* ── FLOATING CARDS ───────────────────────────────────────── */
@keyframes floatA { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-10px);} }
@keyframes floatB { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-13px);} }
@keyframes floatC { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-7px);} }
@keyframes floatD { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-11px);} }

/* ── BADGE PULSE ──────────────────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}  50%{opacity:.4;transform:scale(1.5);} }
.badge-dot { animation:pulse 2.4s infinite; }

/* ── HERO BAR CHART ───────────────────────────────────────── */
@keyframes barGrow { from{transform:scaleY(0);} to{transform:scaleY(1);} }
.mbar { transform-origin:bottom; animation:barGrow .6s cubic-bezier(.34,1.3,.64,1) both; }
.mbar:nth-child(1){animation-delay:.38s;} .mbar:nth-child(2){animation-delay:.46s;}
.mbar:nth-child(3){animation-delay:.54s;} .mbar:nth-child(4){animation-delay:.62s;}
.mbar:nth-child(5){animation-delay:.70s;} .mbar:nth-child(6){animation-delay:.78s;}
.mbar:nth-child(7){animation-delay:.86s;}

/* ── BUTTON GLOW ──────────────────────────────────────────── */
@keyframes btnGlow { 0%,100%{box-shadow:0 4px 20px rgba(37,99,235,0.34);} 50%{box-shadow:0 8px 32px rgba(37,99,235,0.6);} }
.btn-glow { animation:btnGlow 3s ease-in-out infinite; }

/* ── MOBILE MENU LINKS ────────────────────────────────────── */
.mobile-menu.open .mobile-menu-links a { animation:menuLinkIn .42s ease both; }
.mobile-menu.open .mobile-menu-links a:nth-child(1){animation-delay:.05s;}
.mobile-menu.open .mobile-menu-links a:nth-child(2){animation-delay:.10s;}
.mobile-menu.open .mobile-menu-links a:nth-child(3){animation-delay:.15s;}
.mobile-menu.open .mobile-menu-links a:nth-child(4){animation-delay:.20s;}
.mobile-menu.open .mobile-menu-links a:nth-child(5){animation-delay:.25s;}
.mobile-menu.open .mobile-menu-links a:nth-child(6){animation-delay:.30s;}
@keyframes menuLinkIn { from{opacity:0;transform:translateX(-28px);} to{opacity:1;transform:none;} }

.mobile-menu.open .mobile-menu-footer { animation:menuFooterIn .5s ease both .35s; }
@keyframes menuFooterIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

/* ── FORM STATES ──────────────────────────────────────────── */
@keyframes spin { to{transform:rotate(360deg);} }
.spinning { border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; width:15px; height:15px; animation:spin .65s linear infinite; display:inline-block; vertical-align:middle; }

@keyframes successBounce { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.2);} 80%{transform:scale(.92);} 100%{transform:scale(1);opacity:1;} }
.form-success.show .form-success-icon { animation:successBounce .65s cubic-bezier(.34,1.56,.64,1) both; }

/* ── TECH SHIMMER ─────────────────────────────────────────── */
.tech-card { position:relative; }
.tech-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.04) 50%,transparent 70%);
  opacity:0; pointer-events:none; border-radius:inherit;
  transition:opacity .3s ease;
}
.tech-card:hover::after { opacity:1; animation:techShimmer .8s ease forwards; }
@keyframes techShimmer { from{background-position:200% center;} to{background-position:-200% center;} }

/* ── INDUSTRY CARD ICON BOUNCE ────────────────────────────── */
.industry-card:hover .industry-icon { animation:iconBounce .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes iconBounce { 0%,100%{transform:scale(1);} 50%{transform:scale(1.2);} }

/* ── HIGHLIGHT TOP SHINE ──────────────────────────────────── */
.highlight-card:hover::before { opacity:1; }

/* ── PORTFOLIO HOVER GLOW ─────────────────────────────────── */
.port-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(37,99,235,0.06),transparent);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.port-card:hover::after { opacity:1; }

/* ── PROCESS STEP CONNECT LINE GLOW ──────────────────────── */
.proc-step:hover .proc-num { animation:numGlow .3s ease forwards; }
@keyframes numGlow { to{box-shadow:0 0 24px rgba(37,99,235,0.3);} }

/* ── MOBILE SERVICE CARD ENTRANCE ────────────────────────── */
/* Cards fade up after hero content loads on mobile */
@keyframes mobCardIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-mobile-cards .hero-mob-card {
  opacity:0;
  animation: mobCardIn .55s ease forwards;
}
.hero-mobile-cards .hero-mob-card:nth-child(1){ animation-delay:.62s; }
.hero-mobile-cards .hero-mob-card:nth-child(2){ animation-delay:.72s; }
.hero-mobile-cards .hero-mob-card:nth-child(3){ animation-delay:.82s; }
.hero-mobile-cards .hero-mob-card:nth-child(4){ animation-delay:.92s; }

/* ── FLOAT CARD HOVER GLOW ────────────────────────────────── */
.float-card {
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.float-card:hover {
  border-color: rgba(37,99,235,0.28);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.6),
    0 0 20px rgba(37,99,235,0.18),
    0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(-3px) scale(1.02);
}

/* ── MOCKUP DASHBOARD PULSE ───────────────────────────────── */
/* Subtle live-indicator pulse on the green badge */
.mockup-dash-badge {
  animation: dashPulse 2.8s ease-in-out infinite;
}
@keyframes dashPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.65; }
}

/* ── HERO MOCKUP ENTRANCE ─────────────────────────────────── */
/* Mockup slides up slightly as part of hero-right reveal */
.hero-mockup {
  animation: mockupIn .9s cubic-bezier(0.25, 0.8, 0.25, 1) forwards .75s;
  opacity: 0;
}
@keyframes mockupIn {
  from { opacity:0; transform:translateY(20px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}