/* Cape information opens as a focused in-page GUI instead of disappearing below the full archive. */
body.cape-detail-open{overflow:hidden}
.cape-detail[data-cape-modal="1"]{position:fixed;z-index:1200;inset:0;margin:0!important;padding:clamp(16px,3vw,34px);overflow:hidden;display:grid;place-items:center;background:rgba(1,6,10,.94);scroll-margin:0;overscroll-behavior:contain}
.cape-detail[data-cape-modal="1"][hidden]{display:none!important}
.cape-detail[data-cape-modal="1"] .cape-detail-card{width:min(1080px,100%);max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;border-color:rgba(var(--rarity-rgb),.26);box-shadow:0 28px 74px rgba(0,0,0,.58),0 0 34px rgba(var(--rarity-rgb),.055)}
.cape-detail[data-cape-modal="1"] .cape-detail-close{position:sticky;float:right;top:12px;right:12px;background:#071219}
.cape-detail[data-cape-modal="1"] .cape-detail-preview-switch{backdrop-filter:none!important;background:rgba(3,12,18,.96)!important}
.cape-directory-card.cape-selected{border-color:rgba(var(--rarity-rgb),.52)!important;box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 0 2px rgba(var(--rarity-rgb),.1)!important}
.cape-directory-card::after{transition:opacity .2s ease}
.cape-directory-card[aria-expanded="true"]::after{opacity:1!important}

/* A full-screen backdrop blur over dozens of animated cape cards can create a very large
   compositor/GPU workload. Pause the archive while the modal is open and render an opaque
   overlay instead. The modal itself remains interactive and its 360 preview can still run. */
body.cape-detail-open .cape-release-banner,
body.cape-detail-open .cape-release-banner:before,
body.cape-detail-open .cape-release-banner:after,
body.cape-detail-open .cape-directory-card,
body.cape-detail-open .cape-directory-card .texture-art:before,
body.cape-detail-open .cape-directory-card .directory-cape-face:before,
body.cape-detail-open .cape-rarity-explain{animation:none!important}
body.cape-detail-open .cape-directory-card:not(.cape-selected) .directory-cape-face{transform:none!important}
body.cape-detail-open .cape-directory-card:not(.cape-selected) .directory-cape-face img{filter:none!important}

@media(max-width:720px){.cape-detail[data-cape-modal="1"]{padding:8px;align-items:end}.cape-detail[data-cape-modal="1"] .cape-detail-card{max-height:92vh;border-radius:16px 16px 8px 8px}.cape-detail[data-cape-modal="1"] .cape-detail-top{grid-template-columns:1fr!important}.cape-detail[data-cape-modal="1"] .cape-wearer-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.cape-detail[data-cape-modal="1"]{scroll-behavior:auto}.cape-detail[data-cape-modal="1"] *{animation:none!important;transition:none!important}}


/* Keep cape details lightweight on large archives. The fixed modal is the only
   surface that needs to render while it is open. */
body.cape-detail-open [data-capes-grid]{visibility:hidden!important;pointer-events:none!important}
body.cape-detail-open::before,body.cape-detail-open::after{animation-play-state:paused!important}
body.cape-detail-open .cape-release-banner{visibility:hidden!important}
body.cape-detail-open .cape-detail[data-cape-modal="1"]{contain:layout paint style}
body.cape-detail-open .cape-detail[data-cape-modal="1"] .cape-detail-card{transform:translateZ(0)}