/* Progressive enhancement: no content is hidden while waiting for JavaScript. */
.reading-progress {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}
.reading-progress[hidden] { display: none; }
.reading-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Explicitly preserve native hidden behavior when cards or controls use grid/flex. */
.media-card[hidden], .media-filters[hidden], [data-media-status][hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .motion-enter {
    animation: rise-into-view 760ms cubic-bezier(.2, .7, .2, 1) var(--motion-delay, 0ms) both;
  }
  .motion-enter:focus-within { animation: none; }
  .shift, .day, .plate {
    transition: translate 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  }
  .btn, .mh-reg, .chapter-nav a, .media-filters button, .back-to-top {
    transition: background 180ms, color 180ms, border-color 180ms, translate 220ms ease;
  }
  summary.s::after { transition: transform 220ms ease; }

  @keyframes rise-into-view {
    from { opacity: .15; transform: translate3d(0, 26px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @media (hover: hover) and (pointer: fine) {
    .shift:hover, .day:hover, .plate:hover {
      translate: 0 -4px;
      border-color: #b5c5bc;
      box-shadow: 0 16px 36px rgba(18, 61, 70, .07);
    }
    .btn:hover, .mh-reg:hover, .media-filters button:hover, .back-to-top:hover { translate: 0 -2px; }
  }
  @media (max-width: 799px) {
    .motion-enter { animation-duration: 620ms; }
    @keyframes rise-into-view {
      from { opacity: .2; transform: translate3d(0, 18px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .motion-enter { opacity: 1; transform: none; animation: none; }
}
@media print {
  .reading-progress, .media-filters, [data-media-status], .chapter-nav, .back-to-top { display: none !important; }
  .media-card[hidden] { display: block !important; }
  .motion-enter { animation: none !important; opacity: 1 !important; transform: none !important; }
  .shift, .day, .plate, .btn, .mh-reg { translate: none !important; box-shadow: none; }
}