/* =============================================
   ANIMATIONS.CSS — Micro-interactions & Transitions
   ============================================= */

/* ── Keyframes ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow { 0%,100% { box-shadow: 0 0 20px rgba(0,200,83,.2); } 50% { box-shadow: 0 0 40px rgba(0,200,83,.4); } }
@keyframes slideInBottom { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes checkmark { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes bounceIn { 0% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* Staggered children */
.stagger-children > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: .05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: .1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: .15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: .2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: .25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: .3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: .35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: .4s; }
.stagger-children.visible > *:nth-child(9) { transition-delay: .45s; }
.stagger-children.visible > *:nth-child(10) { transition-delay: .5s; }
.stagger-children.visible > *:nth-child(11) { transition-delay: .55s; }
.stagger-children.visible > *:nth-child(12) { transition-delay: .6s; }
.stagger-children.visible > *:nth-child(13) { transition-delay: .65s; }
.stagger-children.visible > *:nth-child(14) { transition-delay: .7s; }
.stagger-children.visible > *:nth-child(15) { transition-delay: .75s; }
.stagger-children.visible > *:nth-child(16) { transition-delay: .8s; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }

/* ── Page Transition ── */
.page-transition { animation: fadeUp .5s var(--ease) both; }

/* ── Loading Spinner ── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%; animation: spin .6s linear infinite;
}
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* ── Ripple Effect ── */
.ripple {
  position: relative; overflow: hidden;
}
.ripple::after {
  content: ''; position: absolute;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(0,0,0,.06);
  transform: scale(0); opacity: 1;
  pointer-events: none;
}
.ripple:active::after { animation: ripple .5s linear; }

/* ── Toast Animation ── */
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--r-md);
  background: var(--dark); color: #fff;
  font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideInBottom .35s var(--ease-spring) both;
}
.toast.success { background: var(--primary); }
.toast.error { background: var(--error); }
.toast.hide { animation: fadeUp .3s var(--ease) reverse both; }

/* ── Float CTA ── */
.float-cta {
  position: fixed; bottom: calc(var(--nav-h) + 16px);
  left: 20px; right: 20px; z-index: 250;
  animation: slideUp .4s var(--ease-spring) both;
}
@media(min-width:768px) {
  .float-cta { left: auto; right: 40px; bottom: 40px; max-width: 360px; }
}
.float-cta .btn { width: 100%; box-shadow: var(--shadow-xl); }

/* ── Bottom Sheet ── */
.bottom-sheet {
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none; visibility: hidden;
}
.bottom-sheet.open { pointer-events: auto; visibility: visible; }
.bottom-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35); opacity: 0;
  transition: opacity .3s var(--ease);
}
.bottom-sheet.open .bottom-sheet-backdrop { opacity: 1; }
.bottom-sheet-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 20px; max-height: 85vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .35s var(--ease-spring);
}
.bottom-sheet.open .bottom-sheet-panel { transform: translateY(0); }
.bottom-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 16px;
}

/* ── Hover glow for cards ── */
.glow-hover {
  position: relative;
}
.glow-hover::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; background: linear-gradient(135deg, var(--primary-glow), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
  z-index: -1;
}
.glow-hover:hover::before { opacity: 1; }

/* ── Counter animation ── */
.count-animate { animation: countUp .5s var(--ease) both; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .stagger-children > * { opacity: 1; transform: none; }
}