/**
 * Animation Styles
 * Enhanced keyframes and animation classes for hero entrance, scroll reveals
 * Smoother transitions, 3D effects, and micro-interactions
 */

/* ========================================
   Keyframes
   ======================================== */

/* Fade In Up - Enhanced with spring easing */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  60% {
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down - Enhanced */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  60% {
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left - Enhanced */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  60% {
    transform: translateX(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right - Enhanced */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  60% {
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In - Enhanced with elastic feel */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale In Small - Enhanced */
@keyframes scaleInSmall {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  70% {
    transform: scale(1.01);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Down - Smoother */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px) scaleY(0.95);
    transform-origin: top;
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top;
  }
}

/* Slide Up - Smoother */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradient Shift - Enhanced smoother */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulse Glow - Enhanced */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.3),
                0 0 40px rgba(var(--accent-color-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(var(--accent-color-rgb), 0.5),
                0 0 60px rgba(var(--accent-color-rgb), 0.2);
  }
}

/* Float - Enhanced with 3D rotation and depth */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) translateZ(0);
  }
  25% {
    transform: translateY(-8px) rotate(1deg) translateZ(10px);
  }
  50% {
    transform: translateY(-15px) rotate(0deg) translateZ(20px);
  }
  75% {
    transform: translateY(-8px) rotate(-1deg) translateZ(10px);
  }
}

/* 3D Floating with complex rotation */
@keyframes float3D {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translate3d(5px, -15px, 20px) rotateX(2deg) rotateY(2deg);
  }
  50% {
    transform: translate3d(0, -25px, 40px) rotateX(0deg) rotateY(4deg);
  }
  75% {
    transform: translate3d(-5px, -15px, 20px) rotateX(-2deg) rotateY(2deg);
  }
}

/* Perspective Fade In - Coming from depth */
@keyframes perspectiveFadeIn {
  from {
    opacity: 0;
    transform: perspective(1000px) translateZ(-100px) rotateX(-10deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) translateZ(0) rotateX(0);
  }
}

/* 3D Rotate In - Dramatic entrance */
@keyframes rotate3DIn {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-30deg) translateZ(-50px);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
}

/* Glitch 3D effect */
@keyframes glitch3D {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-2px, 2px, 2px) skewX(2deg); }
  40% { transform: translate3d(2px, -2px, -2px) skewY(-2deg); }
  60% { transform: translate3d(-2px, -2px, 2px) skewX(-2deg); }
  80% { transform: translate3d(2px, 2px, -2px) skewY(2deg); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Parallax Floating */
@keyframes parallaxFloat {
  0%, 100% { transform: translate3d(0, 0, var(--z-depth, 0)) rotate(0); }
  33% { transform: translate3d(10px, -20px, var(--z-depth, 10px)) rotate(1deg); }
  66% { transform: translate3d(-10px, 10px, var(--z-depth, 5px)) rotate(-1deg); }
}

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

/* Shimmer - Enhanced */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Hover Glow - Enhanced */
@keyframes hoverGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--accent-color-rgb), 0.2),
                0 0 10px rgba(var(--accent-color-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.5),
                0 0 40px rgba(var(--accent-color-rgb), 0.2);
  }
}

/* Fade Out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Flip In X */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

/* Flip In Y */
@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

