/*
* 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 ![]()
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]):not(.pswp__img) {
opacity: 0;
}
/* Cached images: appear instantly, no animation */
img[data-loaded=""]:not(.pswp__img) {
opacity: 1;
}
/* Network-loaded images: fade in over 200ms */
img[data-loaded="fade"]:not(.pswp__img) {
animation: img-fade-in 200ms ease both;
}
/* --------------------------------------------------------------------------
* Gift box: lightbox deep links hide the page until artwork is shown
*
* The inline