/* ==========================================================================
   FLORECIMIENTO CEREBRAL SIGLO XXI - ANIMATIONS & DYNAMICS
   ========================================================================== */

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

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes synapticFlash {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

.pulse-anim {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Scroll Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-delay-1 {
  transition-delay: 0.15s;
}

.reveal-delay-2 {
  transition-delay: 0.3s;
}

.reveal-delay-3 {
  transition-delay: 0.45s;
}

/* Quadrant Flash Animations for Game */
.quad-flash-yellow {
  animation: flashYellow 0.4s ease;
}
@keyframes flashYellow {
  0% { background: #ffb703; box-shadow: 0 0 10px #ffb703; }
  50% { background: #fff59d; box-shadow: 0 0 40px #fff; }
  100% { background: #ffb703; box-shadow: 0 0 10px #ffb703; }
}

.quad-flash-blue {
  animation: flashBlue 0.4s ease;
}
@keyframes flashBlue {
  0% { background: #0284c7; box-shadow: 0 0 10px #0284c7; }
  50% { background: #7dd3fc; box-shadow: 0 0 40px #fff; }
  100% { background: #0284c7; box-shadow: 0 0 10px #0284c7; }
}

.quad-flash-red {
  animation: flashRed 0.4s ease;
}
@keyframes flashRed {
  0% { background: #e11d48; box-shadow: 0 0 10px #e11d48; }
  50% { background: #fda4af; box-shadow: 0 0 40px #fff; }
  100% { background: #e11d48; box-shadow: 0 0 10px #e11d48; }
}

.quad-flash-green {
  animation: flashGreen 0.4s ease;
}
@keyframes flashGreen {
  0% { background: #10b981; box-shadow: 0 0 10px #10b981; }
  50% { background: #a7f3d0; box-shadow: 0 0 40px #fff; }
  100% { background: #10b981; box-shadow: 0 0 10px #10b981; }
}