/* ============================================================
   animations.css — reveals, transitions, motion
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* section reveal on view switch */
.content.switching { opacity: 0; }
.content { transition: opacity var(--fast) var(--ease); }

.hero { animation: fadeUp var(--slow) var(--ease-out) both; }
.section { animation: fadeUp var(--slow) var(--ease-out) both; }
.section:nth-child(1) { animation-delay: .02s; }
.section:nth-child(2) { animation-delay: .05s; }
.section:nth-child(3) { animation-delay: .08s; }
.section:nth-child(4) { animation-delay: .11s; }
.section:nth-child(5) { animation-delay: .13s; }
.section:nth-child(n+6) { animation-delay: .15s; }

/* nav item stagger */
.nav-item { animation: fadeUp var(--med) var(--ease-out) both; }

/* details open animation */
.collapsible[open] .collapsible-body { animation: fadeUp var(--med) var(--ease-out); }

/* copy flash */
.copy-btn.copied svg { animation: pop var(--med) var(--ease-out); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* print */
@media print {
  .topbar, .sidebar, .toc, #scrim, .modal, .toast, .copy-btn, .hero-actions,
  .back-to-top, .reading-progress, .fw-nav { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .main { padding: 0; }
  .collapsible[open] .collapsible-body, .collapsible-body { display: block !important; }
  .collapsible > summary { pointer-events: none; }
  body { background: #fff; color: #000; font-size: 12px; }
  .codeblock, .card, .callout, .section { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}