/* ============================================
   A & I ROPE ACCESS - ANIMATION SYSTEM
   Keyframes, transitions, and motion utilities
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Slide Animations */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Rope/Tension Animations */
@keyframes ropeTension {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  25% {
    transform: translateY(-2px) scaleY(1.02);
  }
  75% {
    transform: translateY(2px) scaleY(0.98);
  }
}

@keyframes ropeSway {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Typewriter Effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

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

/* Counter Animation */
@keyframes countUp {
  from { --num: 0; }
  to { --num: var(--target); }
}

/* Glow/Pulse Effects */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(253, 112, 18, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(253, 112, 18, 0.6);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shake Animation (for errors) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Clip Path Reveals */
@keyframes clipReveal {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes clipRevealHorizontal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Line Draw Animation */
@keyframes lineDraw {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Altitude Counter */
@keyframes altitudePulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(253, 112, 18, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(253, 112, 18, 0.8);
  }
}

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

/* Fade Utilities */
.animate-fadeIn {
  animation: fadeIn var(--duration-normal) var(--ease-out-expo) forwards;
}

.animate-fadeInUp {
  animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

.animate-fadeInDown {
  animation: fadeInDown var(--duration-slow) var(--ease-out-expo) forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft var(--duration-slow) var(--ease-out-expo) forwards;
}

.animate-fadeInRight {
  animation: fadeInRight var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Scale Utilities */
.animate-scaleIn {
  animation: scaleIn var(--duration-slow) var(--ease-out-expo) forwards;
}

.animate-pulse {
  animation: pulse 2s var(--ease-out-expo) infinite;
}

/* Rope/Tension */
.animate-ropeTension {
  animation: ropeTension 3s ease-in-out infinite;
}

.animate-ropeSway {
  animation: ropeSway 4s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 2s var(--ease-elastic) infinite;
}

/* Glow */
.animate-glow {
  animation: glow 2s var(--ease-out-expo) infinite;
}

.animate-pulseRing {
  animation: pulseRing 1.5s var(--ease-out-expo) infinite;
}

/* Spin */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-spin-slow {
  animation: spinSlow 8s linear infinite;
}

/* Shake (for errors) */
.animate-shake {
  animation: shake 0.5s var(--ease-out-expo);
}

/* Typewriter */
.animate-typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 2s steps(40) forwards;
}

/* Clip Reveal */
.animate-clipReveal {
  animation: clipReveal var(--duration-slow) var(--ease-out-expo) forwards;
}

/* ============================================
   SCROLL-TRIGGERED ANIMATION STATES
   ============================================ */

/* Initial states for scroll animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* ============================================
   MAGNETIC BUTTON EFFECT
   ============================================ */

.magnetic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

/* ============================================
   3D CARD TILT
   ============================================ */

.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

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

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .animate-fadeIn,
  .animate-fadeInUp,
  .animate-fadeInDown,
  .animate-fadeInLeft,
  .animate-fadeInRight,
  .animate-scaleIn,
  .animate-pulse,
  .animate-ropeTension,
  .animate-ropeSway,
  .animate-bounce,
  .animate-glow,
  .animate-pulseRing,
  .animate-spin,
  .animate-spin-slow {
    animation: none;
  }
}