/* Welcome page – landing styles */
* { font-family: 'Cairo', sans-serif; }
html { scroll-behavior: smooth; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pingSoft {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { transform: scale(1.6); opacity: 0;  }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes timerShrink {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes xpPop {
  0%   { opacity:0; transform: scale(.5) translateY(0); }
  60%  { opacity:1; transform: scale(1.2) translateY(-20px); }
  100% { opacity:0; transform: scale(1)   translateY(-40px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 60%{transform:translateX(4px)}
}
@keyframes slideTesti {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity .6s ease, transform .6s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.gradient-text {
  background: linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-bg-animated {
  background: linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899, #4f46e5);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}
.hero-glow {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(99,102,241,.18) 0%, transparent 70%);
}
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(79,70,229,.15);
}
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(79,70,229,.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(79,70,229,.45);
}
.btn-primary:active { transform: scale(.97); }

.challenge-timer { animation: timerShrink 30s linear forwards; }
.xp-pop { animation: xpPop 1.2s ease forwards; }

.shimmer-text {
  background: linear-gradient(90deg, #4f46e5 0%, #a5b4fc 40%, #4f46e5 60%, #a5b4fc 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

.glass {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-dark {
  background: rgba(30,27,75,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.section-wave {
  clip-path: ellipse(110% 100% at 50% 0%);
}

/* Scroll indicator */
.scroll-indicator {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4f46e5, #ec4899);
  transform-origin: right;
  z-index: 1000;
}

/* Navbar glass */
.navbar-glass {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Challenge demo styles */
.option-btn {
  border: 2px solid #e5e7eb;
  transition: all .18s ease;
}
.option-btn:hover { border-color: #4f46e5; background: #eef2ff; }
.option-btn.selected { border-color: #4f46e5; background: #eef2ff; color: #4338ca; }
.option-btn.correct  { border-color: #22c55e; background: #f0fdf4; color: #15803d; }
.option-btn.wrong    { border-color: #ef4444; background: #fef2f2; color: #dc2626;
  animation: shake .3s ease; }

/* Progress ring */
.progress-ring { transform: rotate(-90deg); }
.progress-ring-circle {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s ease;
}

/* Floating card */
.float-1 { animation: float 3.5s ease-in-out infinite; }
.float-2 { animation: float 4s ease-in-out 0.5s infinite; }
.float-3 { animation: float 3s ease-in-out 1s infinite; }
.float-4 { animation: float 4.5s ease-in-out 1.5s infinite; }

/* Testimonial slider */
.testimonial-track {
  display: flex; gap: 1rem;
  animation: slideTesti 30s linear infinite;
}
.testimonial-wrap:hover .testimonial-track { animation-play-state: paused; }