.progressive-picture { display: block; position: relative; width: 100%; overflow: hidden; border-radius: var(--image-radius, 0); isolation: isolate; }
.progressive-picture > img { display: block; width: 100%; transition: opacity 700ms ease, transform 500ms cubic-bezier(.22,.68,0,1); }
.progressive-picture::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--surface) var(--picture-preview) center / cover no-repeat; opacity: 0; transition: opacity 700ms ease; }
.has-image-reveal .progressive-picture[data-image-preview]:not(.is-ready) > img { opacity: 0; }
.has-image-reveal .progressive-picture[data-image-preview]:not(.is-ready)::after { opacity: 1; }
.project-image > .progressive-picture { height: 100%; }
.project-image > .progressive-picture > img { height: 100%; object-fit: cover; }
.study-image > .progressive-picture { border-radius: 0; }
.study-image > .progressive-picture::after { background-size: contain; background-color: transparent; }
@media (prefers-reduced-motion: reduce) { .progressive-picture > img, .progressive-picture::after { transition: none; } }
[data-motion=off] .progressive-picture > img, [data-motion=off] .progressive-picture::after { transition: none; }