@tailwind base;
@tailwind components;
@tailwind utilities;

/* Design system inspired by Dispel.com aesthetic - dark industrial theme */

@layer base {
  :root {
    /* Core brand colors (HSL values only) */
    --bg: 210 24% 8%;
    --bg-elevated: 215 20% 12%;
    --ink: 210 17% 97%;
    --muted: 213 15% 65%;
    --accent: 355 75% 47%;
    --link: 213 94% 68%;
    
    /* Semantic color mappings (use HSL values directly) */
    --background: 210 24% 8%;
    --foreground: 210 17% 97%;
    
    --card: 215 20% 12%;
    --card-foreground: 210 17% 97%;
    
    --popover: 215 20% 12%;
    --popover-foreground: 210 17% 97%;
    
    --primary: 355 75% 47%;
    --primary-foreground: 210 17% 97%;
    
    --secondary: 215 20% 16%;
    --secondary-foreground: 210 17% 97%;
    
    --muted: 215 20% 16%;
    --muted-foreground: 213 15% 65%;
    
    --accent: 355 75% 47%;
    --accent-foreground: 210 17% 97%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 17% 97%;
    
    --border: 215 20% 20%;
    --input: 215 20% 15%;
    --ring: 355 75% 47%;
    
    --radius: 0.5rem;
    
    /* Custom design tokens */
    --gradient-hero: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
    --shadow-elevated: 0 10px 40px -10px hsl(210 24% 8% / 0.8);
    --shadow-subtle: 0 4px 16px -4px hsl(210 24% 8% / 0.4);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar tokens (consistent with main theme) */
    --sidebar-background: var(--bg);
    --sidebar-foreground: var(--ink);
    --sidebar-primary: var(--accent);
    --sidebar-primary-foreground: var(--ink);
    --sidebar-accent: var(--bg-elevated);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: hsl(215 20% 20%);
    --sidebar-ring: var(--accent);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    color-scheme: dark;
  }
}

