@layer components{.ap-app-image{--ap-app-image-size:100%;--ap-app-image-inset:var(--ap-space-0);isolation:isolate;inline-size:var(--ap-app-image-size);background:var(--ap-color-surface-muted);max-inline-size:100%;display:block;position:relative;overflow:hidden}.ap-app-image[data-size=xs]{--ap-app-image-size:var(--ap-size-image-xs)}.ap-app-image[data-size=sm]{--ap-app-image-size:var(--ap-size-image-sm)}.ap-app-image[data-size=md]{--ap-app-image-size:var(--ap-size-image-md)}.ap-app-image[data-size=lg]{--ap-app-image-size:var(--ap-size-image-lg)}.ap-app-image[data-size=xl]{--ap-app-image-size:var(--ap-size-image-xl)}.ap-app-image[data-aspect=square]{aspect-ratio:1}.ap-app-image[data-aspect=portrait]{aspect-ratio:3/4}.ap-app-image[data-aspect=landscape]{aspect-ratio:3/2}.ap-app-image[data-aspect=wide]{aspect-ratio:16/9}.ap-app-image[data-aspect=auto]{aspect-ratio:auto}.ap-app-image[data-shape=soft]{border-radius:var(--ap-radius-sm)}.ap-app-image[data-shape=rounded]{border-radius:var(--ap-radius-lg)}.ap-app-image[data-shape=circle]{border-radius:var(--ap-radius-round)}.ap-app-image[data-frame=subtle]{border:var(--ap-border-subtle);box-shadow:var(--ap-shadow-card)}.ap-app-image:is([data-frame=paper],[data-frame=parchment],[data-frame=botanical]){--ap-app-image-inset:var(--ap-space-2);padding:var(--ap-app-image-inset);box-shadow:var(--ap-shadow-card)}.ap-app-image[data-frame=paper]{background:var(--ap-color-surface);border:var(--ap-border-subtle)}.ap-app-image[data-frame=parchment]{background:var(--ap-color-surface-muted);border:var(--ap-border-subtle)}.ap-app-image[data-frame=botanical]{--ap-app-image-inset:var(--ap-space-3);background:var(--ap-color-surface);border:calc(var(--ap-border-width) * 2) solid var(--ap-color-heading);box-shadow:var(--ap-shadow-card)}.ap-app-image__picture,.ap-app-image__placeholder,.ap-app-image__error{inset:var(--ap-app-image-inset);border-radius:inherit;position:absolute;overflow:hidden}.ap-app-image__picture,.ap-app-image__placeholder,.ap-app-image__media{display:block}.ap-app-image__placeholder,.ap-app-image__media{block-size:100%;inline-size:100%}.ap-app-image__placeholder{z-index:0;object-fit:cover;filter:blur(var(--ap-space-3)) saturate(.78);opacity:1;transition:opacity var(--ap-duration-standard) var(--ap-ease-standard);transform:scale(1.12)}.ap-app-image__media{opacity:0;transition:filter var(--ap-duration-standard) var(--ap-ease-standard), opacity var(--ap-duration-standard) var(--ap-ease-standard), transform var(--ap-duration-standard) var(--ap-ease-standard);transform:scale(1.025)}.ap-app-image[data-fit=contain] .ap-app-image__media{object-fit:contain}.ap-app-image[data-fit=cover] .ap-app-image__media{object-fit:cover}.ap-app-image[data-state=loaded] .ap-app-image__media{opacity:1;transform:none}.ap-app-image[data-state=loaded] .ap-app-image__placeholder{opacity:0}.ap-app-image[data-motion=none] .ap-app-image__placeholder,.ap-app-image[data-motion=none] .ap-app-image__media{transition:none}.ap-app-image[data-tone=muted] .ap-app-image__media{filter:saturate(.72)contrast(.96)}.ap-app-image[data-tone=warm] .ap-app-image__media{filter:sepia(.12)saturate(1.08)contrast(.98)}.ap-app-image[data-tone=monochrome] .ap-app-image__media{filter:grayscale()contrast(.92)}.ap-app-image:is([data-motion=hover-lift],[data-motion=hover-zoom]){transition:box-shadow var(--ap-duration-standard) var(--ap-ease-standard), transform var(--ap-duration-standard) var(--ap-ease-standard)}.ap-app-image__error{z-index:3;color:var(--ap-color-heading);background:var(--ap-color-surface-muted);place-items:center;display:grid}.ap-app-image__error svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;inline-size:34%}}@media (hover:hover){@layer components{.ap-app-image[data-motion=hover-lift]:hover{box-shadow:var(--ap-shadow-card);transform:translateY(calc(var(--ap-space-2) * -1))}.ap-app-image[data-motion=hover-zoom]:hover .ap-app-image__media{transform:scale(1.055)}}}@media (prefers-reduced-motion:reduce){@layer components{.ap-app-image,.ap-app-image__media,.ap-app-image__placeholder{transition-duration:var(--ap-duration-instant)}.ap-app-image[data-motion=hover-lift]:hover,.ap-app-image[data-motion=hover-zoom]:hover .ap-app-image__media{transform:none}}}
