/* =============================================
   JHV TECHNOLOGY — animations.css
============================================= */

/* ---- GLITCH EFFECT ---- */
@keyframes glitch {
  0% { clip-path: inset(0 0 95% 0); transform: translate(-2px, 0); }
  10% { clip-path: inset(30% 0 50% 0); transform: translate(2px, 0); }
  20% { clip-path: inset(70% 0 10% 0); transform: translate(-1px, 0); }
  30% { clip-path: inset(10% 0 70% 0); transform: translate(1px, 0); }
  40% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 0); }
  50% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

/* ---- NEON FLICKER ---- */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent), 0 0 60px var(--accent);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* ---- SCAN LINE ---- */
@keyframes scanLine {
  0% { top: -5%; }
  100% { top: 105%; }
}

/* ---- PULSE RING ---- */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---- SPIN SLOW ---- */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- SPIN REVERSE ---- */
@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* ---- FLOAT ---- */
@keyframes floatAnim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(1deg); }
  66% { transform: translateY(-6px) rotate(-1deg); }
}

/* ---- SHIMMER ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- FADE IN UP ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- FADE IN ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- SCALE IN ---- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- SLIDE IN LEFT ---- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- SLIDE IN RIGHT ---- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- GRADIENT SHIFT ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- TYPE CURSOR ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- PARTICLE DRIFT ---- */
@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-120px) translateX(30px) rotate(180deg); opacity: 0; }
}

/* ---- HERO reveal with stagger ---- */
.hero-badge.reveal.visible     { animation: fadeInUp 0.8s ease 0.1s both; }
.hero-title.reveal.visible     { animation: fadeInUp 0.8s ease 0.25s both; }
.hero-sub.reveal.visible       { animation: fadeInUp 0.8s ease 0.4s both; }
.hero-btns.reveal.visible      { animation: fadeInUp 0.8s ease 0.55s both; }
.hero-stats.reveal.visible     { animation: fadeInUp 0.8s ease 0.7s both; }

/* ---- SERVICE CARD stagger ---- */
.service-card[data-delay="0"].reveal.visible   { transition-delay: 0ms; }
.service-card[data-delay="100"].reveal.visible { transition-delay: 100ms; }
.service-card[data-delay="200"].reveal.visible { transition-delay: 200ms; }
.service-card[data-delay="300"].reveal.visible { transition-delay: 300ms; }
.service-card[data-delay="400"].reveal.visible { transition-delay: 400ms; }
.service-card[data-delay="500"].reveal.visible { transition-delay: 500ms; }

/* ---- PROCESS STEP stagger ---- */
.process-step[data-delay="0"].reveal.visible   { transition-delay: 0ms; }
.process-step[data-delay="150"].reveal.visible { transition-delay: 150ms; }
.process-step[data-delay="300"].reveal.visible { transition-delay: 300ms; }
.process-step[data-delay="450"].reveal.visible { transition-delay: 450ms; }

/* ---- PORTFOLIO stagger ---- */
.portfolio-item[data-delay="0"].reveal.visible   { transition-delay: 0ms; }
.portfolio-item[data-delay="100"].reveal.visible { transition-delay: 100ms; }
.portfolio-item[data-delay="200"].reveal.visible { transition-delay: 200ms; }
.portfolio-item[data-delay="300"].reveal.visible { transition-delay: 300ms; }

/* ---- TESTIMONIAL stagger ---- */
.testimonial-card[data-delay="0"].reveal.visible   { transition-delay: 0ms; }
.testimonial-card[data-delay="150"].reveal.visible { transition-delay: 150ms; }
.testimonial-card[data-delay="300"].reveal.visible { transition-delay: 300ms; }

/* ---- Shimmer skeleton ---- */
.shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(0,245,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
}

/* ---- Neon pulse on hover ---- */
.neon-pulse:hover {
  animation: neonFlicker 2s infinite;
}

/* ---- Rotating border ring ---- */
.ring-border {
  position: relative;
}
.ring-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent));
  animation: spinSlow 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}