/* =============================================
   CourierApp – animations.css
   Keyframes, AOS overrides, scroll effects
   ============================================= */

/* ---- Float (hero card) ---- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(-2deg); }
}
.anim-float { animation: float 5s ease-in-out infinite; }

/* ---- Pulse ring (CTA / highlight) ---- */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pulse-ring {
  position: relative; display: inline-flex;
}
.pulse-ring::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: inherit; border: 2px solid var(--accent);
  animation: pulse-ring 2s ease-out infinite;
}

/* ---- Ticker scroll ---- */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Gradient shift (hero bg) ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.anim-gradient {
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
}

/* ---- Counter bounce ---- */
@keyframes countBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.count-bounce { animation: countBounce 0.4s ease; }

/* ---- Fade up (for manual triggers) ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fadeUp 0.6s ease forwards; }

/* ---- Slide in left ---- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-slide-left { animation: slideInLeft 0.6s ease forwards; }

/* ---- Slide in right ---- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-slide-right { animation: slideInRight 0.6s ease forwards; }

/* ---- Zoom in ---- */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-zoom-in { animation: zoomIn 0.5s ease forwards; }

/* ---- Shimmer (loading skeleton) ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ---- AOS custom easing override ---- */
[data-aos] { transition-timing-function: cubic-bezier(.4,0,.2,1) !important; }

/* Stagger helper classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* ---- Dashboard mockup ---- */
.mockup-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(12,20,69,.35);
  overflow: hidden;
  transform-origin: center;
}
.mockup-bar {
  background: var(--brand-900);
  padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.mockup-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.mockup-content {
  padding: 1rem;
  background: #f8fafc;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.mockup-row {
  background: white; border-radius: 8px; padding: 0.6rem 0.75rem;
  display: flex; align-items: center; gap: 0.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mockup-row-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: white; flex-shrink: 0;
}
.mockup-row-text { flex: 1; }
.mockup-row-line { height: 8px; border-radius: 99px; background: var(--gray-200); }
.mockup-row-line.short { width: 60%; }
.mockup-row-line.vshort { width: 35%; margin-top: 4px; }
.mockup-badge {
  font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 99px;
}