.depth-card{position:relative;isolation:isolate;transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(var(--card-lift,0px));transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;transform-style:preserve-3d}
.depth-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,50%),rgba(182,225,195,.12),transparent 65%);opacity:0;transition:opacity .35s ease;z-index:1}
.depth-card.depth-active{border-color:rgba(186,218,192,.38);box-shadow:0 18px 36px -22px rgba(0,0,0,.65)}
.depth-card.depth-active::after{opacity:1}.depth-card .note-icon{transform:translateZ(24px);box-shadow:0 7px 16px -10px #000}.depth-card .note-heading{transform:translateZ(12px)}
.motion-off .depth-card{transform:none!important;box-shadow:none}.motion-off .depth-card::after{opacity:0}.motion-off .depth-card .note-icon,.motion-off .depth-card .note-heading{transform:none}
@media(prefers-reduced-motion:reduce),(hover:none){.depth-card,.depth-card .note-icon,.depth-card .note-heading{transform:none!important;transition:none}.depth-card::after{display:none}}

/* Shared depth across projects, publications, field notes and photographs. */
.depth-card.depth-active{--card-lift:-3px}
.contact-action.depth-card{border-radius:12px}
.neighbor-photos figure.depth-card,.broadcast-case figure.depth-card,.activity-photo.depth-card{border-radius:12px}
.depth-card:has(details[open]){transform:none;box-shadow:none}
.depth-card:has(details[open])::after{opacity:0}
.depth-card:focus-within{border-color:rgba(186,218,192,.45)}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
 .depth-card.depth-enter{animation:depth-arrive .7s cubic-bezier(.2,.7,.2,1) both}
 @keyframes depth-arrive{from{transform:perspective(1100px) translateY(18px) rotateX(3deg)}to{transform:perspective(1100px) translateY(0) rotateX(0)}}
}
.motion-off .depth-card{animation:none!important}

/* Keep perspective projections inside the page without horizontal scrolling. */
html,body{overflow-x:clip}