/* nellamugisha.com, motion (28 October 2026). Every rule is decoration: the page is complete without it.
   All of it sits behind prefers-reduced-motion: no-preference, and browsers without a feature skip that
   rule (view transitions, scroll-driven animation). Keyframes are named nm-* so they collide with nothing. */

@media (prefers-reduced-motion: no-preference) {
  /* Page to page: the old page fades out as the new one rises in. The header and footer keep their
     names, so they stay put instead of fading with the content. Same-origin navigations only. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: nm-header; }
  .site-footer { view-transition-name: nm-footer; }
  ::view-transition-old(root) { animation: nm-out .18s ease-in both; }
  ::view-transition-new(root) { animation: nm-in .32s cubic-bezier(.2, .8, .2, 1) both; }

  /* The hero arrives in order: eyebrow, title, the French line, lede, buttons, then the illustration. */
  .hero .wrap > div:first-child > * { animation: nm-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .06s; }
  .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .12s; }
  .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .18s; }
  .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .24s; }
  .hero-illustration { animation: nm-drop .6s cubic-bezier(.2, 1.3, .4, 1) .2s both; }

  /* Cards and timeline rows lift toward the pointer, the way the buttons already do. */
  .card, .nm-cta-card { transition: transform .18s, box-shadow .18s; }
  .card:hover, .nm-cta-card:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--off) + 3px) calc(var(--off) + 3px) 0 var(--shadow); }
  .timeline li { transition: background-color .2s; }
  .timeline li:hover { background-color: color-mix(in srgb, var(--red) 7%, transparent); }

  /* Links in running text draw their underline from the left. */
  .prose a, .entry p a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
    transition: background-size .25s ease;
  }
  .prose a:hover, .entry p a:hover { background-size: 0 1.5px; background-position: 100% 100%; }

  /* Sections that reveal also stagger their first few children. */
  html.nm-reveal-ready [data-nm-reveal] :is(.cards, ul) > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
  html.nm-reveal-ready [data-nm-reveal].is-in :is(.cards, ul) > * { opacity: 1; transform: none; }
  html.nm-reveal-ready [data-nm-reveal].is-in :is(.cards, ul) > :nth-child(2) { transition-delay: .08s; }
  html.nm-reveal-ready [data-nm-reveal].is-in :is(.cards, ul) > :nth-child(3) { transition-delay: .16s; }
  html.nm-reveal-ready [data-nm-reveal].is-in :is(.cards, ul) > :nth-child(n+4) { transition-delay: .22s; }

  /* A red reading bar under the header on articles, driven by scrolling itself (no script). */
  @supports (animation-timeline: scroll()) {
    .post::before {
      content: ""; position: fixed; inset: 0 0 auto; height: 4px; z-index: 60;
      background: var(--red); transform-origin: 0 50%;
      animation: nm-grow linear both; animation-timeline: scroll(root);
    }
  }

  /* The heart in the footer credit beats twice, rests, and repeats; it stops while hovered. */
  .nm-heart { animation: nm-beat 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
  .nm-credit a:hover .nm-heart { animation-play-state: paused; transform: scale(1.25); }
}

@keyframes nm-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes nm-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes nm-drop { from { opacity: 0; transform: translateY(-24px) rotate(-3deg); } }
@keyframes nm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nm-beat { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.22); } 20% { transform: scale(.96); } }