/* ============================================================
   INTERIX STUDIO – Animation Classes
   ============================================================ */

/* ---- Reveal on Scroll ---- */
[data-animate]{
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
[data-animate].revealed{opacity:1;transform:none!important}

[data-animate="fade-up"]{transform:translateY(50px)}
[data-animate="fade-down"]{transform:translateY(-50px)}
[data-animate="slide-left"]{transform:translateX(-60px)}
[data-animate="slide-right"]{transform:translateX(60px)}
[data-animate="scale-up"]{transform:scale(.92)}
[data-animate="fade"]{transform:none}

/* stagger children */
[data-stagger] > *{
  opacity:0;transform:translateY(30px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
[data-stagger].revealed > *{opacity:1;transform:none}
[data-stagger].revealed > *:nth-child(1){transition-delay:.05s}
[data-stagger].revealed > *:nth-child(2){transition-delay:.15s}
[data-stagger].revealed > *:nth-child(3){transition-delay:.25s}
[data-stagger].revealed > *:nth-child(4){transition-delay:.35s}
[data-stagger].revealed > *:nth-child(5){transition-delay:.45s}
[data-stagger].revealed > *:nth-child(6){transition-delay:.55s}

/* ---- Hero Mask Wipe ---- */
@keyframes maskWipe{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
.mask-wipe-active .mask-line{
  animation:maskWipe 1.2s var(--ease-out) forwards;
}
.mask-wipe-active .mask-line:nth-child(2){animation-delay:.3s}
.mask-wipe-active .mask-line:nth-child(3){animation-delay:.6s}

/* ---- Counter Pulse ---- */
@keyframes counterPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.counter-item__number.counting{
  animation:counterPulse .4s var(--ease-out);
}

/* ---- Tilt 3D (services) ---- */
.tilt-3d{
  transition:transform var(--dur-med) var(--ease-out);
}

/* ---- Zoom on Hover (insights) ---- */
.zoom-hover{
  overflow:hidden;
}
.zoom-hover img{
  transition:transform var(--dur-slow) var(--ease-out);
}
.zoom-hover:hover img{
  transform:scale(1.06);
}

/* ---- Glow on Focus (contact form) ---- */
.glow-focus:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 4px var(--accent-glow),0 0 20px var(--accent-glow)!important;
}

/* ---- Floating label animation ---- */
@keyframes labelFloat{
  from{top:50%;font-size:.9375rem}
  to{top:.35rem;font-size:.6875rem}
}

/* ---- Line Draw (method) ---- */
@keyframes lineDraw{
  to{stroke-dashoffset:0}
}

/* ---- Parallax Wrapper ---- */
.parallax-wrap{
  overflow:hidden;
  position:relative;
}
.parallax-img{
  will-change:transform;
  transform:translateY(0);
}

/* ---- Smooth entrance for chatbot ---- */
@keyframes fabBounce{
  0%{transform:scale(0)}
  60%{transform:scale(1.15)}
  100%{transform:scale(1)}
}
.chatbot-fab{
  animation:fabBounce .6s var(--ease-out) 2s both;
}

/* ---- Loading Shimmer ---- */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton{
  background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-secondary) 50%,var(--bg-tertiary) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}