/* ------------------------------------------------------------------
   Branded image fade-in + purple "T" placeholder.

   Images fade in smoothly once loaded instead of popping in. While an
   image is still loading, its container shows a purple TattooIt "T".

   The opacity:0 rule is gated behind `html.js-img-fade` (added by
   image-fade.js) so that if JavaScript is unavailable the images still
   display normally rather than staying invisible.
   ------------------------------------------------------------------ */

/* Fade is driven by an animation (not a `transition`) so it never overrides an
   image's own `transition` property — e.g. hover zoom/scale effects keep working. */
html.js-img-fade .img-fade {
    opacity: 0;
}

html.js-img-fade .img-fade.loaded {
    animation: imgFadeIn .5s ease forwards;
}

/* Never leave a genuinely broken image permanently hidden. */
html.js-img-fade .img-fade.load-error {
    opacity: 1;
    animation: none;
}

@keyframes imgFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Purple "T" placeholder shown behind a content image while it loads. */
.media-fade {
    position: relative;
    background-color: #3b0764;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='53' text-anchor='middle' dominant-baseline='central' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='60' fill='white'%3ET%3C/text%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 42%, #7c3aed 0%, #3b0764 72%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 44%, cover;
}

/* Once the image has loaded, drop the placeholder so it never shows
   through transparent areas or letterboxed (object-fit: contain) bars. */
.media-fade.img-ready {
    background: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js-img-fade .img-fade,
    html.js-img-fade .img-fade.loaded {
        opacity: 1;
        animation: none;
    }
}