.card-fan{perspective:1100px;height:390px;isolation:isolate;max-width:520px;margin:auto}
.stack-card{--angle:calc((var(--i) - 1.5)*12deg);position:absolute;left:calc(5% + var(--i)*17%);top:calc(65px + (var(--i) - 1.5)*(var(--i) - 1.5)*12px);width:43%;padding:0;border:0;background:transparent!important;border-radius:5%;transform:rotate(var(--angle));transform-origin:50% 85%;box-shadow:0 20px 30px #0009;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .4s,box-shadow .4s;z-index:calc(2 + var(--i));cursor:zoom-in;touch-action:manipulation}
.stack-card img{display:block;width:100%;border-radius:5%;pointer-events:none}.stack-card:hover,.stack-card:focus-visible{z-index:12;transform:rotate(var(--angle)) translateY(-12px) scale(1.035);box-shadow:0 24px 36px #000a,0 0 16px #e6ad6115;filter:brightness(1.02)}
.card-shine{position:absolute;inset:0;border-radius:5%;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--px,50%) var(--py,20%),#ffffff45,transparent 55%);mix-blend-mode:screen;transition:opacity .25s}.stack-card:hover .card-shine{opacity:.35}.stack-card:focus-visible{outline:2px solid #e6ad61;outline-offset:5px}.art-caption{position:relative;z-index:1}
.card-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:#f5eee2;opacity:0;transition:opacity .3s}.card-viewer.is-open{opacity:1}.card-viewer::backdrop{background:#05090b00;backdrop-filter:blur(0);transition:background .4s,backdrop-filter .4s}.card-viewer.is-open::backdrop{background:#05090bd9;backdrop-filter:blur(18px)}
.viewer-layout{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 65px 85px;gap:15px;pointer-events:none}.viewer-image{display:block;max-width:100%;height:auto;width:auto;max-height:calc(100dvh - 175px);object-fit:contain;border-radius:4%;box-shadow:0 30px 90px #000b;pointer-events:auto;touch-action:pan-y;will-change:transform}.viewer-caption{text-align:center;font:20px Georgia,serif;line-height:1.4}.viewer-count{display:block;font:11px Arial,sans-serif;letter-spacing:2px;color:#bdc4c9;margin-top:5px}.viewer-close,.viewer-prev,.viewer-next{position:absolute;margin:0!important;border:1px solid #ffffff40;background:#1c242bcc;color:white;border-radius:50%;width:48px;height:48px;padding:0;font:22px Arial,sans-serif;display:grid;place-items:center}.viewer-close{top:20px;right:22px}.viewer-prev{left:22px;top:calc(50% - 24px)}.viewer-next{right:22px;top:calc(50% - 24px)}.viewer-hint{position:absolute;bottom:18px;width:100%;text-align:center;font:12px Arial,sans-serif;color:#aab2b7;pointer-events:none}
@media(max-width:600px){.card-fan{height:285px;max-width:340px;width:100%}.stack-card{width:42%;top:calc(35px + (var(--i) - 1.5)*(var(--i) - 1.5)*10px)}.viewer-layout{padding:70px 20px 110px}.viewer-image{max-height:calc(100dvh - 230px)}.viewer-prev,.viewer-next{top:auto;bottom:40px;width:44px;height:44px}.viewer-prev{left:calc(50% - 70px)}.viewer-next{right:calc(50% - 70px)}.viewer-caption{font-size:18px}.viewer-hint{bottom:16px;font-size:11px}}
@media(hover:none){.stack-card:hover{transform:rotate(var(--angle));filter:none}.stack-card:active{transform:rotate(var(--angle)) translateY(-8px) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.stack-card,.card-shine,.card-viewer,.card-viewer::backdrop{transition:none!important}}

/* Keep the travelling card opaque while the backdrop and controls fade. */
.card-viewer.is-open{transition:none}.card-viewer.is-closing::backdrop{background:#05090b00;backdrop-filter:blur(0)}
.card-viewer .viewer-close,.card-viewer .viewer-prev,.card-viewer .viewer-next,.card-viewer .viewer-caption,.card-viewer .viewer-hint{opacity:0;transition:opacity .25s ease .25s}
.card-viewer.is-open:not(.is-closing) .viewer-close,.card-viewer.is-open:not(.is-closing) .viewer-prev,.card-viewer.is-open:not(.is-closing) .viewer-next,.card-viewer.is-open:not(.is-closing) .viewer-caption,.card-viewer.is-open:not(.is-closing) .viewer-hint{opacity:1}
.card-viewer.is-closing .viewer-close,.card-viewer.is-closing .viewer-prev,.card-viewer.is-closing .viewer-next,.card-viewer.is-closing .viewer-caption,.card-viewer.is-closing .viewer-hint{transition-delay:0s}