/* Zoom In with Blur */
@keyframes zoomInBlur {
  from {
    opacity: 0;
    transform: scale(1.2);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Wave Animation */
@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

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

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

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

.hero-entrance {
  opacity: 0;
  transform: perspective(1000px) translateZ(-40px) translateY(40px) rotateX(-5deg);
  animation: hero3DEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hero3DEntrance {
  from {
    opacity: 0;
    transform: perspective(1000px) translateZ(-100px) translateY(60px) rotateX(-15deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) translateZ(0) translateY(0) rotateX(0);
  }
}

.hero-entrance--1 { animation-delay: 0s; }
.hero-entrance--2 { animation-delay: 0.12s; }
.hero-entrance--3 { animation-delay: 0.24s; }
.hero-entrance--4 { animation-delay: 0.36s; }
.hero-entrance--5 { animation-delay: 0.48s; }
.hero-entrance--6 { animation-delay: 0.6s; }
.hero-entrance--7 { animation-delay: 0.72s; }
.hero-entrance--8 { animation-delay: 0.84s; }

/* Character stagger animation for hero title - Enhanced */
.hero-title-char {
  display: inline-block;
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--char-index) * 0.04s);
}

/* Hero gradient text - Enhanced */
.hero-gradient-text {
  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--accent-color-light) 30%,
    var(--accent-color) 60%,
    var(--accent-color-light) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

/* Hero stats counter animation - Enhanced */
.hero-stats {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.7s;
}

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

/* Base reveal state - elements start hidden */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Fade Up - Enhanced */
[data-reveal="fade-up"] {
  transform: translateY(50px);
}

[data-reveal="fade-up"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Down - Enhanced */
[data-reveal="fade-down"] {
  transform: translateY(-50px);
}

[data-reveal="fade-down"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Left - Enhanced */
[data-reveal="fade-left"] {
  transform: translateX(-50px);
}

[data-reveal="fade-left"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Right - Enhanced */
[data-reveal="fade-right"] {
  transform: translateX(50px);
}

[data-reveal="fade-right"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale In - Enhanced */
[data-reveal="scale-in"] {
  transform: scale(0.85);
}

[data-reveal="scale-in"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* Scale In Small - Enhanced */
[data-reveal="scale-in-small"] {
  transform: scale(0.92);
}

[data-reveal="scale-in-small"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* Flip In X */
[data-reveal="flip-x"] {
  transform: perspective(400px) rotateX(30deg);
  opacity: 0;
}

[data-reveal="flip-x"].revealed {
  opacity: 1;
  transform: perspective(400px) rotateX(0);
}

/* Flip In Y */
[data-reveal="flip-y"] {
  transform: perspective(400px) rotateY(30deg);
  opacity: 0;
}

[data-reveal="flip-y"].revealed {
  opacity: 1;
  transform: perspective(400px) rotateY(0);
}

/* 3D Perspective Reveal - Dramatic zoom from back */
[data-reveal="3d-zoom"] {
  transform: perspective(1200px) translateZ(-150px) rotateX(15deg);
  opacity: 0;
}

[data-reveal="3d-zoom"].revealed {
  opacity: 1;
  transform: perspective(1200px) translateZ(0) rotateX(0);
}

/* 3D Rotate In - Sliding rotation from side */
[data-reveal="3d-rotate"] {
  transform: perspective(1200px) rotateY(-45deg) translateX(-100px) translateZ(-50px);
  opacity: 0;
}

[data-reveal="3d-rotate"].revealed {
  opacity: 1;
  transform: perspective(1200px) rotateY(0) translateX(0) translateZ(0);
}

/* 3D Flip Up */
[data-reveal="flip-up"] {
  transform: perspective(1000px) rotateX(-90deg);
  transform-origin: top;
  opacity: 0;
}

[data-reveal="flip-up"].revealed {
  opacity: 1;
  transform: perspective(1000px) rotateX(0);
}

/* 3D Flip Down */
[data-reveal="flip-down"] {
  transform: perspective(1000px) rotateX(90deg);
  transform-origin: bottom;
  opacity: 0;
}

[data-reveal="flip-down"].revealed {
  opacity: 1;
  transform: perspective(1000px) rotateX(0);
}

/* Zoom In Blur */
[data-reveal="zoom-blur"] {
  transform: scale(1.1) translateZ(-50px);
  filter: blur(10px);
  opacity: 0;
}

[data-reveal="zoom-blur"].revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Stagger children animation - Enhanced */
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="stagger"].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal="stagger"].revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal="stagger"].revealed > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal="stagger"].revealed > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal="stagger"].revealed > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal="stagger"].revealed > *:nth-child(6) { transition-delay: 0.4s; }
[data-reveal="stagger"].revealed > *:nth-child(7) { transition-delay: 0.48s; }
[data-reveal="stagger"].revealed > *:nth-child(8) { transition-delay: 0.56s; }
[data-reveal="stagger"].revealed > *:nth-child(9) { transition-delay: 0.64s; }
[data-reveal="stagger"].revealed > *:nth-child(10) { transition-delay: 0.72s; }
[data-reveal="stagger"].revealed > *:nth-child(11) { transition-delay: 0.8s; }
[data-reveal="stagger"].revealed > *:nth-child(12) { transition-delay: 0.88s; }
[data-reveal="stagger"].revealed > *:nth-child(13) { transition-delay: 0.96s; }
[data-reveal="stagger"].revealed > *:nth-child(14) { transition-delay: 1.04s; }
[data-reveal="stagger"].revealed > *:nth-child(15) { transition-delay: 1.12s; }

[data-reveal="stagger"].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers - More granular */
[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }
[data-reveal-delay="700"] { transition-delay: 0.7s; }
[data-reveal-delay="800"] { transition-delay: 0.8s; }
[data-reveal-delay="900"] { transition-delay: 0.9s; }
[data-reveal-delay="1000"] { transition-delay: 1s; }

/* ========================================
   Card Hover Effects - Enhanced
   ======================================== */

.card-hover {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}

.card-hover:hover {
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 25px 50px -12px rgba(var(--accent-color-rgb), 0.2),
              0 0 0 1px rgba(var(--accent-color-rgb), 0.1);
}

.card-hover-lift {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}

.card-hover-lift:hover {
  transform: translateY(-16px) scale(1.03);
  box-shadow: 0 30px 60px -15px rgba(var(--accent-color-rgb), 0.25);
}

/* 3D Card Tilt */
.card-3d {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.card-3d:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(20px);
}

/* ========================================
   Button Micro-interactions - Enhanced
   ======================================== */

.btn-micro {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-micro::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-micro:active {
  transform: scale(0.96);
}

.btn-micro:active::before {
  width: 400px;
  height: 400px;
}

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

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-shine:hover::after {
  left: 100%;
}

.btn-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(var(--accent-color-rgb), 0.3);
}

/* Magnetic button effect */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ripple button */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* ========================================
   Loading States - Enhanced
   ======================================== */

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.loading-spin {
  animation: spin 1s linear infinite;
}

.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* ========================================
   Special Effects - Enhanced
   ======================================== */

/* Glow effect for accent elements */
.glow-accent {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Hover Glow class */
.hover-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-glow:hover {
  animation: hoverGlow 2s ease-in-out infinite;
  transform: translateY(-2px);
}

/* Float 3D animation for hero elements */
.float-3d {
  animation: float3D 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Parallax Layer classes for multi-depth effect */
.parallax-layer-1 { --z-depth: 40px; animation: parallaxFloat 12s ease-in-out infinite; }
.parallax-layer-2 { --z-depth: 20px; animation: parallaxFloat 10s ease-in-out infinite; }
.parallax-layer-3 { --z-depth: 10px; animation: parallaxFloat 8s ease-in-out infinite; }

/* Float animation for decorative elements - Enhanced */
.float {
  animation: float 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

.float-delay-1 { animation-delay: 0.5s; }
.float-delay-2 { animation-delay: 1s; }
.float-delay-3 { animation-delay: 1.5s; }
.float-delay-4 { animation-delay: 2s; }

/* Gradient border effect - Enhanced */
.gradient-border {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light), var(--accent-color));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: gradientShift 4s ease infinite;
}

.gradient-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--bg-secondary);
  border-radius: inherit;
  z-index: -1;
}