@layer components {
  /* Hero section styling */
  .hero-gradient {
    background: var(--gradient-hero);
  }
  
  /* Card styling */
  .card-elevated {
    background: var(--gradient-card);
    box-shadow: var(--shadow-elevated);
  }
  
  /* Smooth transitions */
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  
  /* Focus styles for accessibility */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }
  
  /* Interactive hover effects */
  .hover-scale {
    @apply transition-all duration-300 ease-out hover:scale-105;
  }
  
  /* Story link with underline animation */
  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  /* Dispel-style button variants */
  .btn-dispel-primary {
    @apply bg-accent hover:bg-accent/90 text-ink font-semibold px-6 py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl;
  }

  .btn-dispel-secondary {
    @apply border border-muted/30 text-ink hover:bg-muted/10 hover:border-muted font-semibold px-6 py-3 rounded-lg transition-all duration-200;
  }

  /* Dispel-style card with enhanced shadows */
  .card-dispel {
    @apply bg-card/95 backdrop-blur-sm border border-border/50 shadow-xl;
  }

  /* Enhanced gradient backgrounds */
  .bg-dispel-gradient {
    background: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 50%, hsl(210 24% 8%) 100%);
  }

  .bg-industrial-gradient {
    background: linear-gradient(135deg, hsl(220 26% 14%) 0%, hsl(215 25% 12%) 50%, hsl(210 24% 10%) 100%);
  }

  .bg-section-gradient {
    background: linear-gradient(180deg, hsl(220 26% 14%) 0%, hsl(215 25% 12%) 100%);
  }

  .bg-card-gradient {
    background: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
  }

  .bg-accent-gradient {
    background: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(213 94% 68%) 100%);
  }

  /* Enhanced color utilities */
  .text-accent-blue {
    color: #60a5fa;
  }

  .text-accent-cyan {
    color: #22d3ee;
  }

  .bg-accent-blue {
    background-color: #3b82f6;
  }

  .bg-accent-cyan {
    background-color: #06b6d4;
  }

  .border-accent-blue {
    border-color: #3b82f6;
  }

  .border-accent-cyan {
    border-color: #06b6d4;
  }

  /* Soft Section Transition Effects */
  .section-transition-soft {
    position: relative;
  }

  .section-transition-soft::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, 
      rgba(30, 41, 59, 0) 0%, 
      rgba(30, 41, 59, 0.1) 20%, 
      rgba(30, 41, 59, 0.3) 40%, 
      rgba(30, 41, 59, 0.6) 70%, 
      rgba(30, 41, 59, 0.9) 90%, 
      rgba(30, 41, 59, 1) 100%);
    pointer-events: none;
  }

  /* Gentle wave transition */
  .section-transition-wave {
    position: relative;
  }

  .section-transition-wave::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: 
      radial-gradient(ellipse 120% 100% at center top, 
        rgba(30, 41, 59, 0) 0%, 
        rgba(30, 41, 59, 0.05) 10%, 
        rgba(30, 41, 59, 0.15) 25%, 
        rgba(30, 41, 59, 0.35) 50%, 
        rgba(30, 41, 59, 0.65) 75%, 
        rgba(30, 41, 59, 0.9) 95%, 
        rgba(30, 41, 59, 1) 100%);
    pointer-events: none;
  }

  /* Ultra-soft gradient transition */
  .section-transition-gradient {
    position: relative;
  }

  .section-transition-gradient::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, 
      rgba(30, 41, 59, 0) 0%, 
      rgba(30, 41, 59, 0.02) 10%, 
      rgba(30, 41, 59, 0.08) 25%, 
      rgba(30, 41, 59, 0.18) 40%, 
      rgba(30, 41, 59, 0.35) 60%, 
      rgba(30, 41, 59, 0.55) 75%, 
      rgba(30, 41, 59, 0.75) 88%, 
      rgba(30, 41, 59, 0.9) 95%, 
      rgba(30, 41, 59, 1) 100%);
    pointer-events: none;
  }

  /* Soft curve transition */
  .section-transition-curve {
    position: relative;
    overflow: hidden;
  }

  .section-transition-curve::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 0;
    right: 0;
    height: 120px;
    background: 
      radial-gradient(ellipse 150% 120% at center top, 
        rgba(30, 41, 59, 0) 0%, 
        rgba(30, 41, 59, 0.03) 8%, 
        rgba(30, 41, 59, 0.12) 20%, 
        rgba(30, 41, 59, 0.28) 40%, 
        rgba(30, 41, 59, 0.5) 65%, 
        rgba(30, 41, 59, 0.75) 85%, 
        rgba(30, 41, 59, 0.92) 96%, 
        rgba(30, 41, 59, 1) 100%);
    pointer-events: none;
  }

  /* Gentle slant transition */
  .section-transition-slant {
    position: relative;
    overflow: hidden;
  }

  .section-transition-slant::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, 
      rgba(30, 41, 59, 0) 0%, 
      rgba(30, 41, 59, 0.05) 15%, 
      rgba(30, 41, 59, 0.2) 35%, 
      rgba(30, 41, 59, 0.45) 60%, 
      rgba(30, 41, 59, 0.7) 80%, 
      rgba(30, 41, 59, 0.9) 95%, 
      rgba(30, 41, 59, 1) 100%);
    clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
  }

  /* Soft diagonal transition */
  .section-transition-diagonal {
    position: relative;
    overflow: hidden;
  }

  .section-transition-diagonal::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(45deg, 
      rgba(30, 41, 59, 0) 0%, 
      rgba(30, 41, 59, 0.03) 10%, 
      rgba(30, 41, 59, 0.15) 30%, 
      rgba(30, 41, 59, 0.35) 55%, 
      rgba(30, 41, 59, 0.6) 75%, 
      rgba(30, 41, 59, 0.8) 90%, 
      rgba(30, 41, 59, 0.95) 98%, 
      rgba(30, 41, 59, 1) 100%);
    transform: skewY(-1deg);
    pointer-events: none;
  }

  /* Footer transition */
  .footer-transition {
    position: relative;
  }

  .footer-transition::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, 
      rgba(15, 23, 42, 0) 0%, 
      rgba(15, 23, 42, 0.1) 15%, 
      rgba(15, 23, 42, 0.25) 35%, 
      rgba(15, 23, 42, 0.45) 55%, 
      rgba(15, 23, 42, 0.65) 75%, 
      rgba(15, 23, 42, 0.8) 90%, 
      rgba(15, 23, 42, 1) 100%);
    pointer-events: none;
  }

  /* Hero section transitions */
  .hero-transition {
    position: relative;
  }

  .hero-transition::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, 
      rgba(30, 41, 59, 0) 0%, 
      rgba(30, 41, 59, 0.05) 15%, 
      rgba(30, 41, 59, 0.15) 35%, 
      rgba(30, 41, 59, 0.3) 55%, 
      rgba(30, 41, 59, 0.5) 75%, 
      rgba(30, 41, 59, 0.7) 90%, 
      rgba(30, 41, 59, 0.85) 98%, 
      rgba(30, 41, 59, 1) 100%);
    pointer-events: none;
  }

  /* Dispel-style floating elements */
  .floating-element {
    @apply absolute opacity-20;
  }

  .floating-element-1 {
    @apply top-20 right-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl;
  }

  .floating-element-2 {
    @apply bottom-20 left-20 w-64 h-64 bg-accent/5 rounded-full blur-2xl;
  }

  /* Background Patterns */
  .bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .bg-pattern-grid {
    background-image: 
      linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .bg-pattern-lines {
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(59, 130, 246, 0.05) 10px,
      rgba(59, 130, 246, 0.05) 20px
    );
  }

  .bg-pattern-industrial {
    background-image: 
      linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
      linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  }

  /* Enhanced Card Designs */
  .card-enhanced {
    @apply bg-slate-800/60 backdrop-blur-sm border border-slate-600/50 rounded-xl shadow-xl;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .card-enhanced:hover {
    @apply border-blue-500/30 shadow-2xl;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.7) 100%);
    box-shadow: 
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(59, 130, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Glassmorphism Effects */
  .glass-card {
    @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-xl;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  }

  .glass-card:hover {
    @apply bg-white/10 border-white/20;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.5);
  }

  /* Carousel specific styling - Dispel inspired */
  .carousel-container {
    @apply relative overflow-hidden rounded-2xl border border-border/30 bg-gradient-to-br from-bg-elevated/20 to-transparent backdrop-blur-sm;
  }

  .carousel-slide {
    @apply w-full flex-shrink-0 relative aspect-[4/3];
  }

  .carousel-image {
    @apply w-full h-full object-cover transition-transform duration-700 ease-in-out;
  }

  .carousel-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent;
  }

  .carousel-label {
    @apply absolute top-4 left-4 bg-bg/90 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/50;
  }

  .carousel-nav-button {
    @apply w-10 h-10 bg-bg/80 backdrop-blur-sm border border-border/50 rounded-full flex items-center justify-center text-ink hover:bg-bg/90 transition-all duration-200 hover:scale-105;
  }

  .carousel-dot {
    @apply w-2 h-2 rounded-full transition-all duration-300;
  }

  .carousel-dot-active {
    @apply bg-accent w-6;
  }

  .carousel-dot-inactive {
    @apply bg-muted/50 hover:bg-muted/80;
  }

  /* Auto-play indicator animation */
  .carousel-autoplay-indicator {
    @apply w-2 h-2 rounded-full transition-all duration-300;
  }

  .carousel-autoplay-active {
    @apply bg-accent animate-pulse;
  }

  .carousel-autoplay-paused {
    @apply bg-muted/50;
  }

  /* Animation classes */
  .animate-fadeInUp {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .animate-fadeInUp.animate-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-fadeInLeft {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .animate-fadeInLeft.animate-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-fadeInRight {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .animate-fadeInRight.animate-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-scaleIn {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

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

  .animate-slideInDown {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }

  .animate-slideInDown.animate-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-pulse-blue {
    animation: pulseBlue 2s infinite;
  }

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

  .animate-rotate-slow {
    animation: rotateSlow 20s linear infinite;
  }

  /* Immediate visible animations */
  .animate-bounce-subtle {
    animation: bounceSubtle 2s ease-in-out infinite;
  }

  /* Enhanced Statistics Styles */
  .stat-number {
    @apply text-4xl lg:text-5xl font-bold text-white mb-2;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    animation: statPulse 3s ease-in-out infinite;
  }

  .stat-number:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
    transition: all 0.3s ease;
  }

  .stat-card {
    @apply bg-slate-800/30 backdrop-blur-sm border border-slate-600/30 rounded-2xl p-6 text-center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.3) 0%, rgba(51, 65, 85, 0.2) 100%);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 0 1px rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s ease;
  }

  .stat-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 0 1px rgba(59, 130, 246, 0.3),
      0 0 30px rgba(59, 130, 246, 0.2);
  }

  .stat-card:hover::before {
    left: 100%;
  }

  .stat-label {
    @apply text-slate-400 text-sm font-medium;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    transition: all 0.3s ease;
  }

  .stat-card:hover .stat-label {
    color: #60a5fa;
    opacity: 1;
  }

  /* Enhanced hover animations */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .hover-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.5);
  }

  /* Advanced hover effects */
  .hover-slide {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .hover-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }

  .hover-slide:hover::before {
    left: 100%;
  }

  .hover-rotate {
    transition: transform 0.3s ease;
  }

  .hover-rotate:hover {
    transform: rotate(2deg) scale(1.05);
  }

  .hover-pulse {
    transition: all 0.3s ease;
  }

  .hover-pulse:hover {
    animation: pulse 0.6s ease-in-out;
  }

  /* Button hover effects */
  .btn-hover-lift {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  .btn-hover-lift:active {
    transform: translateY(0);
  }

  /* Card hover effects */
  .card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(59, 130, 246, 0.1);
  }

  /* Text hover effects */
  .text-hover-glow {
    transition: all 0.3s ease;
  }

  .text-hover-glow:hover {
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    color: #60a5fa;
  }
}

/* Keyframe animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseBlue {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
}

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

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

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

@keyframes statPulse {
  0%, 100% {
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 50px rgba(59, 130, 246, 0.8);
    transform: scale(1.05);
  }
}

@keyframes statGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
}

@layer utilities {
  /* Text truncation utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .transition-smooth {
      transition: none;
    }
    
    .animate-fadeInUp,
    .animate-fadeInLeft,
    .animate-fadeInRight,
    .animate-scaleIn,
    .animate-slideInDown,
    .animate-pulse-blue,
    .animate-float,
    .animate-rotate-slow {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}
