/* ============================================
   NIVEAU 22 — LES ANIMATIONS
   Styles spécifiques au chapitre
   ============================================ */

/* ---------- DÉMONSTRATIONS KEYFRAMES ---------- */
.demo-keyframes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.kf-demo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.kf-demo .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kf-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Animations keyframes */
@keyframes kf-slide-right {
  0% { transform: translateX(-30px); opacity: 0; }
  100% { transform: translateX(30px); opacity: 1; }
}

@keyframes kf-fade-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes kf-scale-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes kf-rotate-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes kf-color-shift {
  0% { background: #2563eb; }
  25% { background: #7c3aed; }
  50% { background: #ec4899; }
  75% { background: #f59e0b; }
  100% { background: #2563eb; }
}

.animate-slide { animation: kf-slide-right 1.5s ease infinite alternate; }
.animate-pulse { animation: kf-fade-pulse 2s ease-in-out infinite; }
.animate-scale { animation: kf-scale-bounce 1s ease-in-out infinite; }
.animate-rotate { animation: kf-rotate-spin 2s linear infinite; }
.animate-color { animation: kf-color-shift 4s ease infinite; }

/* ---------- DÉMO PROPRIÉTÉS ANIMATION ---------- */
.demo-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.prop-demo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.prop-demo .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anim-box {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

@keyframes prop-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(40px); }
}

@keyframes prop-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.anim-linear { animation: prop-move 2s linear infinite; }
.anim-ease { animation: prop-move 2s ease infinite; }
.anim-ease-in { animation: prop-move 2s ease-in infinite; }
.anim-ease-out { animation: prop-move 2s ease-out infinite; }
.anim-ease-in-out { animation: prop-move 2s ease-in-out infinite; }
.anim-cubic { animation: prop-move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; }

.anim-normal { animation: prop-move 1.5s ease infinite normal; }
.anim-reverse { animation: prop-move 1.5s ease infinite reverse; }
.anim-alternate { animation: prop-move 1.5s ease infinite alternate; }
.anim-alt-reverse { animation: prop-move 1.5s ease infinite alternate-reverse; }

.anim-fill-none { animation: prop-fade 3s ease infinite none; }
.anim-fill-forwards { animation: prop-fade 3s ease 1 forwards; }
.anim-fill-backwards { animation: prop-fade 3s ease 1 backwards; }

/* ---------- DÉMO TRANSFORM ---------- */
.demo-transforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.tf-demo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.tf-demo .label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.tf-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  transition: transform 0.4s ease;
}

.tf-demo:hover .tf-box {
  transform: translateX(15px);
}

.tf-demo.tf-rotate:hover .tf-box { transform: rotate(45deg); }
.tf-demo.tf-scale:hover .tf-box { transform: scale(1.3); }
.tf-demo.tf-skew:hover .tf-box { transform: skewX(-15deg); }
.tf-demo.tf-perspective:hover .tf-box { transform: perspective(200px) rotateY(30deg); }

/* ---------- SPINNERS ---------- */
.demo-spinners {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
}

.spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.spinner .label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

/* Spinner 1 : Ring */
.spinner-ring {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Spinner 2 : Dots */
.spinner-dots {
  display: flex;
  gap: 6px;
}
.spinner-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  animation: dot-bounce 1.4s ease-in-out infinite;
}
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Spinner 3 : Bar */
.spinner-bars {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 40px;
}
.spinner-bars span {
  width: 6px;
  background: #2563eb;
  border-radius: 3px;
  animation: bar-grow 1.2s ease-in-out infinite;
}
.spinner-bars span:nth-child(1) { animation-delay: 0s; }
.spinner-bars span:nth-child(2) { animation-delay: 0.1s; }
.spinner-bars span:nth-child(3) { animation-delay: 0.2s; }
.spinner-bars span:nth-child(4) { animation-delay: 0.3s; }
.spinner-bars span:nth-child(5) { animation-delay: 0.4s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes bar-grow {
  0%, 100% { height: 10px; }
  50% { height: 35px; }
}

/* ---------- ANIMATIONS PRATIQUES ---------- */
.demo-animations-pratiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.anim-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 160px;
  justify-content: center;
}

.anim-card .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anim-el {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Bounce */
@keyframes bounce-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.anim-bounce .anim-el { animation: bounce-anim 0.6s ease-in-out infinite; }

/* Shake */
@keyframes shake-anim {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.anim-shake .anim-el { animation: shake-anim 0.8s ease-in-out infinite; }

/* Slide-in */
@keyframes slide-left {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.anim-slide .anim-el { animation: slide-left 1s ease-in-out infinite alternate; }

/* Fade */
@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.anim-fade .anim-el { animation: fade-in-out 2s ease-in-out infinite; }

/* Floating */
@keyframes floating {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(2deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}
.anim-float .anim-el { animation: floating 3s ease-in-out infinite; }

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.2); }
  56% { transform: scale(1); }
}
.anim-heartbeat .anim-el {
  background: linear-gradient(135deg, #ec4899, #ef4444);
  animation: heartbeat 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Wave */
@keyframes wave-anim {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
}
.anim-wave .anim-el { animation: wave-anim 1.5s ease-in-out infinite; transform-origin: bottom center; }

/* ---------- TYPEWRITER ---------- */
.typewriter-demo {
  background: #1e293b;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  color: #e2e8f0;
  font-size: 1rem;
  overflow: hidden;
}

.typewriter-text {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid #2563eb;
  white-space: nowrap;
  animation: typewrite 3s steps(30) 1s forwards, blink-caret 0.75s step-end infinite;
  width: 0;
}

@keyframes typewrite {
  from { width: 0; }
  to { width: 30ch; }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: #2563eb; }
}

/* ---------- RIPPLE ---------- */
.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.ripple-btn:active { transform: scale(0.97); }

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

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

/* ---------- MODAL ANIMATION ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.modal-overlay.active {
  display: flex;
  animation: fade-in 0.3s ease forwards;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  animation: modal-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: scale(0.9) translateY(20px);
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes modal-enter {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-trigger {
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-trigger:hover { background: #1d4ed8; }

.modal-close {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #e2e8f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* ---------- TOAST ---------- */
.toast-container {
  position: relative;
  min-height: 60px;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #16a34a;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  animation: toast-slide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: translateX(110%);
}

.toast.info { background: #2563eb; }
.toast.warning { background: #f59e0b; }

@keyframes toast-slide {
  to { transform: translateX(0); }
}

.toast-trigger {
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

/* ---------- STAGGERED LIST ---------- */
.stagger-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stagger-item {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-weight: 500;
  animation: stagger-in 0.5s ease forwards;
  opacity: 0;
  transform: translateX(-20px);
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- VISEUALISEUR TIMING ---------- */
.timing-visualizer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.timing-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.timing-label {
  width: 140px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-align: right;
  flex-shrink: 0;
}

.timing-track {
  flex: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.timing-ball {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  position: absolute;
  top: -4px;
  left: 0;
}

.timing-row:nth-child(1) .timing-ball { animation: timing-move 2s linear infinite; }
.timing-row:nth-child(2) .timing-ball { animation: timing-move 2s ease infinite; }
.timing-row:nth-child(3) .timing-ball { animation: timing-move 2s ease-in infinite; }
.timing-row:nth-child(4) .timing-ball { animation: timing-move 2s ease-out infinite; }
.timing-row:nth-child(5) .timing-ball { animation: timing-move 2s ease-in-out infinite; }
.timing-row:nth-child(6) .timing-ball { animation: timing-move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; }

@keyframes timing-move {
  0% { left: 0; }
  50% { left: calc(100% - 16px); }
  100% { left: 0; }
}

/* ---------- BEFORE/AFTER DEMOS ---------- */
.ba-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.ba-demo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.ba-demo .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 1rem;
}

/* Checkmark animation */
.ba-check {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

.ba-check::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #16a34a;
  animation: check-pop 0.6s ease forwards;
  transform: scale(0);
}

.ba-check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #16a34a;
  font-weight: 700;
  animation: check-fade 0.4s ease 0.4s forwards;
  opacity: 0;
}

@keyframes check-pop { to { transform: scale(1); } }
@keyframes check-fade { to { opacity: 1; } }

/* Underline animation */
.ba-underline {
  display: inline-block;
  position: relative;
  font-weight: 600;
  color: #2563eb;
}

.ba-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563eb;
  animation: underline-grow 2s ease-in-out infinite;
}

@keyframes underline-grow {
  0%, 100% { width: 0; }
  50% { width: 100%; }
}

/* Circle progress */
.ba-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #e2e8f0;
  position: relative;
  animation: circle-fill 3s ease-in-out infinite;
}

.ba-circle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #2563eb;
  border-right-color: #2563eb;
  animation: circle-fill 3s ease-in-out infinite;
}

@keyframes circle-fill {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------- AVANT / APRÈS ---------- */
.avant-apres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .avant-apres { grid-template-columns: 1fr; }
}

.avant-apres-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.avant-apres-box h4 {
  margin-bottom: 0.5rem;
}

.avant-apres-box p {
  font-size: 0.85rem;
  color: #64748b;
}

/* Sans animation */
.sans-anim {
  width: 50px;
  height: 50px;
  margin: 1rem auto;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 8px;
  transition: transform 0.2s;
}

/* Avec animation */
.avec-anim {
  width: 50px;
  height: 50px;
  margin: 1rem auto;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 8px;
  animation: avec-anim-move 2s ease-in-out infinite;
}

@keyframes avec-anim-move {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(30px) scale(1.1); }
}

/* ---------- PAGE TRANSITION ---------- */
.page-transition-demo {
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  min-height: 120px;
}

.page-slide {
  padding: 1.5rem;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  animation: page-slide-in 1.5s ease-in-out infinite;
}

@keyframes page-slide-in {
  0% { transform: translateX(100%); opacity: 0; }
  20% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* ---------- PERFORMANCE TABLE ---------- */
.perf-table td:first-child {
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.85rem;
}

.perf-good { color: #16a34a; font-weight: 600; }
.perf-ok { color: #f59e0b; font-weight: 600; }
.perf-bad { color: #dc2626; font-weight: 600; }