/* Text gradient animation - Enhanced */
.text-gradient-animate {
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--accent-color) 25%,
    var(--accent-color-light) 50%,
    var(--accent-color) 75%,
    var(--text-primary) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}

/* 3D Transitions */
.transition-3d {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.transition-3d:hover {
  transform: perspective(1000px) translateZ(20px) rotateX(2deg);
}

/* Page Transitions - Enhanced with 3D */
.page-transition-enter {
  opacity: 0;
  transform: perspective(1200px) translateZ(-100px) translateY(30px) rotateX(-5deg);
}

.page-transition-enter-active {
  opacity: 1;
  transform: perspective(1200px) translateZ(0) translateY(0) rotateX(0);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   Hero Background Shimmer - Enhanced
   ======================================== */

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

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

/* Hero ambient scanner sweep - Enhanced */
.hero-shimmer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(220, 38, 38, 0.05) 50%,
    transparent 70%
  );
  background-size: 400% 100%;
  animation: heroShimmer 10s linear infinite;
  z-index: 0;
}

/* Enhanced gradient text shimmer */
.gradient-text {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ef4444 20%,
    #ffffff 40%,
    #dc2626 60%,
    #ffffff 80%,
    #ef4444 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientTextShimmer 6s ease infinite;
}

/* ========================================
   Card Glow Hover System - Enhanced
   ======================================== */

@keyframes cardBorderGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(220, 38, 38, 0.3),
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(220, 38, 38, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(220, 38, 38, 0.5),
      0 16px 48px rgba(0, 0, 0, 0.5),
      0 0 50px rgba(220, 38, 38, 0.2);
  }
}

/* Lane-specific glow keyframes - Enhanced */
@keyframes cardGlowBuild {
  0%, 100% { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(59, 130, 246, 0.12); }
  50%       { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6), 0 16px 48px rgba(0,0,0,0.5), 0 0 50px rgba(59, 130, 246, 0.22); }
}

