/* ============================================================
   VRIDHI EXPORTS — ANIMATION LAYER
   Skill: ui-ux-pro-max | Style: Premium Industrial Interactive
   All animations respect prefers-reduced-motion via JS bailout
   ============================================================ */

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
#vx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-cta), var(--c-accent), var(--c-cta));
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
  z-index: 9999;
  transform-origin: left;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}
@keyframes progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── CUSTOM CURSOR ───────────────────────────────────────── */
#vx-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--c-cta);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: transform;
}
#vx-cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--c-cta);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(0.25,0,0,1),
              height 0.35s cubic-bezier(0.25,0,0,1),
              border-color 0.2s ease,
              opacity 0.3s ease;
  opacity: 0;
  will-change: transform;
}
body.vx-cursor-active #vx-cursor,
body.vx-cursor-active #vx-cursor-ring { opacity: 1; }

/* Hide system cursor when custom cursor is active */
body.vx-cursor-active,
body.vx-cursor-active * {
  cursor: none !important;
}

body.vx-cursor-hover #vx-cursor {
  width: 20px;
  height: 20px;
  background: var(--c-accent);
}
body.vx-cursor-hover #vx-cursor-ring {
  width: 54px;
  height: 54px;
  border-color: var(--c-accent);
  opacity: 0.45;
}
body.vx-cursor-click #vx-cursor {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] #vx-cursor { mix-blend-mode: screen; }

/* ── MAGNETIC BUTTON ─────────────────────────────────────── */
.btn-primary,
.btn-outline,
.btn-rfq,
.form-submit {
  will-change: transform;
}

/* ── RIPPLE ──────────────────────────────────────────────── */
.vx-ripple-host { position: relative; overflow: hidden; }
.vx-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: vx-ripple-anim 0.55s cubic-bezier(0.25,0,0,1) forwards;
  pointer-events: none;
}
@keyframes vx-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── FLOATING ORBS (hero background) ────────────────────── */
#vx-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.vx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0;
  animation: vx-orb-float linear infinite;
}
.vx-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(184,115,51,0.18) 0%, transparent 70%);
  top: -120px; left: -80px;
  animation-duration: 18s;
  animation-delay: 0s;
}
.vx-orb-2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(44,62,80,0.16) 0%, transparent 70%);
  top: 40%; right: -60px;
  animation-duration: 22s;
  animation-delay: -8s;
}
.vx-orb-3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(184,115,51,0.12) 0%, transparent 70%);
  bottom: -80px; left: 40%;
  animation-duration: 26s;
  animation-delay: -14s;
}
@keyframes vx-orb-float {
  0%   { opacity: 0; transform: translateY(0px) scale(1); }
  10%  { opacity: 1; }
  50%  { transform: translateY(-40px) scale(1.08); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0px) scale(1); }
}

/* ── STAT COUNT-UP GLOW ──────────────────────────────────── */
.stat-num,
.about-stat-card .stat-num,
.global-stat-card > div:first-child {
  transition: color 0.3s ease;
}
.vx-counted {
  animation: vx-stat-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes vx-stat-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); color: var(--c-cta); }
  100% { transform: scale(1); }
}

/* ── CARD 3D TILT ────────────────────────────────────────── */
.category-card,
.service-card,
.team-card,
.about-stat-card,
.global-stat-card,
.market-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.25,0,0,1),
              box-shadow 0.25s ease !important;
}
.category-card:hover,
.service-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* ── CARD SPOTLIGHT ──────────────────────────────────────── */
.category-card,
.service-card,
.market-card {
  background-image: radial-gradient(600px circle at -400px -400px, rgba(184,115,51,0), transparent 40%);
  transition: background-image 0s;
}

/* ── SHIMMER ON HOVER ────────────────────────────────────── */
@keyframes vx-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.vx-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 60%,
    transparent 100%);
  background-size: 400px 100%;
  animation: vx-shimmer 1.2s ease infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ── WORD REVEAL ANIMATION ───────────────────────────────── */
.vx-word-reveal .vx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.25em;
}
.vx-word-reveal .vx-word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.25,0,0,1),
              opacity 0.65s ease;
}
.vx-word-reveal.vx-revealed .vx-word-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── SECTION REVEAL (stagger) ────────────────────────────── */
.vx-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.25,0,0,1);
}
.vx-stagger.vx-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.vx-stagger.vx-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.vx-stagger.vx-visible > *:nth-child(2)  { transition-delay: 0.07s; }
.vx-stagger.vx-visible > *:nth-child(3)  { transition-delay: 0.14s; }
.vx-stagger.vx-visible > *:nth-child(4)  { transition-delay: 0.21s; }
.vx-stagger.vx-visible > *:nth-child(5)  { transition-delay: 0.28s; }
.vx-stagger.vx-visible > *:nth-child(6)  { transition-delay: 0.35s; }
.vx-stagger.vx-visible > *:nth-child(7)  { transition-delay: 0.42s; }
.vx-stagger.vx-visible > *:nth-child(8)  { transition-delay: 0.49s; }
.vx-stagger.vx-visible > *:nth-child(n+9){ transition-delay: 0.56s; }

/* ── GRADIENT ACCENT TEXT ────────────────────────────────── */
.vx-gradient-text {
  background: linear-gradient(135deg, var(--c-cta) 0%, var(--c-accent) 60%, var(--c-cta) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vx-gradient-shift 4s ease infinite;
}
@keyframes vx-gradient-shift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ── GLOWING INPUT FOCUS ─────────────────────────────────── */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 3px var(--c-accent-l),
              0 0 20px rgba(44,62,80,0.12) !important;
}

