/* Card textures are shared by the front and back of a thin CSS 3D object. */
.card-stage{width:100%;height:clamp(270px,31vw,450px);display:grid;place-items:center;perspective:1200px;touch-action:pan-y}
.card-rotor{position:relative;width:88%;max-width:490px;aspect-ratio:1.586;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-18deg) rotateZ(-7deg)}
.card-face,.card-edge{position:absolute;inset:0;border-radius:5%;border:1px solid #b79a5a}
.card-face{background-image:url('/card-faces-wine.png');background-size:100% 200%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-front{background-position:center top;transform:translateZ(2px)}
.card-back{background-position:center bottom;transform:rotateY(180deg) translateZ(2px)}
.card-edge{background:#aa8b50;transform:translateZ(var(--depth))}
.card-ready .card-rotor{animation:card-turn 22s linear infinite}
.card-paused .card-rotor,.card-offscreen .card-rotor{animation-play-state:paused}
@keyframes card-turn{from{transform:rotateX(10deg) rotateY(-18deg) rotateZ(-7deg)}to{transform:rotateX(10deg) rotateY(342deg) rotateZ(-7deg)}}
.card-control{display:block;margin:12px auto 0;padding:10px 18px;min-height:44px;max-width:100%;font:inherit;font-size:14px;line-height:1.5;color:var(--gold);background:#1b1e16;border:1px solid #756442;border-radius:4px;cursor:pointer}
.card-control[hidden]{display:none}.card-control:hover{background:#292b20}.card-control:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.card-control:disabled{color:var(--muted);cursor:default}
.hero-visual .image-caption{margin:24px 0 0}
@media(hover:hover){.card-stage:hover .card-rotor{animation-play-state:paused}}
@media(max-width:720px){.card-stage{height:clamp(245px,65vw,430px)}.card-rotor{width:83%;max-width:450px}}
@media(prefers-reduced-motion:reduce){.card-ready .card-rotor{animation:none!important;transform:rotateX(6deg) rotateY(-12deg) rotateZ(-5deg)}}