/* ============================================================
   MONTQUE GLOBAL — animations.css
============================================================ */

/* ── SCROLL REVEAL SYSTEM ──
   Content is always visible by default.
   .js-ready class (added by JS) enables the hidden state.
   .in class (added by IntersectionObserver) triggers the reveal.
── */
body.js-ready .anim       { opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
body.js-ready .anim-l     { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
body.js-ready .anim-r     { opacity:0; transform:translateX(40px); transition:opacity .7s ease, transform .7s ease; }
body.js-ready .anim-scale { opacity:0; transform:scale(.92); transition:opacity .65s ease, transform .65s ease; }
body.js-ready .anim-flip  { opacity:0; transform:rotateY(-20deg) translateY(20px); transition:opacity .75s ease, transform .75s ease; }

.in { opacity:1 !important; transform:none !important; }
/* Float-anim elements revealed via .in must keep their animation — remove the transform freeze */
.in.float-anim,
.in.float-anim-slow,
.in.float-anim-fast { transform:translateY(0) !important; }

/* Stagger delays */
.d1{transition-delay:.08s!important} .d2{transition-delay:.16s!important}
.d3{transition-delay:.24s!important} .d4{transition-delay:.32s!important}
.d5{transition-delay:.40s!important} .d6{transition-delay:.48s!important}
.d7{transition-delay:.56s!important} .d8{transition-delay:.64s!important}

/* ── HERO PARTICLE CANVAS ── */
#particles-canvas {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}

/* ── TYPING CURSOR ── */
.typer::after {
  content:'|';
  animation:blink .8s step-end infinite;
  margin-left:2px;
  color:var(--purple);
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── SHIMMER BUTTON ── */
.shimmer {
  position:relative; overflow:hidden;
}
.shimmer::before {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation:shimmer 2.8s ease-in-out infinite;
  skewX(-20deg);
}
@keyframes shimmer { 0%{left:-100%} 100%{left:160%} }

/* ── FLOAT ── */
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}
.float-anim { animation:float 6s ease-in-out infinite; }
.float-anim-slow { animation:float 8s ease-in-out infinite; }
.float-anim-fast { animation:float 4s ease-in-out infinite; }

/* ── PULSE BADGE ── */
@keyframes pulse-badge {
  0%,100% { box-shadow:0 0 0 0 rgba(99,102,241,.18); }
  50%      { box-shadow:0 0 0 10px rgba(99,102,241,0); }
}

/* ── GRADIENT SHIFT ── */
@keyframes gradshift {
  0%   { background-position:0%   50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0%   50%; }
}
/* Duplicate defined in style.css — override removed to avoid conflict */

/* ── SCAN LINE ── */
@keyframes scan {
  0%,100% { top:15%; }
  50%     { top:75%; }
}

/* ── TICKER ── */
@keyframes ticker {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ── CARD 3D TILT (applied by JS) ── */
.tilt-card {
  transform-style:preserve-3d;
  transition:transform .15s ease;
  will-change:transform;
}
.tilt-card .tilt-inner {
  transform:translateZ(20px);
}

/* ── PROGRESS BAR ── */
.prog-fill {
  width:0%;
  transition:width 1.4s cubic-bezier(.4,0,.2,1);
}

/* ── TEAM CARD SHINE ── */
.team-card::after {
  content:'';
  position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 80%);
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.team-card:hover::after { opacity:1; }

/* ── WHY CARD GLOW ON HOVER ── */
.why-card.hl { box-shadow:0 0 0 0 rgba(8,145,178,.15); }
.why-card.hl:hover { box-shadow:0 18px 56px rgba(8,145,178,.18), 0 0 0 4px rgba(8,145,178,.08); }

/* ── STAT NUMBER POP ── */
@keyframes stat-pop {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.12); }
  100% { transform:scale(1); }
}
.stat-pop { animation:stat-pop .45s ease; }

/* ── SERVICE TAB INDICATOR ── */
.svc-tab.on {
  position:relative;
}
.svc-tab.on::before {
  content:'';
  position:absolute; bottom:0; left:20%; right:20%; height:3px;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  border-radius:2px;
  animation:slideIn .25s ease;
}
@keyframes slideIn {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}

/* ── DOT ACTIVE ── */
.dot.on {
  animation:dot-expand .3s ease forwards;
}
@keyframes dot-expand {
  from { width:8px; }
  to   { width:26px; }
}

/* ── AVATAR BUTTON ── */
.av-btn {
  transition:transform .25s ease, opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.av-btn.on {
  box-shadow:0 0 0 4px rgba(124,58,237,.22);
}

/* ── CONTACT CARD HOVER ── */
.cc { transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }

/* ── FOOTER LINK UNDERLINE ── */
.ft-col li a {
  position:relative;
  display:inline-block;
}
.ft-col li a::after {
  content:'';
  position:absolute; bottom:-2px; left:0; width:0; height:1px;
  background:#94a3b8; transition:width .22s ease;
}
.ft-col li a:hover::after { width:100%; }

/* ── SCROLL TOP BUTTON PULSE ── */
#stb.show {
  animation:stb-in .4s ease forwards;
}
@keyframes stb-in {
  from { opacity:0; transform:translateY(20px) scale(.8); }
  to   { opacity:1; transform:none scale(1); }
}

/* ── HERO ORBS ── */
.orb {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(1px);
}
.orb1 { width:400px; height:400px; top:-120px; left:-100px; background:radial-gradient(circle,rgba(99,102,241,.07),transparent 65%); animation:orbmove 14s ease-in-out infinite; }
.orb2 { width:320px; height:320px; bottom:-80px; right:-80px; background:radial-gradient(circle,rgba(124,58,237,.07),transparent 65%); animation:orbmove 10s ease-in-out infinite reverse; }
.orb3 { width:200px; height:200px; top:40%; left:5%; background:radial-gradient(circle,rgba(14,165,233,.05),transparent 65%); animation:orbmove 12s 3s ease-in-out infinite; }
@keyframes orbmove {
  0%,100% { transform:translate(0,0); }
  33%     { transform:translate(20px,-20px); }
  66%     { transform:translate(-15px,15px); }
}

/* ── GRADIENT TEXT ANIMATION ── */
.hero-grad {
  background-size:200% 200%;
  animation:gradshift 5s linear infinite;
}

/* ── SECTION DIVIDER ── */
.s-divider {
  width:60px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  margin:0 auto 28px;
}

/* ── LOADING SKELETON (optional placeholder) ── */
@keyframes skeleton-shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0; }
}
.skeleton {
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:800px 100%;
  animation:skeleton-shimmer 1.5s infinite;
  border-radius:8px;
}

