/* The selected treatment: slow turn, restrained hover, reversible card flip. */
.motion-stage{position:relative;width:100%;aspect-ratio:4/6.1;overflow:hidden;border-radius:25px;background:radial-gradient(ellipse at 22% 10%,#eef0e6 0%,#dbe1d5 52%,#c5cec0 100%);isolation:isolate}
.preview-heading{position:relative;z-index:1;padding:26px 16px 0;text-align:center}
.cards-content .preview-heading h2{font-size:24px;line-height:1.2}
.preview-details{position:absolute;bottom:18px;left:16px;right:16px;margin:0;text-align:center;font:11px/1.4 Arial,sans-serif;color:var(--muted);text-wrap:balance}
.motion-stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff25,transparent 50%,#53664e10);z-index:0}
.motion-pair{position:absolute;inset:58px 0 36px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;gap:28px}
.motion-pair figure{width:94%;margin:0;position:relative}
.motion-pair figcaption{margin-top:14px;font:10px Arial,sans-serif;letter-spacing:.04em;text-align:center;color:#647260}
.cards-content .physical-card{appearance:none;display:block;position:relative;aspect-ratio:1.75;width:100%;padding:0;border:0;background:none;border-radius:12px;perspective:1100px;outline-offset:7px;-webkit-tap-highlight-color:transparent}
.card-hover,.card-body{display:block;position:absolute;inset:0;transform-style:preserve-3d;border-radius:inherit}
.card-hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .85s cubic-bezier(.18,1,.3,1)}
.card-body{transform:rotateY(var(--flip,0deg));transition:transform .65s cubic-bezier(.3,0,.2,1)}
.card-body .printed-face{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:1.75;object-fit:cover;max-width:none;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;user-select:none;-webkit-user-drag:none}
.face-front{transform:translateZ(1px)}
.face-back{transform:rotateY(180deg) translateZ(5px)}
.paper-edge{position:absolute;inset:0;border-radius:12px;background:#d4d5c7;border:1px solid #e8e7da;transform:translateZ(-1px)}
.edge-1{transform:translateZ(-2px);background:#ecebde}.edge-2{transform:translateZ(-3px)}.edge-3{transform:translateZ(-4px);background:#e5e6d8}.edge-4{transform:translateZ(-5px)}
.card-shadow{position:absolute;inset:5% 1%;border-radius:14px;background:#35433138;filter:blur(12px);transform:translateY(14px) scale(.97);opacity:.8;transition:transform .85s cubic-bezier(.18,1,.3,1),filter .85s,opacity .85s;pointer-events:none}
.paper-sheen{position:absolute;inset:0;border-radius:12px;transform:translateZ(1.3px);backface-visibility:hidden;pointer-events:none;background:linear-gradient(115deg,#ffffff00 12%,#ffffff28 50%,#ffffff00 83%);opacity:.12}
/* Match the square-cut cards supplied by Printful. */
.cards-content .physical-card,.card-hover,.card-body,.card-body .printed-face,.paper-edge,.paper-sheen,.card-shadow{border-radius:0}
[data-hover=ready] .physical-card:is(.is-hovered,:focus-visible){--lift:-6px}
[data-hover=ready] .physical-card:is(.is-hovered,:focus-visible) .card-hover{transition-duration:.35s}
[data-hover=ready] .physical-card:is(.is-hovered,:focus-visible) .card-shadow{transform:translateY(20px) scale(.96);filter:blur(14px);opacity:.65}
.motion-caption{min-height:36px;text-align:center;padding:12px 5px 0}
.motion-caption p{font:11px/1.5 Arial,sans-serif;color:var(--muted);margin:0}
@media(max-width:800px){.motion-pair{padding:22px;gap:20px}.motion-pair figcaption{margin-top:10px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.card-hover,.card-body,.card-shadow{transition:none!important}.physical-card{--lift:0px!important;--rx:0deg!important;--ry:0deg!important}}
@media(min-width:801px){
  .artwork{position:sticky;top:88px;align-self:start;min-width:0}
  .artwork .motion-stage{max-width:calc((100svh - 120px) / 1.525);margin-inline:auto}
}