/* ============================================
   Ilmoora - Animation Styles
   ============================================ */

/* ============================================
   Scroll Reveal Animations
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

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

/* Staggered Delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Scale Reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: 
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

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

/* Fade Reveal */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out-expo);
}

.reveal-fade.visible {
  opacity: 1;
}

/* Slide In Left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: 
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

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

/* Slide In Right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: 
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

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

/* ============================================
   Hero Animations
   ============================================ */

@keyframes heroFloat {
  0%, 100% {
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(0);
  }
  50% {
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(-20px);
  }
}

.hero-panel.panel-main {
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
    opacity: 0.6;
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
    opacity: 0.4;
  }
}

.gradient-orb {
  animation: orbFloat 20s ease-in-out infinite;
}

.orb-2 {
  animation-delay: -7s;
}

.orb-3 {
  animation-delay: -14s;
}

/* ============================================
   Button Animations
   ============================================ */

.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    transparent,\n    rgba(255, 255, 255, 0.2),\n    transparent\n  );\n  transition: left 0.5s ease;\n}\n\n.btn:hover::before {\n  left: 100%;\n}\n\n/* ============================================\n   Card Hover Animations\n   ============================================ */\n\n.card-glass,\n.step-card,\n.industry-card,\n.bento-card,\n.module-card,\n.pricing-card {\n  transition: \n    transform var(--transition-slow),\n    box-shadow var(--transition-slow);\n}\n\n.card-glass:hover,\n.step-card:hover,\n.industry-card:hover,\n.bento-card:hover,\n.module-card:hover {\n  transform: translateY(-8px);\n}\n\n/* ============================================\n   Icon Animations\n   ============================================ */\n\n.step-icon-wrap:hover .step-icon {\n  animation: iconBounce 0.6s ease;\n}\n\n@keyframes iconBounce {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.2); }\n}\n\n.module-icon-wrap:hover .module-icon {\n  animation: iconRotate 0.6s ease;\n}\n\n@keyframes iconRotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* ============================================\n   Link Arrow Animation\n   ============================================ */\n\n.industry-link .link-arrow {\n  transition: transform var(--transition-base);\n}\n\n.industry-card:hover .link-arrow {\n  transform: translateX(4px);\n}\n\n/* ============================================\n   Chart Bar Animation\n   ============================================ */\n\n@keyframes barGrow {\n  from {\n    transform: scaleY(0);\n    transform-origin: bottom;\n  }\n  to {\n    transform: scaleY(1);\n    transform-origin: bottom;\n  }\n}\n\n.bar {\n  animation: barGrow 1s var(--ease-out-expo) forwards;\n  animation-delay: calc(var(--i, 0) * 0.1s);\n}\n\n/* ============================================\n   Pulse Animation\n   ============================================ */\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.animate-pulse {\n  animation: pulse 2s ease-in-out infinite;\n}\n\n/* ============================================\n   Spin Animation\n   ============================================ */\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n\n/* ============================================\n   Bounce Animation\n   ============================================ */\n\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.animate-bounce {\n  animation: bounce 1s ease-in-out infinite;\n}\n\n/* ============================================\n   Shimmer Loading Animation\n   ============================================ */\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n.shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.4) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: shimmer 2s infinite;\n}\n\n/* ============================================\n   Glow Pulse Animation\n   ============================================ */\n\n@keyframes glowPulse {\n  0%, 100% {\n    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);\n  }\n  50% {\n    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);\n  }\n}\n\n.animate-glow {\n  animation: glowPulse 2s ease-in-out infinite;\n}\n\n/* ============================================\n   Gradient Shift Animation\n   ============================================ */\n\n@keyframes gradientShift {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n.animate-gradient {\n  background-size: 200% 200%;\n  animation: gradientShift 8s ease infinite;\n}\n\n/* ============================================\n   Typing Animation\n   ============================================ */\n\n@keyframes typing {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes blink {\n  50% {\n    border-color: transparent;\n  }\n}\n\n.typing-effect {\n  overflow: hidden;\n  white-space: nowrap;\n  border-right: 2px solid var(--primary-500);\n  animation: \n    typing 3s steps(40, end),\n    blink 0.75s step-end infinite;\n}\n\n/* ============================================\n   Fade In Up Animation\n   ============================================ */\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fadeInUp 0.6s var(--ease-out-expo) forwards;\n}\n\n/* ============================================\n   Scale In Animation\n   ============================================ */\n\n@keyframes scaleIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.animate-scale-in {\n  animation: scaleIn 0.4s var(--ease-out-expo) forwards;\n}\n\n/* ============================================\n   Slide In Animation\n   ============================================ */\n\n@keyframes slideInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInRight {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInDown {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-slide-left {\n  animation: slideInLeft 0.5s var(--ease-out-expo) forwards;\n}\n\n.animate-slide-right {\n  animation: slideInRight 0.5s var(--ease-out-expo) forwards;\n}\n\n.animate-slide-up {\n  animation: slideInUp 0.5s var(--ease-out-expo) forwards;\n}\n\n.animate-slide-down {\n  animation: slideInDown 0.5s var(--ease-out-expo) forwards;\n}\n\n/* ============================================\n   Shake Animation\n   ============================================ */\n\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(-5px);\n  }\n  20%, 40%, 60%, 80% {\n    transform: translateX(5px);\n  }\n}\n\n.animate-shake {\n  animation: shake 0.5s ease-in-out;\n}\n\n/* ============================================\n   Heartbeat Animation\n   ============================================ */\n\n@keyframes heartbeat {\n  0%, 100% {\n    transform: scale(1);\n  }\n  14% {\n    transform: scale(1.1);\n  }\n  28% {\n    transform: scale(1);\n  }\n  42% {\n    transform: scale(1.1);\n  }\n  70% {\n    transform: scale(1);\n  }\n}\n\n.animate-heartbeat {\n  animation: heartbeat 1.5s ease-in-out infinite;\n}\n\n/* ============================================\n   Wiggle Animation\n   ============================================ */\n\n@keyframes wiggle {\n  0%, 100% {\n    transform: rotate(-3deg);\n  }\n  50% {\n    transform: rotate(3deg);\n  }\n}\n\n.animate-wiggle {\n  animation: wiggle 0.3s ease-in-out infinite;\n}\n\n/* ============================================\n   Flip Animation\n   ============================================ */\n\n@keyframes flip {\n  0% {\n    transform: perspective(400px) rotateY(0);\n  }\n  100% {\n    transform: perspective(400px) rotateY(360deg);\n  }\n}\n\n.animate-flip {\n  animation: flip 1s var(--ease-out-expo);\n}\n\n/* ============================================\n   Zoom In Animation\n   ============================================ */\n\n@keyframes zoomIn {\n  from {\n    opacity: 0;\n    transform: scale3d(0.3, 0.3, 0.3);\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n.animate-zoom-in {\n  animation: zoomIn 0.5s var(--ease-out-expo);\n}\n\n/* ============================================\n   Zoom Out Animation\n   ============================================ */\n\n@keyframes zoomOut {\n  from {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    transform: scale3d(0.3, 0.3, 0.3);\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.animate-zoom-out {\n  animation: zoomOut 0.5s var(--ease-out-expo);\n}\n\n/* ============================================\n   Roll In Animation\n   ============================================ */\n\n@keyframes rollIn {\n  from {\n    opacity: 0;\n    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n  }\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n.animate-roll-in {\n  animation: rollIn 0.8s var(--ease-out-expo);\n}\n\n/* ============================================\n   Roll Out Animation\n   ============================================ */\n\n@keyframes rollOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n  }\n}\n\n.animate-roll-out {\n  animation: rollOut 0.8s var(--ease-out-expo);\n}\n\n/* ============================================\n   Swing Animation\n   ============================================ */\n\n@keyframes swing {\n  20% {\n    transform: rotate3d(0, 0, 1, 15deg);\n  }\n  40% {\n    transform: rotate3d(0, 0, 1, -10deg);\n  }\n  60% {\n    transform: rotate3d(0, 0, 1, 5deg);\n  }\n  80% {\n    transform: rotate3d(0, 0, 1, -5deg);\n  }\n  100% {\n    transform: rotate3d(0, 0, 1, 0deg);\n  }\n}\n\n.animate-swing {\n  animation: swing 1s var(--ease-out-expo);\n}\n\n/* ============================================\n   Tada Animation\n   ============================================ */\n\n@keyframes tada {\n  0% {\n    transform: scale3d(1, 1, 1);\n  }\n  10%, 20% {\n    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n  }\n  30%, 50%, 70%, 90% {\n    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n  }\n  40%, 60%, 80% {\n    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n  }\n  100% {\n    transform: scale3d(1, 1, 1);\n  }\n}\n\n.animate-tada {\n  animation: tada 1s var(--ease-out-expo);\n}\n\n/* ============================================\n   Rubber Band Animation\n   ============================================ */\n\n@keyframes rubberBand {\n  0% {\n    transform: scale3d(1, 1, 1);\n  }\n  30% {\n    transform: scale3d(1.25, 0.75, 1);\n  }\n  40% {\n    transform: scale3d(0.75, 1.25, 1);\n  }\n  50% {\n    transform: scale3d(1.15, 0.85, 1);\n  }\n  65% {\n    transform: scale3d(0.95, 1.05, 1);\n  }\n  75% {\n    transform: scale3d(1.05, 0.95, 1);\n  }\n  100% {\n    transform: scale3d(1, 1, 1);\n  }\n}\n\n.animate-rubber-band {\n  animation: rubberBand 1s var(--ease-out-expo);\n}\n\n/* ============================================\n   Jello Animation\n   ============================================ */\n\n@keyframes jello {\n  0%, 100% {\n    transform: scale3d(1, 1, 1);\n  }\n  30% {\n    transform: scale3d(1.25, 0.75, 1);\n  }\n  40% {\n    transform: scale3d(0.75, 1.25, 1);\n  }\n  50% {\n    transform: scale3d(1.15, 0.85, 1);\n  }\n  65% {\n    transform: scale3d(0.95, 1.05, 1);\n  }\n  75% {\n    transform: scale3d(1.05, 0.95, 1);\n  }\n}\n\n.animate-jello {\n  animation: jello 1s var(--ease-out-expo);\n}\n\n/* ============================================\n   Fade In Animation\n   ============================================ */\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.animate-fade-in {\n  animation: fadeIn 0.5s var(--ease-out-expo);\n}\n\n/* ============================================\n   Fade Out Animation\n   ============================================ */\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animate-fade-out {\n  animation: fadeOut 0.5s var(--ease-out-expo);\n}\n\n/* ============================================\n   Delay Utilities\n   ============================================ */\n\n.delay-100 { animation-delay: 100ms; }\n.delay-200 { animation-delay: 200ms; }\n.delay-300 { animation-delay: 300ms; }\n.delay-400 { animation-delay: 400ms; }\n.delay-500 { animation-delay: 500ms; }\n.delay-600 { animation-delay: 600ms; }\n.delay-700 { animation-delay: 700ms; }\n.delay-800 { animation-delay: 800ms; }\n.delay-900 { animation-delay: 900ms; }\n.delay-1000 { animation-delay: 1000ms; }\n\n/* ============================================\n   Duration Utilities\n   ============================================ */\n\n.duration-100 { animation-duration: 100ms; }\n.duration-200 { animation-duration: 200ms; }\n.duration-300 { animation-duration: 300ms; }\n.duration-500 { animation-duration: 500ms; }\n.duration-700 { animation-duration: 700ms; }\n.duration-1000 { animation-duration: 1000ms; }\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n  \n  .reveal,\n  .reveal-scale,\n  .reveal-fade,\n  .reveal-left,\n  .reveal-right {\n    opacity: 1;\n    transform: none;\n  }\n}\n