/* Image depth: a stable hit area, one gently tilted photo surface.
   Content stays visible with JavaScript off, on touch, and with reduced motion. */
[data-image-card]{position:relative;overflow:visible;perspective:900px;isolation:isolate}
.image-card-surface{position:absolute;inset:0;overflow:hidden;background:var(--ink,#333333);transform-origin:center;transform:rotateX(0deg) rotateY(0deg) scale(1);transition:transform .22s ease-out,box-shadow .22s ease-out}
.image-card-surface::before{content:"";position:absolute;inset:0;border:1px solid var(--lime,#CCFF00);z-index:4;pointer-events:none;opacity:0;transition:opacity .22s ease-out}
.image-card-surface::after{z-index:1}
.card-shine{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(var(--card-light-angle,135deg),rgba(242,242,242,.16),rgba(242,242,242,.035) 42%,transparent 75%);transition:opacity .22s ease-out}
.image-card-surface>img{display:block;width:100%;height:100%;object-fit:cover}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 [data-image-card].is-hover-active{z-index:2}
 [data-image-card].is-hover-active .image-card-surface{transform:rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(1.025);box-shadow:0 22px 38px -24px rgba(0,0,0,.48)}
 [data-image-card].is-hover-active .image-card-surface::before{opacity:.7}
 [data-image-card].is-hover-active .card-shine{opacity:.7}
}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
 .image-card-surface{transform:none!important;transition:none}
 .card-shine,.image-card-surface::before{display:none}
}

@media print{.image-card-surface{transform:none!important;box-shadow:none!important}.card-shine,.image-card-surface::before{display:none}}