/* ================================================
   ANIMATIONS — InfiWits Theme (Premium Edition)
   ================================================ */

/* ---- Gradient Mesh (Hero) ---- */
@keyframes meshShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.iw-hero-gradient {
  background: linear-gradient(
    -45deg,
    #090e1c 0%,
    #0d1b35 20%,
    #001a4d 40%,
    #0a0f1e 60%,
    #001233 80%,
    #090e1c 100%
  );
  background-size: 400% 400%;
  animation: meshShift 12s ease infinite;
}

/* ---- Floating Count Cards ---- */
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.iw-float-anim {
  animation: floatUp 4s ease-in-out infinite;
}
.iw-float-anim--delay-1 { animation-delay: 1s; }
.iw-float-anim--delay-2 { animation-delay: 2s; }

/* ---- Pulse Glow ---- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 102, 255, 0.2); }
  50%       { box-shadow: 0 0 40px rgba(0, 102, 255, 0.5); }
}

.iw-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ---- Spin ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.iw-spin { animation: spin 1s linear infinite; }

/* ---- Shimmer Sweep on Buttons ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes btnShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ---- Counter ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.iw-counter-visible { animation: countUp 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ---- Fade/Slide Variants ---- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.iw-anim-slide-up   { animation: fadeSlideUp   0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.iw-anim-slide-left { animation: fadeSlideLeft 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.iw-anim-slide-right{ animation: fadeSlideRight 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.iw-anim-scale-in   { animation: scaleIn       0.5s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ---- Orb Drift ---- */
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 30px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

.iw-orb--drift {
  animation: orbDrift 14s ease-in-out infinite;
}
.iw-orb--drift-slow {
  animation: orbDrift 20s ease-in-out infinite reverse;
}

/* ---- Typewriter cursor ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.iw-cursor { animation: blink 1s step-end infinite; }

/* ================================================
   PREMIUM EFFECTS — NEW
   ================================================ */

/* ---- Animated Gradient Border on Cards ---- */
@keyframes borderRotate {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.iw-card {
  --border-angle: 0deg;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.iw-card:hover {
  animation: borderRotate 3s linear infinite;
  background: linear-gradient(var(--color-surface-container-low), var(--color-surface-container-low)) padding-box,
              conic-gradient(from var(--border-angle), #0066ff, #60a5fa, #e9c400, #0066ff) border-box;
  border-color: transparent;
  box-shadow: 0 0 30px rgba(0, 102, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ---- Card Internal Glow (follows cursor) ---- */
.iw-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(0, 102, 255, 0.08),
    transparent 40%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.iw-card:hover::after {
  opacity: 1;
}

/* ---- Button Shimmer Sweep ---- */
.iw-btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Ripple Effect (JS adds .iw-ripple span) ---- */
.iw-btn {
  position: relative;
  overflow: hidden;
}

span.iw-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.8s ease-out forwards;
  pointer-events: none;
  width: 300px;
  height: 300px;
}

@keyframes rippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---- Cursor Glow Orb ---- */
.iw-cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
}

/* ---- Scroll Progress Bar ---- */
.iw-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0066ff, #60a5fa, #e9c400);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

/* ---- Text Reveal Animation ---- */
.iw-text-reveal {
  visibility: hidden;
}

.iw-text-reveal__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(40deg);
  animation: charReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* ---- Particle Canvas ---- */
#iw-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}

/* ---- Animated Gradient CTA Background ---- */
@keyframes ctaGradientShift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

.iw-cta-banner__bg {
  background: linear-gradient(
    135deg,
    #001a4d 0%,
    #0d1b35 25%,
    #0a2463 50%,
    #001233 75%,
    #001a4d 100%
  );
  background-size: 300% 300%;
  animation: ctaGradientShift 8s ease infinite;
}

/* ---- Section Wave Dividers ---- */
.iw-wave-top,
.iw-wave-bottom {
  position: absolute;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.iw-wave-top {
  top: -1px;
}

.iw-wave-bottom {
  bottom: -1px;
  transform: rotate(180deg);
}

.iw-wave-top svg,
.iw-wave-bottom svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ---- Stat Number Glow ---- */
.iw-stat-item__number {
  position: relative;
}

.iw-stat-item__number::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0066ff, #60a5fa, transparent);
  border-radius: 2px;
  opacity: 0.6;
}

/* ---- Hero Badge Glow ---- */
.iw-badge--blue {
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.15);
}

/* ---- Service Card Icon Animated Glow ---- */
@keyframes iconGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 102, 255, 0); }
  50%       { box-shadow: 0 0 20px rgba(0, 102, 255, 0.25); }
}

.iw-card:hover .iw-service-card__icon {
  animation: iconGlow 2s ease-in-out infinite;
}

.iw-card:hover .iw-feature-card__icon {
  animation: iconGlow 2s ease-in-out infinite;
}