/* ─── SKELETON LOADERS ─── */

    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
    .skeleton {
      background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s ease-in-out infinite;
      border-radius: var(--radius-sm);
    }
    .skeleton-text  { height: 0.9em; margin-bottom: var(--space-2); }
    .skeleton-text:last-child { width: 60%; }
    .skeleton-heading { height: 1.4em; width: 50%; margin-bottom: var(--space-4); }
    .skeleton-card { min-height: 200px; pointer-events: none; }
    @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ─── SCROLL ANIMATIONS ─── */

    .fade-in {
      opacity: 1;
    }
    @supports (animation-timeline: scroll()) {
      .fade-in {
        opacity: 0;
        animation: reveal-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
      }
      @keyframes reveal-fade { to { opacity: 1; } }
    }