/* ─── Scroll-Reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* iOS Safari fallback: if JS scroll-reveal fails, still show content */
@media (max-width: 768px) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Staggered reveal delay utilities */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Hero Gradient Text ─────────────────────────────────── */
.gradient-text {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

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

/* ─── Floating Orbs (Hero background) ───────────────────── */
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float 8s ease-in-out infinite;
}

@media (max-width: 768px) {
  .orb { display: none; }
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #667eea, transparent);
  top: -200px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #764ba2, transparent);
  top: 100px;
  right: -150px;
  animation-delay: -3s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #f093fb, transparent);
  bottom: -100px;
  left: 40%;
  animation-delay: -6s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  33%       { transform: translateY(-30px) scale(1.05); }
  66%       { transform: translateY(15px) scale(0.97); }
}

/* ─── Page Transitions ───────────────────────────────────── */
.page-enter {
  animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* ─── Number Counter Animation ───────────────────────────── */
.count-up {
  transition: all 0.05s linear;
}

/* ─── Card Hover Glow ────────────────────────────────────── */
.card-glow:hover {
  box-shadow: var(--shadow-glow-blue), var(--shadow-lg);
}

/* ─── Shimmer Loading ────────────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Subject Card Icon Pulse ────────────────────────────── */
.subject-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
}

.card:hover .subject-icon {
  transform: scale(1.1) rotate(-3deg);
}

/* ─── Correct/Wrong flash ────────────────────────────────── */
@keyframes correctFlash {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

@keyframes wrongFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

.flash-correct { animation: correctFlash 0.6s ease; }
.flash-wrong   { animation: wrongFlash 0.6s ease; }