/* ── TYPEWRITER EFFECT ── */
@keyframes typewriter {
  from { width:0; }
  to   { width:100%; }
}

/* ── COUNTER NUMBER ── */
@keyframes count-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.count-animate { animation:count-up .4s ease forwards; }

/* ── PORTFOLIO IMAGE ZOOM ── */
.port-img img {
  transition:transform .65s cubic-bezier(.4,0,.2,1), filter .65s ease;
  filter:brightness(.95);
}
.port-slide:hover .port-img img {
  transform:scale(1.06);
  filter:brightness(1);
}

/* ── PRICING CARD POP ── */
@keyframes price-pop {
  0%   { transform:translateY(0) scale(1); }
  50%  { transform:translateY(-4px) scale(1.01); }
  100% { transform:translateY(0) scale(1); }
}

/* ── NAV LINK ACTIVE INDICATOR ── */
.nav-links a.act {
  position:relative;
}
.nav-links a.act::after {
  content:'';
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background:var(--indigo);
}

/* ── GLOW RING ON TEAM AVATAR ── */
.team-card:hover .team-avatar {
  box-shadow:0 0 0 4px rgba(124,58,237,.3), 0 8px 24px rgba(0,0,0,.2);
}

/* ── WAVE ANIMATION (optional decoration) ── */
@keyframes wave {
  0%,100% { transform:rotate(0deg); }
  25%     { transform:rotate(15deg); }
  75%     { transform:rotate(-10deg); }
}