/* ABAIQ Landing Page - Animations */

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

.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Stagger delays for children */
.animate-on-scroll.visible:nth-child(1) { animation-delay: 0s; }
.animate-on-scroll.visible:nth-child(2) { animation-delay: 0.1s; }
.animate-on-scroll.visible:nth-child(3) { animation-delay: 0.2s; }
.animate-on-scroll.visible:nth-child(4) { animation-delay: 0.3s; }

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

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

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

.slide-in-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

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

.slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

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

.scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* ========== FLOAT ========== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* ========== PULSE ========== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ========== GRADIENT SHIMMER ========== */
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ========== COUNTER GROW ========== */
@keyframes counterGrow {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.counter-animate {
  animation: counterGrow 0.5s ease-out forwards;
}

/* ========== HERO DECORATIONS ========== */
@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-glow {
  animation: rotateGlow 20s linear infinite;
}

/* ========== LOADING DOTS ========== */
@keyframes loadingDots {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.loading-dots span:nth-child(1) { animation: loadingDots 1.4s infinite 0s; }
.loading-dots span:nth-child(2) { animation: loadingDots 1.4s infinite 0.2s; }
.loading-dots span:nth-child(3) { animation: loadingDots 1.4s infinite 0.4s; }

/* ========== INTERSECTION OBSERVER STATES ========== */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="left"] {
  transform: translateX(-30px);
}

[data-animate="left"].in-view {
  transform: translateX(0);
}

[data-animate="right"] {
  transform: translateX(30px);
}

[data-animate="right"].in-view {
  transform: translateX(0);
}

[data-animate="scale"] {
  transform: scale(0.95);
}

[data-animate="scale"].in-view {
  transform: scale(1);
}

/* ========== STAGGER CHILDREN ========== */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

[data-stagger].in-view > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* ========== REJECTED BLINK EFFECT ========== */
@keyframes rejectedBlink {
  0%, 100% {
    color: #ff3b3b;
    text-shadow:
      0 0 5px rgba(255, 59, 59, 0.8),
      0 0 10px rgba(255, 59, 59, 0.6),
      0 0 20px rgba(255, 59, 59, 0.4);
    opacity: 1;
  }
  50% {
    color: #ff6b6b;
    text-shadow:
      0 0 2px rgba(255, 59, 59, 0.4),
      0 0 5px rgba(255, 59, 59, 0.2);
    opacity: 0.7;
  }
}

.rejected-blink {
  display: inline-block;
  color: #ff3b3b;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  letter-spacing: 2px;
  animation: rejectedBlink 1s ease-in-out infinite;
  padding: 0.1em 0.3em;
  background: rgba(255, 59, 59, 0.1);
  border: 1px solid rgba(255, 59, 59, 0.3);
  border-radius: 4px;
}

/* ========== FIBER OPTIC LINES ========== */
.fiber-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fiber-line {
  position: absolute;
  width: 1px;
  height: 150px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(102, 126, 234, 0.6) 40%,
    rgba(167, 139, 250, 0.8) 50%,
    rgba(102, 126, 234, 0.6) 60%,
    transparent 100%
  );
  opacity: 0;
  animation: fiberMove var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes fiberMove {
  0% {
    transform: translateY(-150px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 150px));
    opacity: 0;
  }
}

.fiber-line:nth-child(1) { left: 10%; --duration: 5s; --delay: 0s; }
.fiber-line:nth-child(2) { left: 25%; --duration: 7s; --delay: 1s; }
.fiber-line:nth-child(3) { left: 40%; --duration: 4s; --delay: 2s; }
.fiber-line:nth-child(4) { left: 55%; --duration: 6s; --delay: 0.5s; }
.fiber-line:nth-child(5) { left: 70%; --duration: 5s; --delay: 1.5s; }
.fiber-line:nth-child(6) { left: 85%; --duration: 7s; --delay: 3s; }
.fiber-line:nth-child(7) { left: 15%; --duration: 8s; --delay: 2.5s; }
.fiber-line:nth-child(8) { left: 60%; --duration: 6s; --delay: 4s; }

/* ========== KNOCKOUT TEXT SHIMMER ========== */
.knockout-text {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #a78bfa 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: knockoutShimmer 3s linear infinite;
}

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

/* ========== SVG DRAW ANIMATION ========== */
.svg-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: svgDraw 2s ease forwards;
}

@keyframes svgDraw {
  to { stroke-dashoffset: 0; }
}

/* ========== GLOW PULSE ========== */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.5), 0 0 60px rgba(167, 139, 250, 0.3);
  }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ========== EFFICIENCY CARD ANIMATIONS ========== */
@keyframes cardGlowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Card border gradient animation */
.efficiency-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.8) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: all 0.4s ease;
}

.efficiency-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.4) 0%,
    rgba(240, 147, 251, 0.3) 50%,
    rgba(102, 126, 234, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* Specific color border animations */
.efficiency-card[data-color="coral"]:hover::before {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.5) 0%, rgba(255, 142, 83, 0.4) 50%, rgba(254, 202, 87, 0.5) 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

.efficiency-card[data-color="purple"]:hover::before {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.5) 0%, rgba(118, 75, 162, 0.4) 50%, rgba(240, 147, 251, 0.5) 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

.efficiency-card[data-color="blue"]:hover::before {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.5) 0%, rgba(0, 242, 254, 0.4) 50%, rgba(67, 233, 123, 0.5) 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

.efficiency-card[data-color="teal"]:hover::before {
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.5) 0%, rgba(56, 239, 125, 0.4) 50%, rgba(184, 233, 148, 0.5) 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* Card lift animation on hover */
.efficiency-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(102, 126, 234, 0.1);
}