/* =============================================================================
   Medal art (medal-art.js): Blender-rendered sculpted medals in the badges engine's
   art slot. Logical properties only, so Arabic mirrors; no blur effects.
   ========================================================================== */
.zma{position:relative;display:grid;place-items:center;width:100%;height:100%;max-width:100%}
.zma-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgb(0 0 0/.28));-webkit-user-select:none;user-select:none}
.zma-xs .zma-img{filter:none}
.zma.is-locked .zma-img,.zma.is-progress .zma-img{opacity:.9}
.zma.is-upcoming .zma-img{opacity:.45}
/* Progress: a thin gold arc around a frosted medal */
.zma-ring{position:absolute;inset:-4%;width:108%;height:108%;transform:rotate(-90deg);pointer-events:none}
.zma-ring circle{fill:none;stroke-width:2.6}
.zma-track{stroke:rgb(140 146 160/.28)}
.zma-fill{stroke:#E3C27A;stroke-linecap:round}
:root[dir="rtl"] .zma-ring{transform:rotate(-90deg) scaleY(-1)}
/* Large medal: tilts toward the finger, and a soft band of light crosses the metal */
.zma-tilt{perspective:900px}
.zma-tilt .zma-img{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.32,.72,0,1);will-change:transform}
.zma-glint{position:absolute;inset:6%;border-radius:50%;pointer-events:none;mix-blend-mode:soft-light;opacity:.0;
  background:linear-gradient(105deg,transparent calc(var(--gx,30%) - 18%),rgb(255 255 255/.75) var(--gx,30%),transparent calc(var(--gx,30%) + 18%));transition:opacity .4s}
.zma-tilt:hover .zma-glint,.zma-tilt:active .zma-glint{opacity:.9}
/* Earn moment: the medal turns toward you once, then a band of light runs across it */
.zma-turn .zma-img{animation:zma-turn 1.6s cubic-bezier(.2,.8,.2,1) both}
.zma-turn .zma-glint{animation:zma-glint 1.6s ease-out both}
@keyframes zma-turn{0%{transform:rotateY(-540deg) scale(.6)}70%{transform:rotateY(8deg) scale(1.03)}100%{transform:rotateY(0) scale(1)}}
@keyframes zma-glint{0%,55%{opacity:0;--gx:-20%}70%{opacity:.95}100%{opacity:0;--gx:120%}}
.zma-fade .zma-img{animation:zma-fade .45s linear both}
@keyframes zma-fade{from{opacity:0}to{opacity:1}}
/* The newest medal as a small pin on the profile picture */
.zkm-avatar{position:relative}
.zkm-avatar .zkm-ring-art{position:absolute;inset:auto;inset-inline-end:-5px;inset-block-end:-5px;z-index:2;width:30px;height:30px;border-radius:0;pointer-events:none}
.zma-pin{display:block;width:30px;height:30px;filter:drop-shadow(0 2px 4px rgb(0 0 0/.35))}
@media (prefers-reduced-motion:reduce){.zma-tilt .zma-img{transition:none;transform:none}.zma-turn .zma-img,.zma-turn .zma-glint{animation:none}.zma-glint{display:none}}
@media (prefers-reduced-transparency:reduce){.zma-glint{display:none}}
html.zk-reduce-transparency .zma-glint{display:none}