/* React SPA Microinteractions for ACITE Page */

/* Base Entry Fade-In Animation */
@keyframes reactFadeInUp_d7b80121 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.react-fade-in {
  animation: reactFadeInUp_d7b80121 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delay Utilities for smooth staggered load */
.react-delay-1 { animation-delay: 0.1s; }
.react-delay-2 { animation-delay: 0.2s; }
.react-delay-3 { animation-delay: 0.3s; }
.react-delay-4 { animation-delay: 0.4s; }

/* Interactive Modern Cards */
.react-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  border-radius: 12px !important;
}

.react-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-color: #2563eb !important; /* Tech blue accent on hover */
}

/* Active Click Scale Shrink for Buttons and Cards */
.react-click-active {
  transition: transform 0.1s ease !important;
}

.react-click-active:active {
  transform: scale(0.97) !important;
}

/* Soft minimalist gradient overlays for backgrounds */
.react-gradient-bg {
  background: radial-gradient(circle at 10% 20%, rgba(243, 244, 246, 1) 0%, rgba(255, 255, 255, 1) 90%);
}