/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* --------------------------------------------------------------------------
 * Global image fade-in
 *
 * Every <img> starts invisible and fades in when loaded. A MutationObserver
 * in application.js marks images with [data-loaded] as they complete.
 * Cached images are marked synchronously so there's no visible flash.
 *
 * Uses a CSS animation instead of a transition so it composes cleanly with
 * Tailwind's transition-transform utilities (hover scale effects on cards).
 * -------------------------------------------------------------------------- */
@keyframes img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

img:not([data-loaded]) {
  opacity: 0;
}

/* Cached images: appear instantly, no animation */
img[data-loaded=""] {
  opacity: 1;
}

/* Network-loaded images: fade in over 200ms */
img[data-loaded="fade"] {
  animation: img-fade-in 200ms ease both;
}

/* --------------------------------------------------------------------------
 * Shared UI patterns
 * -------------------------------------------------------------------------- */

/* Back navigation hover: all detail pages use this */
.back-nav-link:hover,
.term-back-link:hover { color: #000; }

/* Pagination link hover */
.pagination-link:hover,
.collection-page-link:hover { border-color: #000 !important; color: #000 !important; }