/* ===== 3D ring showcase (gallery page) ===== */
.ring-section{position:relative;overflow:hidden;padding:80px 0 70px;background:radial-gradient(ellipse at 50% 38%,#7a1a42 0%,var(--maroon-dark) 55%,#1e0510 100%)}
.ring-section .container{position:relative;z-index:2}
.ring-section .section-title{color:var(--ivory)}
.ring-section .section-sub{color:var(--blush);margin-bottom:10px}

.stage{position:relative;height:clamp(400px,46vw,560px);perspective:1500px;perspective-origin:50% 35%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.stage::after{content:"";position:absolute;left:50%;bottom:6%;width:70%;height:70px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(201,162,77,.38),transparent 70%);filter:blur(8px);pointer-events:none}

.ring{position:absolute;left:50%;top:44%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);transform-style:preserve-3d;will-change:transform}
.r-card{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.r-card.active{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--r) + 90px)) scale(1.12);z-index:5}

.face{position:absolute;inset:0;border-radius:14px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 22px 50px rgba(0,0,0,.55);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.front img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;transition:filter .5s ease}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 35%,transparent 70%,rgba(0,0,0,.25));pointer-events:none}
.front figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 14px;text-align:center;font-family:var(--ff-head);color:var(--gold-light);font-size:1.05rem;background:linear-gradient(transparent,rgba(61,10,31,.92));opacity:0;transition:opacity .4s ease}
.r-card.active .front figcaption{opacity:1}
.back{transform:rotateY(180deg);display:grid;place-items:center;background:linear-gradient(160deg,var(--maroon),var(--maroon-dark))}
.back img{width:56%;opacity:.92}

/* hovered card stays sharp, everything else blurs and dims */
.ring.focus .r-card:not(.active) .front img{filter:blur(5px) brightness(.5)}

.ring-cap{position:relative;z-index:2;text-align:center;margin-top:6px;min-height:34px;font-family:var(--ff-head);font-size:1.4rem;color:var(--gold-light);transition:opacity .3s}
.ring-hint{position:relative;z-index:2;text-align:center;color:var(--blush);font-size:.85rem;opacity:.85}
.h-touch{display:none}
@media (hover:none){.h-mouse{display:none}.h-touch{display:inline}}

@media (max-width:640px){.ring-section{padding:56px 0 50px}.stage{height:400px;perspective:1000px}.face{border-radius:10px}.r-card.active{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--r) + 50px)) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.r-card,.front img{transition:none}}