/* ================================================
   TOMAT CHERRY — Micro-Animations & Transitions
   ================================================ */

/* ---- Keyframe Definitions ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slideInBottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

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

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(171,78,68,0); }
  50%       { box-shadow: 0 0 0 8px rgba(171,78,68,0); }
}

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

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

@keyframes ping {
  0%    { transform: scale(1); opacity: 0.85; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes bounce-in {
  0%   { transform: scale(0.5);  opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes progress-fill {
  from { width: 0; }
}

@keyframes wave-appear {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

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

@keyframes logo-breathe {
  0%, 100% { box-shadow: 0 0 16px rgba(171,78,68,0.3); }
  50%       { box-shadow: 0 0 32px rgba(171,78,68,0.6), 0 0 64px rgba(161,56,38,0.2); }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateX(48px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-exit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(48px) scale(0.95); }
}

/* ---- Animation Classes ---- */
.animate-fade-in      { animation: fadeIn 350ms ease forwards; }
.animate-fade-in-up   { animation: fadeInUp 400ms cubic-bezier(0.4,0,0.2,1) forwards; }
.animate-fade-in-down { animation: fadeInDown 350ms ease forwards; }
.animate-fade-in-left { animation: fadeInLeft 350ms ease forwards; }
.animate-scale-in     { animation: scaleIn 350ms cubic-bezier(0.34,1.56,0.64,1) forwards; }
.animate-bounce-in    { animation: bounce-in 450ms ease forwards; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-spin         { animation: spin 1s linear infinite; }
.animate-pulse        { animation: pulse-glow 2s ease infinite; }

/* ---- Staggered Children ---- */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 400ms cubic-bezier(0.4,0,0.2,1) forwards;
}

.stagger-children > *:nth-child(1)  { animation-delay: 50ms; }
.stagger-children > *:nth-child(2)  { animation-delay: 100ms; }
.stagger-children > *:nth-child(3)  { animation-delay: 150ms; }
.stagger-children > *:nth-child(4)  { animation-delay: 200ms; }
.stagger-children > *:nth-child(5)  { animation-delay: 250ms; }
.stagger-children > *:nth-child(6)  { animation-delay: 300ms; }
.stagger-children > *:nth-child(7)  { animation-delay: 350ms; }
.stagger-children > *:nth-child(8)  { animation-delay: 400ms; }

/* ---- Page Transitions ---- */
.page-enter {
  animation: fadeInUp 350ms cubic-bezier(0.4,0,0.2,1) forwards;
}

.page-exit {
  animation: slideOutBottom 250ms ease forwards;
}

/* ---- Login Screen Animations ---- */
.login-card-enter {
  animation: scaleIn 500ms cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.login-logo-breathe {
  animation: logo-breathe 3s ease-in-out infinite;
}

/* ---- Floating Particles ---- */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: var(--opacity, 0.15);
}

/* ---- Toast Animations ---- */
.toast.entering { animation: toast-enter 350ms cubic-bezier(0.34,1.56,0.64,1) forwards; }
.toast.exiting  { animation: toast-exit 250ms ease forwards; }

/* ---- Modal Animations ---- */
.modal-overlay.entering .modal { animation: scaleIn 300ms cubic-bezier(0.34,1.56,0.64,1) forwards; }
.modal-overlay.exiting  .modal { animation: slideOutBottom 200ms ease forwards; }

/* ---- Sidebar Animations ---- */
#sidebar { transition: width 350ms cubic-bezier(0.4,0,0.2,1), transform 350ms cubic-bezier(0.4,0,0.2,1); }

/* ---- Ripple Effect ---- */
.ripple-container { position: relative; overflow: hidden; }

.ripple-effect {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  pointer-events: none;
}

/* ---- Number Counter Animation ---- */
.count-animate {
  animation: count-up 600ms cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ---- Progress Bar Animation ---- */
.progress-fill {
  animation: progress-fill 800ms cubic-bezier(0.4,0,0.2,1) forwards;
  transform-origin: left;
}

/* ---- Chart Bar Animation ---- */
.chart-bar {
  transform-origin: bottom;
  animation: wave-appear 600ms cubic-bezier(0.4,0,0.2,1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* ---- Notification Ping ---- */
.ping {
  position: relative;
}

.ping::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}

/* ---- Hover Lift ---- */
.hover-lift { transition: transform var(--ease-base), box-shadow var(--ease-base); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- Hover Scale ---- */
.hover-scale { transition: transform var(--ease-bounce); }
.hover-scale:hover { transform: scale(1.03); }

/* ---- Icon Spin on Hover ---- */
.icon-spin-hover:hover svg { animation: spin 600ms linear; }

/* ---- Shimmer Text ---- */
.shimmer-text {
  background: linear-gradient(90deg, var(--text-primary) 0%, var(--red-300) 50%, var(--text-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: skeleton-shimmer 3s linear infinite;
}

/* ---- Card Appear Delay Utilities ---- */
.delay-100 { animation-delay: 100ms !important; }
.delay-200 { animation-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; }
.delay-400 { animation-delay: 400ms !important; }
.delay-500 { animation-delay: 500ms !important; }

/* ---- Reduce Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}