/* =====================================================
   BRAINKISS — animations.css
   Keyframes and animation utility classes
   ===================================================== */

/* =====================================================
   KEYFRAMES
   ===================================================== */

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

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

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

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.45; }
  50%       { transform: translateX(-50%) translateY(-9px); opacity: 0.75; }
}

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

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

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

@keyframes shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes pulseRing {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.35); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 12px rgba(168, 85, 247, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

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

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

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

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

.animate-fade-up  { animation: fadeUp  0.8s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-fade-in  { animation: fadeIn  0.6s ease both; }
.animate-float    { animation: float   3.5s ease-in-out infinite; }
.animate-spin-slow{ animation: spinSlow 10s linear infinite; }
.animate-shimmer  { animation: shimmer 2.5s ease-in-out infinite; }
.animate-pulse    { animation: pulseRing 2s ease-out infinite; }

/* Staggered delays */
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.38s; }
.delay-4 { animation-delay: 0.52s; }
.delay-5 { animation-delay: 0.66s; }

/* =====================================================
   GRADIENT TEXT ANIMATION
   ===================================================== */
.animated-gradient-text {
  background: linear-gradient(270deg, #a855f7, #60a5fa, #f472b6, #a855f7);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientPan 5s ease infinite;
}

/* =====================================================
   HERO SLOGAN — typewriter cursor (optional)
   ===================================================== */
.cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--purple-light);
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 1px;
  animation: blink 1s step-end infinite;
}

/* =====================================================
   MODULE CARD BACKGROUNDS (gradient by color theme)
   ===================================================== */
.module-bg-purple {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(168,85,247,0.08));
}
.module-bg-blue {
  background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(96,165,250,0.08));
}
.module-bg-pink {
  background: linear-gradient(135deg, rgba(219,39,119,0.2), rgba(244,114,182,0.08));
}
.module-bg-teal {
  background: linear-gradient(135deg, rgba(13,148,136,0.2), rgba(45,212,191,0.08));
}
.module-bg-amber {
  background: linear-gradient(135deg, rgba(180,83,9,0.2), rgba(251,191,36,0.08));
}