/* ============================================================
   NEXOVA® — animations.css  v3.1
   Scroll progress, cursor, tilt glow, AOS extras, 3D fx
   ============================================================ */

/* ── Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #81ff28, #5bc918);
  z-index: 2000;
  transition: width .05s linear;
  box-shadow: 0 0 10px rgba(129,255,40,0.6);
}

/* ── Custom Cursor ── */
.cursor-dot {
  position: fixed;
  width: 7px; height: 7px;
  background: #81ff28;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .15s ease, background .2s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(129,255,40,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .25s ease, height .25s ease, border-color .25s ease;
}

/* ── Tilt Card Glow ── */
.tilt-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(129,255,40,0.12) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s ease;
}
[data-tilt]:hover .tilt-glow { opacity: 1; }

/* ── Hero noise / grain overlay ── */
.hero-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: .03;
}

/* ── Split text base ── */
.st-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.st-inner { display: inline-block; will-change: transform; }

/* ── AOS overrides for portfolio persp items ── */
.persp-item[data-aos] {
  opacity: 0;
  transform: rotateX(28deg) translateY(40px);
  transition: transform .9s cubic-bezier(0.22,1,0.36,1), opacity .7s ease;
}
.persp-item.aos-visible {
  opacity: 1;
  transform: rotateX(0deg) translateY(0);
}

/* ── FX Band hover ── */
.fx-band-item {
  position: relative;
  overflow: hidden;
}
.fx-band-item::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #81ff28;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.fx-band-item:hover::after { transform: scaleX(1); }

/* ── Service image zoom ── */
.service-img-wrap { overflow: hidden; }
.service-img-wrap img { transition: transform .8s cubic-bezier(0.25,0.1,0.25,1); }
.service-item--open .service-img-wrap img { transform: scale(1.04); }

/* ── Portfolio item reveal ── */
.portfolio-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.22,1,0.36,1);
}
.portfolio-item.aos-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Insight card hover lift ── */
.insight-card {
  transition: border-color .25s ease, transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s ease;
}

/* ── Stat number glow ── */
.stat-number {
  transition: text-shadow .3s ease;
}
.stat-card:hover .stat-number {
  text-shadow: 0 0 30px rgba(129,255,40,0.45);
}

/* ── Pricing card shimmer on popular ── */
.pricing-card--popular::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(129,255,40,0.4), transparent 40%, rgba(129,255,40,0.15) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity .4s ease;
}
.pricing-card--popular:hover::before { opacity: 1; }

/* ── Quote lines animation base ── */
.ql-inner {
  display: block;
  transform: translateY(100%);
  transition: transform .9s cubic-bezier(0.22,1,0.36,1);
}
.quote-section.in-view .ql-inner { transform: translateY(0); }

/* ── Process step hover accent line ── */
.process-step::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 2px;
  background: #81ff28;
  transition: width .5s cubic-bezier(0.22,1,0.36,1);
}
.process-step:hover::after { width: 100%; }

/* ── Depth card stagger ── */
.fx-depth-card:nth-child(1) { transition-delay: 0s; }
.fx-depth-card:nth-child(2) { transition-delay: 0.1s; }
.fx-depth-card:nth-child(3) { transition-delay: 0.2s; }
.fx-depth-card:nth-child(4) { transition-delay: 0.3s; }

/* ── Rotate item stagger ── */
.fx-rotate-item[data-rotate-delay="0"] { transition-delay: 0s; }
.fx-rotate-item[data-rotate-delay="1"] { transition-delay: 0.12s; }
.fx-rotate-item[data-rotate-delay="2"] { transition-delay: 0.24s; }
.fx-rotate-item[data-rotate-delay="3"] { transition-delay: 0.36s; }

/* ── Bento card highlight bar ── */
.bento-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #81ff28, #5bc918);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.bento-card:hover::after { transform: scaleX(1); }

/* ── Gallery marquee pause on hover ── */
.gallery-track:hover { animation-play-state: paused; }

/* ── Footer wordmark hover ── */
.footer-wordmark {
  transition: color .3s ease;
}
.footer-wordmark:hover { color: #81ff28; }

/* ── Scroll-driven band (via JS) ── */
.fx-band-track { transform: translateX(0); }