/* ============================================================
   ABtech Systems — Animations & Transitions
   ============================================================ */

/* Keyframes */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp    { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown  { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes pulse     { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes float     { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

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

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(0,212,255,0.2); }
  50%       { box-shadow: 0 0 35px rgba(0,212,255,0.5), 0 0 60px rgba(124,58,237,0.2); }
}

@keyframes scanline {
  0%   { top: -10%; }
  100% { top: 110%; }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll Reveal — initial states */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.reveal.reveal-left  { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-scale { transform: scale(0.9); }
.reveal.is-visible   { opacity: 1; transform: none; will-change: auto; }

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.stagger-children.is-visible > * { will-change: auto; }
.stagger-children.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-children.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.12s; }
.stagger-children.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.19s; }
.stagger-children.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.26s; }
.stagger-children.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.33s; }
.stagger-children.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.40s; }

/* Glitch text effect */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glitch::before {
  animation: glitchTop 3s steps(1) infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  animation: glitchBottom 3s steps(1) infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitchTop {
  0%, 85%, 100% { transform: none; opacity: 1; }
  86% { transform: translate(-3px, -2px) skewX(-5deg); opacity: 0.8; }
  87% { transform: translate(3px, 0); }
  88% { transform: none; }
}
@keyframes glitchBottom {
  0%, 90%, 100% { transform: none; opacity: 1; }
  91% { transform: translate(4px, 2px) skewX(5deg); opacity: 0.8; }
  92% { transform: translate(-2px, 0); }
  93% { transform: none; }
}

/* Neon flicker */
.neon-text {
  text-shadow:
    0 0 7px var(--accent-cyan),
    0 0 14px var(--accent-cyan),
    0 0 28px rgba(0,212,255,0.4);
}

/* Hover lift card */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(0,212,255,0.1);
}

/* Shimmer loading skeleton */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* Nav link underline */
.nav-link-anim {
  position: relative;
}
.nav-link-anim::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  transition: width var(--transition);
  border-radius: 1px;
}
.nav-link-anim:hover::after,
.nav-link-anim.active::after { width: 100%; }

/* Ripple effect on click */
.ripple-container { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Typing cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--accent-cyan);
  margin-left: 2px;
}

/* Hero entrance animations */
.hero-animate-1 { animation: fadeDown 0.8s cubic-bezier(0.4,0,0.2,1) both; }
.hero-animate-2 { animation: fadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.15s both; }
.hero-animate-3 { animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.3s both; }
.hero-animate-4 { animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.45s both; }

/* Floating badge */
.floating { animation: float 4s ease-in-out infinite; will-change: transform; }
.floating-delay { animation: float 4s ease-in-out 1s infinite; will-change: transform; }

/* Mobile — reduce translate distances for snappier feel */
@media (max-width: 768px) {
  .reveal { transform: translateY(20px); }
  .reveal.reveal-left  { transform: translateX(-20px); }
  .reveal.reveal-right { transform: translateX(20px); }
  .stagger-children > * { transform: translateY(16px); }

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

  @keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes fadeRight{ from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .floating, .floating-delay { animation: none; }
}