/* Versioned asset. Decorative depth stays inside the existing artwork frame. */
.art { isolation: isolate; }
.art > img { position: relative; z-index: 1; }
.art::after { z-index: 3; }
.art figcaption { z-index: 4; }
.art-depth { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.art-layer { position: absolute; display: block; transform-origin: center; }
.art-wash { width: 65%; height: 80%; left: -28%; top: -22%; background: radial-gradient(ellipse, #2348f56b 0%, #2348f526 40%, transparent 70%); border-radius: 43% 57% 70% 30%; }
.art-splash { width: 36%; height: 58%; right: -18%; top: 18%; border-radius: 70% 30% 37% 63%; background: radial-gradient(ellipse at 35% 40%, #7895ff80, #2348f550 45%, transparent 72%); }
.art-orbit { width: 30%; aspect-ratio: 1; right: -13%; top: -20%; border: 1px solid #9baaff65; border-radius: 50%; box-shadow: 0 0 0 18px #2348f510, 0 0 0 19px #829aff20; }
.art-stroke { width: 22%; height: 3px; left: -5%; top: 57%; background: linear-gradient(90deg, transparent, #647fffbb, transparent); }
.art-particles { inset: 0; background: radial-gradient(circle at 9% 29%, #c0cbff99 0 1px, transparent 2px), radial-gradient(circle at 88% 45%, #c0cbff88 0 1.5px, transparent 2.5px), radial-gradient(circle at 18% 64%, #879eff99 0 1px, transparent 2px), radial-gradient(circle at 78% 14%, #c0cbff88 0 1px, transparent 2px); }
.art.depth-active .art-layer { will-change: transform, opacity; }
.art.depth-enter .art-depth { animation: depth-reveal 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes depth-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .art-orbit { width: 50%; right: -25%; top: -12%; } .art-splash { width: 55%; right: -30%; } .art-wash { width: 90%; left: -50%; } }
@media (prefers-reduced-motion: reduce) { .art-layer { transform: none !important; will-change: auto !important; } .art.depth-enter .art-depth { animation: none; } }