/* Bytes & Miles — shared motion layer (scroll-reveal + reading-progress bar)
   Loaded site-wide. Hidden state is gated on html.motion (added synchronously by
   motion.js) so content never flashes. Reveal uses keyframe animations, NOT
   transitions, so it can't clash with existing hover transitions on cards.

   Reveal unit = every direct child of the content wrapper (.post / .page / .content),
   EXCEPT card containers (.post-list / .card-grid) whose cards are revealed
   individually instead. Cards fade only (no transform) so their hover lift survives. */

html.motion :is(.post, .page, .content) > *:not(.post-list):not(.card-grid),
html.motion .post-card,
html.motion .card {
  opacity: 0;
}

html.motion :is(.post, .page, .content) > .is-visible:not(.post-list):not(.card-grid) {
  animation: bm-rise 0.6s ease forwards;
}

html.motion .post-card.is-visible,
html.motion .card.is-visible {
  animation: bm-fade 0.55s ease forwards;
}

@keyframes bm-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Soft page-load fade */
@keyframes bm-pagein { from { opacity: 0; } to { opacity: 1; } }
html.motion body { animation: bm-pagein 0.35s ease both; }

/* Animated underline on plain prose links (skips styled/classed links) */
html.motion :is(.post, .content) a:not([class]) {
  text-decoration: none;
  background-image: linear-gradient(#16a34a, #16a34a);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.25s ease;
}
html.motion :is(.post, .content) a:not([class]):hover {
  background-size: 100% 1.5px;
}

/* Animated underline on listing card titles, grows on card hover */
html.motion .post-card-title {
  display: inline-block;
  background-image: linear-gradient(#16a34a, #16a34a);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.25s ease, color 0.15s ease;
}
html.motion .post-card:hover .post-card-title {
  background-size: 100% 1.5px;
}

/* Reading-progress bar (injected by motion.js on articles / pages with data-progress) */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #16a34a;
  z-index: 1000;
  transition: width 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
  html.motion :is(.post, .page, .content) > *,
  html.motion .post-card,
  html.motion .card { opacity: 1 !important; animation: none !important; }
  .progress-bar { display: none; }
}