/* ── HERO PARALLAX WRAPPER ───────────────────────────────── */
.hero-section {
  overflow: hidden;
}
#vx-hero-parallax {
  will-change: transform;
}

/* ── FLOATING NAV PILL (on scroll) ──────────────────────── */
.site-header.vx-scrolled {
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .site-header.vx-scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04);
}

/* ── PARTICLE CANVAS ─────────────────────────────────────── */
#vx-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* ── HOVER GLOW on category cards (uses ::after to not conflict with ::before accent line) */
.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(184,115,51,0.10) 0%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.category-card:hover::after { opacity: 1; }
.category-card > * { position: relative; z-index: 1; }

/* ── NAV LINK UNDERLINE ANIMATION ────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link:not(.active)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--c-cta);
  border-radius: 2px;
  transition: width 0.28s cubic-bezier(0.25,0,0,1);
}
.nav-link:not(.active):hover::after { width: 100%; }

/* ── CATEGORY CARD ICON FLOAT ────────────────────────────── */
.cat-icon,
.service-icon {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.category-card:hover .cat-icon,
.service-card:hover .service-icon {
  transform: translateY(-5px) scale(1.1);
}

/* ── HERO CARD STACK ENHANCED ────────────────────────────── */
/* Do NOT touch transform on hero cards — hc-1/hc-2/hc-3 use rotation transforms
   for the stacked visual. Only enhance box-shadow on hover. */
.hero-card {
  transition: box-shadow 0.35s ease !important;
  will-change: box-shadow;
}
.hero-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.18) !important;
  z-index: 10;
}

/* ── BUTTON PULSE ────────────────────────────────────────── */
.btn-primary {
  position: relative;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--c-accent);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.btn-primary:hover::after {
  opacity: 0.3;
  transform: scale(1.04);
}

/* ── FOOTER LINK HOVER ───────────────────────────────────── */
.footer-col a {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.footer-col a:hover { transform: translateX(4px) !important; }

/* ── SECTION EYEBROW POP ─────────────────────────────────── */
.section-eyebrow {
  position: relative;
  display: inline-block;
}

/* ── PRODUCT TAG HOVER ───────────────────────────────────── */
.cat-products span,
.product-tag {
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
  cursor: default;
}
.cat-products span:hover,
.product-tag:hover {
  background: var(--c-accent) !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* ── TEAM CARD AVATAR PULSE ──────────────────────────────── */
.team-avatar {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease;
}
.team-card:hover .team-avatar {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 8px 24px rgba(44,62,80,0.2);
}

/* ── IMAGE CARD HOVER ZOOM ───────────────────────────────── */
.product-img {
  transition: transform 0.5s cubic-bezier(0.25,0,0,1) !important;
  overflow: hidden;
}
.product-card:hover .product-img img,
.product-card:hover .product-img {
  transform: scale(1.06) !important;
}

/* ── SCROLL-TO-TOP INDICATOR ─────────────────────────────── */
#vx-scroll-top {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  color: var(--c-text-2);
}
#vx-scroll-top.vx-visible {
  opacity: 1;
  transform: translateY(0);
}
#vx-scroll-top:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-4);
}

/* ── MICRO TOOLTIP ───────────────────────────────────────── */
[data-vx-tip] {
  position: relative;
}
[data-vx-tip]::after {
  content: attr(data-vx-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--c-text);
  color: var(--c-text-inv);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
[data-vx-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── LOADING BAR ON PAGE INIT ────────────────────────────── */
#vx-page-load {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-cta), var(--c-accent));
  z-index: 99999;
  transform-origin: left;
  animation: vx-page-load 0.8s cubic-bezier(0.25,0,0,1) forwards;
}
@keyframes vx-page-load {
  0%   { transform: scaleX(0); opacity: 1; }
  85%  { transform: scaleX(0.95); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ── MARKET CARD ENTRANCE ────────────────────────────────── */
.market-card {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease !important;
}
.market-card:hover {
  transform: translateY(-8px) scale(1.04) !important;
  box-shadow: var(--sh-4) !important;
}
.market-card:hover .market-flag {
  transform: scale(1.2) rotate(5deg);
}
.market-card > div:first-child {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.market-card:hover > div:first-child {
  transform: scale(1.25) rotate(8deg);
}

/* ── CERT BADGE HOVER ────────────────────────────────────── */
.cert-badge {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
}
.cert-badge:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: var(--sh-3) !important;
}

/* ── FINISH CARD HOVER ───────────────────────────────────── */
.finish-card {
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}
.finish-card:hover {
  transform: translateX(6px) !important;
  background: var(--c-bg-alt) !important;
  box-shadow: var(--sh-2) !important;
}
.finish-dot {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
}
.finish-card:hover .finish-dot {
  transform: scale(1.35) !important;
  box-shadow: 0 0 16px var(--c-cta-l) !important;
}

/* ── HERO STATS HOVER ────────────────────────────────────── */
.stat {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.stat:hover {
  transform: scale(1.06) !important;
}

/* ── ACTIVE NAV INDICATOR ────────────────────────────────── */
.nav-link.active {
  position: relative;
}

/* ── REDUCED MOTION OVERRIDES ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #vx-cursor, #vx-cursor-ring,
  #vx-orbs, #vx-particles,
  .vx-orb, .vx-ripple,
  #vx-progress, #vx-page-load { display: none !important; }
  .vx-word-reveal .vx-word-inner { transform: none !important; opacity: 1 !important; }
  .vx-stagger > * { opacity: 1 !important; transform: none !important; }
  .category-card, .service-card, .market-card, .cert-badge,
  .finish-card, .stat, .team-card, .hero-card { transition: none !important; }
}