@keyframes cardGlowReview {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(139, 92, 246, 0.12); }
  50%       { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.6), 0 16px 48px rgba(0,0,0,0.5), 0 0 50px rgba(139, 92, 246, 0.22); }
}

@keyframes cardGlowDomain {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(34, 197, 94, 0.12); }
  50%       { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.6), 0 16px 48px rgba(0,0,0,0.5), 0 0 50px rgba(34, 197, 94, 0.22); }
}

/* ========================================
   Underline Animation Effects
   ======================================== */

.underline-hover {
  position: relative;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-color-light));
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.underline-hover:hover::after {
  width: 100%;
}

/* ========================================
   Focus Effects
   ======================================== */

.focus-glow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.3);
  transition: box-shadow 0.2s ease;
}

/* ========================================
   Skeleton Loading
   ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-secondary) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ========================================
   Interactive Icon Animations
   ======================================== */

.icon-bounce:hover {
  animation: heartbeat 0.8s ease-in-out;
}

.icon-spin:hover {
  animation: spin 0.5s ease-in-out;
}

.icon-shake:hover {
  animation: shake 0.5s ease-in-out;
}

/* ========================================
   Notification Toast Animations
   ======================================== */

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

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-enter {
  animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast-exit {
  animation: slideOutRight 0.3s ease forwards;
}

/* ========================================
   Scroll Indicator
   ======================================== */

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.5;
  }
}

.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ========================================
   Image Hover Zoom
   ======================================== */

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-zoom:hover img {
  transform: scale(1.08);
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-entrance,
  .hero-title-char,
  .hero-stats,
  .card-hover,
  .card-hover-lift,
  .card-3d,
  .float,
  .glow-accent,
  .text-gradient-animate,
  .gradient-border::before,
  .hero-shimmer-layer,
  .gradient-text,
  .btn-shine::after,
  .loading-pulse,
  .loading-spin,
  .skeleton,
  .scroll-indicator,
  .icon-bounce,
  .icon-spin,
  .icon-shake,
  .toast-enter,
  .toast-exit {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none !important;
  }

  .hero-entrance,
  .hero-title-char,
  .hero-stats {
    opacity: 1;
    animation: none !important;
  }

  .gradient-text {
    background: var(--accent-color-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .card-hover:hover,
  .card-hover-lift:hover,
  .card-3d:hover {
    transform: none;
  }

  .img-zoom img {
    transition: none;
  }
}

/* ========================================
   Card Rendering Fixes - All Screen Sizes
   ======================================== */

/* AGGRESSIVE FIX: Force all data-reveal elements visible immediately */
/* This overrides the opacity: 0 that hides elements before scroll reveal */
/* Safety net: if JS fails to load or IntersectionObserver doesn't fire */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Stagger children also need to be visible */
[data-reveal="stagger"] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* ========================================
   Mobile Card Rendering Fixes
   ======================================== */

/* Safety net: if JS fails to load or IntersectionObserver doesn't fire,
   ensure cards are visible on mobile after a timeout via CSS animation */
@media (max-width: 768px) {
  /* Flatten 3D transforms that can break mobile rendering */
  .premium-card,
  .feature-card,
  .tier-card,
  .doc-card,
  .mcp-card,
  .ai-feature-card {
    transform-style: flat !important;
    perspective: none !important;
  }

  .features-grid,
  .mcp-grid {
    perspective: none !important;
  }

  .premium-card:hover,
  .feature-card:hover {
    transform: translateY(-4px) !important;
  }

  .premium-card__icon,
  .premium-card__title,
  .premium-card__text,
  .feature-card__icon {
    transform: none !important;
  }

  /* Fix for feature-card-new and its children (workflow cards like Autopilot, Ralph, etc.) */
  .feature-card-new {
    transform-style: flat !important;
  }

  .feature-card-new__icon,
  .feature-card-new__title,
  .feature-card-new__description {
    transform: none !important;
  }
}

@keyframes mobileCardFallback {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   Mobile Hero Fixes - Disable 3D transforms
   ======================================== */

@media (max-width: 768px) {
  /* Stop 3D floating animation on mobile that can cause rendering issues */
  .hero__illustration {
    animation: none !important;
    transform: none !important;
    transform-style: flat !important;
  }

  .hero__illustration img {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3) !important;
  }

  .hero__illustration svg {
    transform: none !important;
  }

  /* Ensure hero text content is visible */
  .hero__text {
    transform: none !important;
  }

  .hero__visual {
    opacity: 1 !important;
    animation: none !important;
  }

  /* Fix hero entrance animations that start with opacity: 0 */
  .hero-entrance {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}