/* ============================================================
   AutoLog — Animations CSS
   ============================================================ */

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

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

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

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

@keyframes modalSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.9) translateY(-6px); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

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

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

@keyframes scoreRingDraw {
  from { stroke-dashoffset: 314; }
}

@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--clr-primary-glow); }
  50%       { box-shadow: 0 0 25px var(--clr-primary-glow), 0 0 50px var(--clr-primary-dim); }
}

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

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-surface-2) 25%,
    var(--clr-surface-3) 50%,
    var(--clr-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 120px; border-radius: var(--r-lg); }
.skeleton-circle { border-radius: 50%; }
.skeleton-button { height: 44px; border-radius: var(--r-md); }

/* ── Transitions ── */
.page-transition-enter { animation: pageFadeIn 0.3s ease forwards; }
.page-transition-exit  { animation: toastOut 0.2s ease forwards; }

/* ── Interactive States ── */
.press-effect { transition: transform 0.1s ease; }
.press-effect:active { transform: scale(0.96); }

/* ── Alert pulse for overdue items ── */
.pulse-danger {
  animation: pulse 2s infinite;
  color: var(--clr-danger);
}

.pulse-warning {
  animation: pulse 2.5s infinite;
  color: var(--clr-warning);
}

/* ── Score ring animation ── */
.health-ring-fill {
  animation: scoreRingDraw 1s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ── FAB Float ── */
.fab-float {
  animation: float 3s ease-in-out infinite;
}

/* ── Vehicle thumbnail glow ── */
.vehicle-active-glow {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ── Processing spinner (bg removal) ── */
.processing-dots {
  display: flex;
  gap: 6px;
}
.processing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary);
  animation: bounce 0.8s ease-in-out infinite;
}
.processing-dots span:nth-child(2) { animation-delay: 0.15s; }
.processing-dots span:nth-child(3) { animation-delay: 0.30s; }

/* ── Chart container ── */
.chart-wrap {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  overflow: hidden;
}

.chart-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text-2);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

canvas.chart-canvas { width: 100% !important; height: 180px !important; }

/* ── Swipe hint ── */
.swipe-hint {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  padding: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}