/* ============================================================
   ANIMATIONS.CSS — OctopusTMS SDK Documentation
   ============================================================ */

/* ---------- Fade-in on load ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

/* ---------- Page entrance ---------- */
.content {
  animation: fadeInUp 0.4s ease both;
}

.hero {
  animation: fadeInUp 0.45s ease both;
}

.section-card {
  animation: fadeInUp 0.4s ease both;
}

/* Stagger cards on index */
.nav-grid .doc-card:nth-child(1) { animation-delay: 0.05s; }
.nav-grid .doc-card:nth-child(2) { animation-delay: 0.10s; }
.nav-grid .doc-card:nth-child(3) { animation-delay: 0.15s; }
.nav-grid .doc-card:nth-child(4) { animation-delay: 0.20s; }
.nav-grid .doc-card:nth-child(5) { animation-delay: 0.25s; }
.nav-grid .doc-card:nth-child(6) { animation-delay: 0.30s; }
.nav-grid .doc-card:nth-child(7) { animation-delay: 0.35s; }
.nav-grid .doc-card:nth-child(8) { animation-delay: 0.40s; }
.nav-grid .doc-card:nth-child(9) { animation-delay: 0.45s; }
.nav-grid .doc-card:nth-child(10){ animation-delay: 0.50s; }

.nav-grid .doc-card {
  animation: fadeInUp 0.4s ease both;
}

/* ---------- Sidebar links ---------- */
.sidebar-link {
  animation: slideInLeft 0.3s ease both;
}

/* ---------- Table rows ---------- */
tbody tr {
  transition: background var(--transition);
}

/* ---------- Note / Warning boxes entrance ---------- */
.note-box, .warning-box, .tip-box {
  animation: fadeIn 0.35s ease both;
}

/* ---------- Code block hover ---------- */
pre:hover .copy-btn {
  opacity: 1;
}

.copy-btn {
  opacity: 0.6;
  transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

pre:hover .copy-btn { opacity: 1; }

/* ---------- Skeleton loading (search) ---------- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 400px 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 6px;
  height: 1em;
}