/* ============================================================
   ANIMATIONS.CSS — Keyframes & Animation Utilities
   Math Tutor UI
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */

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

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

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.97); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 217, 255, 0.3); }
  50%       { box-shadow: 0 0 25px rgba(0, 217, 255, 0.7), 0 0 60px rgba(0, 217, 255, 0.3); }
}

@keyframes warn-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 170, 0, 0.3); }
  50%       { box-shadow: 0 0 25px rgba(255, 170, 0, 0.7), 0 0 60px rgba(255, 170, 0, 0.3); }
}

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

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

@keyframes border-glow {
  0%, 100% { border-color: var(--glass-border); }
  50%       { border-color: var(--cyan-dim); }
}

@keyframes bubble-in-right {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes bubble-in-left {
  from { opacity: 0; transform: translateX(-20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes float-up {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Animation Utility Classes ───────────────────────────── */

.animate-fade-in {
  animation: fadeIn 300ms var(--ease-out) both;
}

.animate-slide-up {
  animation: slideUp 300ms var(--ease-out) both;
}

.animate-slide-down {
  animation: slideDown 300ms var(--ease-out) both;
}

.animate-slide-left {
  animation: slideInLeft 300ms var(--ease-out) both;
}

.animate-slide-right {
  animation: slideInRight 300ms var(--ease-out) both;
}

.animate-scale-in {
  animation: scaleIn 300ms var(--ease-spring) both;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-float {
  animation: float-up 4s ease-in-out infinite;
}

/* Stagger utilities — apply to parent, children get delay */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }

/* Delay helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── Skeleton Loader ─────────────────────────────────────── */

.skeleton {
  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: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}

.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-40 { width: 40%; }

/* ── Typing Indicator ────────────────────────────────────── */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* ── Loading Spinner ─────────────────────────────────────── */

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Ripple Effect ───────────────────────────────────────── */

.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: ripple-expand 0.5s ease-out;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ── Overlay Fade ────────────────────────────────────────── */

.overlay-fade-enter {
  animation: fadeIn 300ms var(--ease-out) both;
}

.overlay-fade-exit {
  animation: fadeOut 200ms var(--ease-out) both;
}

/* ── Button Click Feedback ───────────────────────────────── */

@keyframes btn-click {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.btn-click-anim {
  animation: btn-click 150ms var(--ease-out);
}

/* ── Liquid Morphism Keyframes ──────────────────────────────── */

/* Morphing blob shape */
@keyframes liquid-morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  15%  { border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; }
  30%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  45%  { border-radius: 55% 45% 40% 60% / 35% 65% 55% 45%; }
  60%  { border-radius: 50% 60% 30% 70% / 40% 70% 60% 30%; }
  75%  { border-radius: 45% 55% 60% 40% / 65% 35% 45% 55%; }
  90%  { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Gradient position animation */
@keyframes gradient-flow {
  0%   { background-position: 0%   50%; }
  25%  { background-position: 50%  0%;  }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50%  100%; }
  100% { background-position: 0%   50%; }
}

/* Hue rotation for color flow */
@keyframes hue-flow {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  33%  { filter: hue-rotate(30deg)  brightness(1.1); }
  66%  { filter: hue-rotate(-20deg) brightness(0.95); }
  100% { filter: hue-rotate(0deg)   brightness(1); }
}

/* Liquid button gradient */
@keyframes liquid-btn {
  0%   { background-position: 0%   50%; box-shadow: 0 0 15px rgba(0,217,255,0.3); }
  50%  { background-position: 100% 50%; box-shadow: 0 0 30px rgba(168,85,247,0.4), 0 0 60px rgba(0,217,255,0.2); }
  100% { background-position: 0%   50%; box-shadow: 0 0 15px rgba(0,217,255,0.3); }
}

/* Ripple wave effect for active elements */
@keyframes liquid-ripple {
  0%   { transform: scale(0.95); opacity: 1; }
  70%  { transform: scale(1.08); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Flowing underline */
@keyframes line-flow {
  0%   { background-position: -100% 0; }
  100% { background-position: 200%  0; }
}

/* ── Liquid Animation Classes ────────────────────────────── */

.animate-liquid-morph {
  animation: liquid-morph 10s ease-in-out infinite;
}

.animate-gradient-flow {
  background-size: 300% 300%;
  animation: gradient-flow 5s ease infinite;
}

.animate-hue-flow {
  animation: hue-flow 8s ease-in-out infinite;
}

.animate-liquid-btn {
  background: linear-gradient(135deg, #00d9ff, #a855f7, #ec4899, #00d9ff);
  background-size: 300% 300%;
  animation: liquid-btn 4s ease infinite;
}