/* ========================================
   ANIMATIONS — EduFlow Premium
   ======================================== */

/* ── Fade Up ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger Children ── */
.fade-up-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* ── Slide In From Right ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in-right { animation: slideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── Slide In From Left ── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in-left { animation: slideInLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── Pop In (scale) ── */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.pop-in { animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── Float Up Down (hero illustration) ── */
@keyframes floatUpDown {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-14px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.floating { animation: floatUpDown 5s ease-in-out infinite; }

/* ── Spin (Loading) ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ── Success Pop ── */
@keyframes successPop {
  0%   { transform: scale(0) rotate(-15deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.success-pop { animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── Pulse Ring ── */
@keyframes pulseRing {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 102, 132, 0.35); }
  70%  { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(0, 102, 132, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 102, 132, 0); }
}
.pulse { animation: pulseRing 2.2s ease-in-out infinite; }

/* ── Shimmer (skeleton loading) ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  border-radius: 0.5rem;
  background: linear-gradient(90deg,
    var(--surface-container-high) 25%,
    var(--surface-container-highest) 50%,
    var(--surface-container-high) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* ── Gradient Shift (hero banner) ── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ── Orbit (decorative circles) ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}
.orbit { animation: orbit 8s linear infinite; }

/* ── Wave (background blob) ── */
@keyframes wave {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.wave-blob { animation: wave 10s ease-in-out infinite; }

/* ── Count Up (number animation — JS triggered) ── */
.count-up { transition: all 0.3s ease; }

/* ── Shake Error ── */
@keyframes shakeIn {
  0%   { transform: translateX(-10px); opacity: 0; }
  25%  { transform: translateX(8px); }
  50%  { transform: translateX(-6px); }
  75%  { transform: translateX(4px); }
  100% { transform: translateX(0); opacity: 1; }
}
.shake { animation: shakeIn 0.4s ease forwards; }

/* ── Input Highlight Ring ── */
.highlight-ring {
  box-shadow: 0 0 0 4px rgba(0, 102, 132, 0.15) !important;
  border-bottom-color: var(--primary) !important;
  background-color: var(--surface-container) !important;
}

/* ── Page Transition ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-in {
  animation: pageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Card Hover Glow ── */
.card-glow {
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-glow:hover {
  box-shadow: 0 16px 40px rgba(0, 77, 100, 0.15), 0 0 0 1px rgba(0, 102, 132, 0.1);
  transform: translateY(-6px);
}

/* ── Sidebar Item Slide ── */
.sidebar-item {
  position: relative;
  overflow: hidden;
}
.sidebar-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--signature-gradient);
  transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 2px 2px 0;
}
.sidebar-item:hover::before { transform: scaleY(1); }
.sidebar-item.active::before,
.sidebar-item.active-tutor::before { transform: scaleY(1); }

/* ── Button Ripple ── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn:active::after { opacity: 1; }

/* ── Notification Slide ── */
@keyframes notifIn {
  from { opacity: 0; transform: translateX(16px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.notif-in { animation: notifIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── Typing Dots ── */
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
.typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: typingDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }