/* ============================================================
   animations.css — KDLearnSpace Transitions & Keyframes
   ============================================================ */

/* ── Page enter ── */
.page-container { opacity: 1; }
.page-enter { animation: pageSlideIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) both; }

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

/* ── Slide up ── */
.animate-slide-up { animation: slideUp 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-fade     { animation: fadeIn  0.4s  ease both; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Stagger delays ── */
.delay-1 { animation-delay: 0.07s; }
.delay-2 { animation-delay: 0.14s; }
.delay-3 { animation-delay: 0.21s; }
.delay-4 { animation-delay: 0.28s; }

/* ── Spinner ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Blob background ── */
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 15px) scale(0.96); }
}

/* ── Typing dots ── */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Timer pulse ── */
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Toast ── */
.toast-enter  { opacity: 0; transform: translateX(60px) scale(0.9); }
.toast-visible { opacity: 1; transform: translateX(0) scale(1);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.toast-exit { opacity: 0; transform: translateX(60px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease; }

/* ── Chatbot open ── */
.chatbot-widget.open {
  animation: chatOpen 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes chatOpen {
  from { opacity: 0; transform: scale(0.88) translateY(16px); transform-origin: bottom right; }
  to   { opacity: 1; transform: scale(1)    translateY(0);    transform-origin: bottom right; }
}

/* ── Chat message appear ── */
.animate-in {
  animation: chatMsgIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Result ring fill ── */
.ring-fill {
  animation: ringFill 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
@keyframes ringFill {
  from { stroke-dashoffset: 339.3; }
}

/* ── Hover bounce ── */
@keyframes bounceIn {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ── Theme transition ── */
html { transition: color-scheme 0.25s ease; }
[data-theme] * { transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease; }