/* A held hand becomes an upright 2-by-2 spread in direct proportion to scroll. */
.card-fan{position:relative;width:100%;aspect-ratio:1.35;isolation:isolate;--fan-progress:1}
.fan-card{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1.42;display:flex;flex-direction:column;gap:7px;padding:12px;background:#fffdf8;border:1px solid #d8e1d5;border-radius:19px;color:#244a3c;box-shadow:0 10px 23px #20372f14;cursor:zoom-in;transform-origin:50% 90%;text-align:left;-webkit-tap-highlight-color:transparent;translate:0 0;transition:translate 180ms ease;transform:translate(calc(var(--fan-stack-x) + (var(--fan-open-x) - var(--fan-stack-x)) * var(--fan-progress)),calc(var(--fan-stack-y) + (var(--fan-open-y) - var(--fan-stack-y)) * var(--fan-progress))) rotate(calc(var(--fan-stack-angle) * (1 - var(--fan-progress)))) scale(calc(1.25 - .25 * var(--fan-progress)))}
.fan-card img{display:block;width:100%;height:0;min-height:0;flex:1;object-fit:contain;border-radius:9px;pointer-events:none}
.fan-card-label{font:500 clamp(8px,.7vw,11px)/1.5 var(--body);display:block;flex-shrink:0;letter-spacing:.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.fan-card-0{z-index:1;--fan-stack-x:-68%;--fan-stack-y:-53%;--fan-stack-angle:-16deg;--fan-open-x:-104.5%;--fan-open-y:-106.5%}
.fan-card-1{z-index:2;--fan-stack-x:-56%;--fan-stack-y:-50%;--fan-stack-angle:-6deg;--fan-open-x:4.5%;--fan-open-y:-106.5%}
.fan-card-2{z-index:4;--fan-stack-x:-46%;--fan-stack-y:-49%;--fan-stack-angle:5deg;--fan-open-x:-104.5%;--fan-open-y:6.5%}
.fan-card-3{z-index:3;--fan-stack-x:-34%;--fan-stack-y:-54%;--fan-stack-angle:16deg;--fan-open-x:4.5%;--fan-open-y:6.5%}
.card-fan.fan-armed{--fan-progress:0}
.card-fan[data-card-reveal='static']{--fan-progress:1!important}
.card-fan.fan-armed:not(.fan-open) .fan-card{transition:none;translate:0 0}
.card-fan.fan-scrubbing .fan-card{will-change:transform}
.card-fan.fan-instant .fan-card{transition:none!important}
.card-fan.fan-open .fan-card:focus-visible{z-index:5;outline:3px solid #537765;outline-offset:4px;transition:none}
.fan-card:disabled{cursor:default}
@media(hover:hover){.card-fan.fan-open .fan-card:hover{z-index:5;translate:0 -4px}}
@media(max-width:960px){.fan-card{padding:12px;border-radius:18px}}
@media(max-width:650px){.card-fan{aspect-ratio:1.05}.fan-card{width:44%;aspect-ratio:1.05;padding:8px;gap:5px;border-radius:13px;box-shadow:0 7px 15px #20372f14}.fan-card img{border-radius:6px}.fan-card-label{font-size:8px}.fan-card-0,.fan-card-1{--fan-open-y:-104%}.fan-card-2,.fan-card-3{--fan-open-y:4%}}
@media(prefers-reduced-motion:reduce){.card-fan{--fan-progress:1!important}.fan-card{transition:none!important}}
@media print{.card-fan{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:15px}.card-fan .fan-card{position:relative;left:auto;top:auto;width:100%;transform:none!important;box-shadow:none;transition:none}}