/**
 * n8n Course Landing Page - Animation Library
 * Automation-themed animations for workflow visualization
 */

/* ===== FLOW LINE ANIMATIONS ===== */

/* 1. Flow Line Animation - Simulates data flowing through connections */
@keyframes flowLine {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Flow line with moving dots */
@keyframes flowDots {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===== NODE ANIMATIONS ===== */

/* 2. Node Pulse Animation - Indicates active/processing state */
@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-primary);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px var(--glow-primary);
    transform: scale(1.05);
  }
}

/* Secondary node pulse for variety */
@keyframes nodePulseSecondary {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-secondary);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px var(--glow-secondary);
    transform: scale(1.05);
  }
}

/* Node activation sequence */
@keyframes nodeActivate {
  0% {
    background: var(--node-inactive);
    transform: scale(0.8);
  }
  50% {
    background: var(--n8n-pink);
    transform: scale(1.1);
  }
  100% {
    background: var(--node-active);
    transform: scale(1);
  }
}

/* ===== DATA FLOW ANIMATIONS ===== */

/* 3. Data Flow Animation - Shows data packets moving */
@keyframes dataFlow {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Vertical data flow */
@keyframes dataFlowVertical {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ===== TRIGGER & INTERACTION ANIMATIONS ===== */

/* 4. Trigger Ripple Animation - Button click effect */
@keyframes triggerRipple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Button ripple effect */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* ===== REVEAL ANIMATIONS ===== */

/* 5. Card Reveal Animation - Section entrance */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered reveal for multiple items */
@keyframes staggerReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== PROGRESS & LOADING ANIMATIONS ===== */

/* Progress flow for UGC carousel */
@keyframes progressFlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Loading spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse loading */
@keyframes pulseLoad {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== SUCCESS ANIMATIONS ===== */

/* Checkmark draw animation */
@keyframes checkmarkDraw {
  0% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Success circle animation */
@keyframes successCircle {
  0% {
    stroke-dashoffset: 157; /* 2 * PI * 25 */
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Success scale in */
@keyframes successScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== GRADIENT ANIMATIONS ===== */

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

/* Border gradient animation */
@keyframes borderGlow {
  0%, 100% {
    border-color: var(--n8n-pink);
    box-shadow: 0 0 5px var(--glow-primary);
  }
  50% {
    border-color: var(--n8n-secondary);
    box-shadow: 0 0 20px var(--glow-secondary);
  }
}

/* ===== HOVER & INTERACTION EFFECTS ===== */

/* Card hover lift */
@keyframes hoverLift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

/* Icon bounce */
@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* ===== HERO SECTION SPECIFIC ===== */

/* Hero title reveal */
@keyframes heroTitleReveal {
  0% {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* CTA button glow pulse */
@keyframes ctaGlow {
  0%, 100% {
    box-shadow: 0 0 5px var(--glow-primary);
  }
  50% {
    box-shadow: 0 0 25px var(--glow-primary), 0 0 50px var(--glow-primary);
  }
}

/* ===== FORM ANIMATIONS ===== */

/* Input focus animation */
@keyframes inputFocus {
  from {
    border-color: rgba(234, 75, 113, 0.2);
    box-shadow: none;
  }
  to {
    border-color: var(--n8n-pink);
    box-shadow: 0 0 0 3px var(--glow-primary);
  }
}

/* Label float up */
@keyframes labelFloat {
  from {
    transform: translateY(0);
    font-size: var(--text-base);
    color: var(--text-muted);
  }
  to {
    transform: translateY(-20px);
    font-size: var(--text-sm);
    color: var(--n8n-pink);
  }
}

/* ===== UTILITY ANIMATION CLASSES ===== */

/* Apply fade in animation */
.animate-fade-in {
  animation: cardReveal var(--duration-slow) var(--ease-out) forwards;
}

/* Apply flow line animation */
.animate-flow {
  animation: flowLine var(--flow-speed) var(--ease-in-out) infinite;
}

/* Apply node pulse */
.animate-pulse-node {
  animation: nodePulse var(--pulse-speed) var(--ease-in-out) infinite;
}

/* Apply data flow */
.animate-data-flow {
  animation: dataFlow 3s var(--ease-in-out) infinite;
}

/* Stagger delay classes for sequential animations */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Ensure animations use GPU acceleration */
.will-animate {
  will-change: transform, opacity;
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hardware acceleration for smooth animations */
.hw-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}