/* =================================================
   ENTERPRISE ANIMATION SYSTEM
   Clean • Subtle • Professional
================================================= */

/* ---------- GLOBAL TRANSITION ---------- */
.ea-hover-card,
.ea-hover-icon,
.ea-hover-link,
.ea-hover-btn{
  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    box-shadow .35s cubic-bezier(.4,0,.2,1),
    background .35s ease,
    color .35s ease;
  will-change:transform;
}

/* =================================================
   1. CARD HOVER (Feature / Glass Cards)
================================================= */
.ea-hover-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 60px 120px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* optional soft glow */
.ea-hover-card:hover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 1px rgba(99,102,241,.12);
  pointer-events:none;
}

/* =================================================
   2. FEATURE ROW HOVER (Enterprise List)
================================================= */
.ea-hover-row{
  position:relative;
  transition:background .3s ease;
}

.ea-hover-row:hover{
  background:rgba(99,102,241,.04);
  border-radius:14px;
}

/* =================================================
   3. ICON HOVER (ERP / SaaS Icons)
================================================= */
.ea-hover-icon{
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease;
}

.ea-hover-icon:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 30px rgba(37,99,235,.35);
}

/* =================================================
   4. LINK HOVER (Enterprise Style)
================================================= */
.ea-hover-link{
  position:relative;
  display:inline-block;
}

.ea-hover-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#2563eb;
  transition:width .35s ease;
}

.ea-hover-link:hover::after{
  width:100%;
}

/* =================================================
   5. BUTTON HOVER (Premium CTA)
================================================= */
.ea-hover-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(37,99,235,.35);
}

/* =================================================
   6. FLOATING MICRO MOTION (Idle)
================================================= */
.ea-float{
  animation:ea-float 6s ease-in-out infinite;
}

@keyframes ea-float{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0); }
}

/* =================================================
   7. REDUCED MOTION (Accessibility)
================================================= */
@media (prefers-reduced-motion: reduce){
  .ea-hover-card,
  .ea-hover-icon,
  .ea-hover-btn{
    transition:none;
    animation:none;
  }
}

/* =========================================================
   ENTERPRISE 3D HOVER & MOTION SYSTEM
   Author: TechInnovation App Pvt. Ltd.
   Usage: SaaS / ERP / Enterprise Websites
========================================================= */

/* =========================
   GLOBAL 3D CONTEXT
========================= */
.has-3d{
  perspective:1200px;
}

/* =========================
   SOFT 3D FLOAT (Cards / Boxes)
========================= */
.hover-float{
  transition:transform .6s cubic-bezier(.16,1,.3,1),
             box-shadow .6s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;
}

.hover-float:hover{
  transform:
    translateY(-10px)
    rotateX(4deg)
    rotateY(-4deg)
    scale(1.02);
  box-shadow:
    0 60px 120px rgba(0,0,0,.18);
}

/* =========================
   GLASS GLOW BORDER (Premium)
========================= */
.glass-border{
  position:relative;
  overflow:hidden;
}

.glass-border::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(59,130,246,.4),
    rgba(99,102,241,.4),
    transparent 70%
  );
  opacity:0;
  transition:opacity .6s ease;
}

.glass-border:hover::before{
  opacity:1;
}

/* =========================
   FEATURE ROW HOVER (Right Panel)
========================= */
.feature{
  transition:transform .45s ease,
             background .45s ease;
  border-radius:14px;
}

.feature:hover{
  background:#f8fafc;
  transform:translateX(10px);
}

/* =========================
   ICON 3D POP
========================= */
.icon-3d{
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1);
}

.feature:hover .icon-3d{
  transform:
    translateY(-4px)
    scale(1.08)
    rotateZ(-3deg);
  box-shadow:
    0 16px 32px rgba(37,99,235,.35);
}

/* =========================
   BUTTON 3D PRESS
========================= */
.btn-3d{
  position:relative;
  transition:transform .25s ease,
             box-shadow .25s ease;
}

.btn-3d:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}

.btn-3d:active{
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}

/* =================================================
   ENTERPRISE CTA PULSE (INFINITE)
   Purpose: Lead Generation / Demo Focus
================================================= */

.demo-pulse{
  position:relative;
  animation:demoPulse 2.8s ease-in-out infinite;
}

/* Soft glow ring */
.demo-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:2px solid rgba(37,99,235,.35);
  opacity:0;
  animation:ringPulse 2.8s ease-in-out infinite;
}

/* MAIN BUTTON FLOAT */
@keyframes demoPulse{
  0%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
  100%{
    transform:translateY(0);
  }
}

/* OUTER RING */
@keyframes ringPulse{
  0%{
    opacity:0;
    transform:scale(.95);
  }
  50%{
    opacity:.6;
    transform:scale(1.05);
  }
  100%{
    opacity:0;
    transform:scale(1.2);
  }
}

/* STOP animation on hover (UX rule) */
.demo-pulse:hover{
  animation:none;
}

.demo-pulse:hover::after{
  animation:none;
}
.demo-pulse span{
  display:inline-block;
  animation:arrowMove 1.8s ease-in-out infinite;
}

@keyframes arrowMove{
  0%{transform:translateX(0);}
  50%{transform:translateX(6px);}
  100%{transform:translateX(0);}
}



/* ===============================
   CTA LEFT → RIGHT SWEEP EFFECT
   Enterprise SaaS Style
=============================== */

/* ==============================
   ENTERPRISE CTA SWEEP ANIMATION
   Left → Right Light Motion
============================== */

.cta-sweep{
  position:relative;
  overflow:hidden;
}

/* moving light */
.cta-sweep::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.45),
    transparent 70%
  );
  animation:cta-sweep 3.2s ease-in-out infinite;
}

/* keep text above animation */
.cta-sweep{
  z-index:1;
}
.cta-sweep span,
.cta-sweep{
  position:relative;
  z-index:2;
}

/* animation keyframes */
@keyframes cta-sweep{
  0%{
    left:-120%;
  }
  60%{
    left:120%;
  }
  100%{
    left:120%;
  }
}

/* =========================
   HERO TEXT LIFT
========================= */
.hero-lift{
  transition:transform .6s ease;
}

.hero-lift:hover{
  transform:translateY(-4px);
}

/* =========================
   ENTERPRISE SHINE (Subtle)
========================= */
.enterprise-shine{
  position:relative;
  overflow:hidden;
}

.enterprise-shine::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    120deg,
    transparent 45%,
    rgba(255,255,255,.25),
    transparent 55%
  );
  transform:rotate(25deg);
  opacity:0;
  transition:opacity .6s ease;
}

.enterprise-shine:hover::after{
  opacity:1;
}

/* =========================
   PERFORMANCE SAFETY
========================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}





/* ===============================
   PREMIUM JQUERY SCROLL ANIMATION
=============================== */

.ti-animate{
  opacity:0;
  transform:translateY(50px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}

/* Direction variants */
.ti-left{ transform:translateX(-70px); }
.ti-right{ transform:translateX(70px); }
.ti-zoom{ transform:scale(.92); }

/* Active state */
.ti-show{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ti-animate{
    opacity:1;
    transform:none;
    transition:none;
  }
}