/*
 * 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.
 */

/*
 * One fade-in for a grid of cards, played once when the page opens. Used by the
 * banlist and by the spoiler gallery.
 *
 * It replaces a per-image dissolve, which reads as loading while an image really
 * is loading but misfires when the images are already in the browser cache: the
 * whole grid then dissolves at once a beat after Turbo has swapped in a page
 * that is already painted, and it looks like a second, pointless load. Animating
 * the container keeps the entrance and gives an image that arrives late no
 * animation at all.
 *
 * The `data-turbo-preview` rule is what stops it from playing TWICE. Turbo shows
 * the cached snapshot of a page you have already visited before replacing it
 * with the response: the snapshot carries this class too, so the entrance ran on
 * the preview and again on the real render — measured 284ms apart. Nothing is
 * entering during a preview, so it must not animate.
 *
 * Not expressible in Tailwind: v4 ships pulse/spin/bounce/ping and no fade, and
 * a one-shot entrance needs keyframes rather than a transition (there is no
 * state change to transition from).
 */
@media (prefers-reduced-motion: no-preference) {
  .card-grid-enter {
    animation: card-grid-enter 400ms ease-out both;
  }
}

/*
 * Two ways the same visit is told not to animate: while Turbo is showing the
 * snapshot, and — set by helpers/grid_entrance.js — for the real render
 * that follows it, because the reader was already looking at the page and the
 * entrance would sink it to black and bring it back (measured: opacity 1 for
 * 250ms, then 0, then 400ms of fade).
 */
html[data-turbo-preview] .card-grid-enter,
html.turbo-preview-visit .card-grid-enter {
  animation: none;
}

@keyframes card-grid-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}