/* ============================================================
   MOVEXARO - Animations
   ============================================================ */

/* Keyframes */
@keyframes cexFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes cexPulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.2); }
  50% { box-shadow: 0 0 40px rgba(0, 229, 255, 0.5); }
}

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

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

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

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

@keyframes cexTextGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(0, 229, 255, 0.3); }
  50% { text-shadow: 0 0 20px rgba(0, 229, 255, 0.8), 0 0 40px rgba(0, 229, 255, 0.4); }
}

@keyframes cexScanline {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

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

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

@keyframes cexRipple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Utility animation classes */
.cex-anim-float { animation: cexFloat 4s ease-in-out infinite; }
.cex-anim-float-delay { animation: cexFloat 4s ease-in-out infinite 0.8s; }
.cex-anim-pulse-glow { animation: cexPulseGlow 3s ease-in-out infinite; }
.cex-anim-blink { animation: cexBlink 2s ease-in-out infinite; }
.cex-anim-text-glow { animation: cexTextGlow 3s ease-in-out infinite; }
.cex-anim-spin-slow { animation: cexSpin 20s linear infinite; }

/* Scroll-triggered animations */
.cex-scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cex-scroll-fade.cex-in-view {
  opacity: 1;
  transform: translateY(0);
}

.cex-scroll-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cex-scroll-left.cex-in-view {
  opacity: 1;
  transform: translateX(0);
}

.cex-scroll-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cex-scroll-right.cex-in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.cex-delay-100 { transition-delay: 0.1s; }
.cex-delay-200 { transition-delay: 0.2s; }
.cex-delay-300 { transition-delay: 0.3s; }
.cex-delay-400 { transition-delay: 0.4s; }
.cex-delay-500 { transition-delay: 0.5s; }
.cex-delay-600 { transition-delay: 0.6s; }

/* Hero heading entrance */
.cex-hero-line-1 {
  animation: cexFadeInLeft 0.8s ease forwards 0.3s;
  opacity: 0;
}

.cex-hero-line-2 {
  animation: cexFadeInLeft 0.8s ease forwards 0.5s;
  opacity: 0;
}

.cex-hero-sub-anim {
  animation: cexFadeIn 0.8s ease forwards 0.7s;
  opacity: 0;
}

.cex-hero-stats-anim {
  animation: cexFadeIn 0.8s ease forwards 0.9s;
  opacity: 0;
}

.cex-hero-cta-anim {
  animation: cexFadeIn 0.8s ease forwards 1.1s;
  opacity: 0;
}

.cex-hero-img-anim {
  animation: cexFadeInRight 1s ease forwards 0.5s;
  opacity: 0;
}

/* Scanline effect */
.cex-scanline-wrap {
  position: relative;
  overflow: hidden;
}

.cex-scanline-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.04), transparent);
  animation: cexScanline 6s linear infinite;
  pointer-events: none;
}

/* Typing cursor effect */
.cex-typing-cursor::after {
  content: '|';
  animation: cexBlink 1s step-end infinite;
  color: var(--cex-accent-primary);
  margin-left: 2px;
}

/* Button ripple */
.cex-btn-primary {
  position: relative;
  overflow: hidden;
}

.cex-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: cexRipple 0.6s linear;
  pointer-events: none;
}

/* Neon border glow pulse */
.cex-neon-pulse {
  animation: cexPulseGlow 2.5s ease-in-out infinite;
}

/* Quiz feedback animation */
@keyframes cexCorrectBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes cexIncorrectShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.cex-quiz-option.correct { animation: cexCorrectBounce 0.3s ease; }
.cex-quiz-option.incorrect { animation: cexIncorrectShake 0.3s ease; }

/* Score reveal animation */
@keyframes cexScoreReveal {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.cex-quiz-result-score { animation: cexScoreReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Page transition */
.cex-page-enter {
  animation: cexFadeIn 0.5s ease forwards;
}

/* Loading spinner */
.cex-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--cex-border-subtle);
  border-top-color: var(--cex-accent-primary);
  border-radius: 50%;
  animation: cexSpin 0.8s linear infinite;
  display: inline-block;
}

/* Progress bar animation */
.cex-progress-animated {
  animation: cexProgressPulse 2s ease-in-out infinite;
}

/* Image hover zoom */
.cex-img-zoom {
  overflow: hidden;
  border-radius: var(--cex-radius-md);
}

.cex-img-zoom img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Nav link underline animation is in main CSS */

/* Card entrance on page load */
.cex-card-entrance {
  animation: cexSlideInUp 0.5s ease forwards;
}

.cex-card-entrance:nth-child(1) { animation-delay: 0.1s; opacity: 0; }
.cex-card-entrance:nth-child(2) { animation-delay: 0.2s; opacity: 0; }
.cex-card-entrance:nth-child(3) { animation-delay: 0.3s; opacity: 0; }
.cex-card-entrance:nth-child(4) { animation-delay: 0.4s; opacity: 0; }