/* ============================================================
   Results ring + lightbox — shared by the homepage and /before-and-after/
   ============================================================
   Component: src/ResultsRing.jsx. Loads after the page stylesheet in both
   shells. Depends on the :root tokens in styles.css and the elevation
   tokens in animations.css. */

.ring{--ring-card-w:clamp(168px,15.5vw,236px);--ring-gap:22px;--ring-step:calc(var(--ring-card-w) + var(--ring-gap));position:relative;width:100%;height:calc(var(--ring-card-w) * 4 / 3 + 48px);perspective:1400px;perspective-origin:50% 42%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;opacity:0;transition:opacity var(--d-hero) var(--ease-out);
  /* the mask is alpha only, so these are not colours */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 14%,rgba(0,0,0,1) 86%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 14%,rgba(0,0,0,1) 86%,rgba(0,0,0,0) 100%)}
@media (max-width:767px){.ring{--ring-card-w:40vw;--ring-gap:14px;perspective:900px;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%)}}
.ring.is-live{opacity:1}
.ring.is-dragging{cursor:grabbing}
.ring-track{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d}
.ring-card{position:absolute;top:16px;left:50%;width:var(--ring-card-w);margin:0 0 0 calc(var(--ring-card-w) / -2);aspect-ratio:3/4;transform:translate3d(calc((var(--i) - var(--mid,0)) * var(--ring-step)),0,0);will-change:transform;backface-visibility:hidden}
.ring-card-btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:var(--c-pearl);color:var(--c-ink);border-radius:16px;overflow:hidden;cursor:inherit;text-align:left;text-decoration:none;box-shadow:var(--e-md);isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform var(--d-hover) var(--ease-out),box-shadow var(--d-hover) var(--ease-out)}
.ring-card-btn:focus-visible{outline:3px solid var(--c-deep);outline-offset:4px}
.ring-card-btn:active{transform:scale(0.99);transition-duration:var(--d-press)}
@media (hover:hover) and (pointer:fine){
.ring-card-btn:hover{transform:scale(1.04);box-shadow:var(--e-lg)}
.ring-card-btn:hover .ring-label{background:rgba(255,255,255,0.94);transform:translateY(-2px)}
.ring.is-dragging .ring-card-btn:hover{transform:none}
}
.ring-media{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;gap:2px;background:var(--c-stone)}
.ring-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 38%);-webkit-user-drag:none;pointer-events:none}
.ring-tag{position:absolute;top:10px;left:10px;z-index:1;padding:6px 9px;border-radius:999px;background:rgba(26,41,46,0.66);color:var(--c-white);font-family:var(--font-sans);font-weight:600;font-size:9.5px;line-height:1;letter-spacing:0.14em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ring-tag-sep{opacity:0.5;margin:0 5px}
/* Frosted label: the one place the site uses backdrop blur, so that the
   treatment name reads over any photograph. Solid under reduced
   transparency. */
.ring-label{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.55);background:rgba(255,255,255,0.78);color:var(--c-ink);font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);pointer-events:none;transition:background-color var(--d-hover) var(--ease-out),transform var(--d-hover) var(--ease-out)}
@media (max-width:767px){.ring-label{font-size:11px;padding:8px 10px}.ring-tag{font-size:9px;padding:5px 8px}}
@media (prefers-reduced-transparency:reduce){
.ring-label{background:var(--c-white);backdrop-filter:none;-webkit-backdrop-filter:none}
.ring-tag{background:var(--c-ink);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Reduced motion: no drift, no arc. The same cards as a scrollable row. */
@media (prefers-reduced-motion:reduce){
.ring{height:auto;perspective:none;-webkit-mask-image:none;mask-image:none;cursor:default;touch-action:auto;opacity:1;transition:none}
.ring-track{position:relative;inset:auto;display:flex;gap:var(--ring-gap);overflow-x:auto;padding:8px 24px 16px;scroll-snap-type:x proximity;scroll-padding:24px;transform-style:flat}
.ring-card{position:static;flex:0 0 var(--ring-card-w);margin:0;top:auto;left:auto;transform:none!important;visibility:visible!important;will-change:auto;scroll-snap-align:center}
.ring-card-btn,.ring-card-btn:hover,.ring-card-btn:active,.ring-label,.ring-card-btn:hover .ring-label{transition:none;transform:none}
}

/* ============================================================
   Lightbox
   ============================================================
   Charcoal ground, the pair at full size, what the practice recorded, and
   the two next steps. A modal scales from centre; the backdrop only fades. */
.rl{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(26,41,46,0.94);animation:rl-in var(--d-enter) var(--ease-out)}
.rl-dialog{position:relative;width:min(1100px,100%);max-height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,0.85fr);gap:0 48px;align-items:center;color:var(--c-ivory);animation:rl-pop var(--d-enter) var(--ease-out)}
@keyframes rl-in{from{opacity:0}}
@keyframes rl-pop{from{opacity:0;transform:scale(0.97)}}
.rl-stage{position:relative;min-width:0}
.rl-pair{display:flex;justify-content:center;align-items:flex-start;gap:6px}
.rl-half{position:relative;display:block;flex:0 1 auto;min-width:0;max-width:50%;border-radius:12px;overflow:hidden;background:var(--c-deep-2)}
.rl-half img{display:block;width:auto;height:auto;max-width:100%;max-height:76vh}
.rl-mark{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:3px;background:rgba(15,79,87,0.85);color:var(--c-white);font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
.rl-cap{min-width:0}
.rl-cap h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.12;color:var(--c-ivory);margin:0 0 10px}
.rl-detail{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:rgba(246,246,247,0.74);margin:0 0 26px;max-width:40ch}
.rl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0 0 22px}
.rl .btn-primary{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
.rl-learn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--c-ivory);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--d-hover) var(--ease-out)}
.rl-learn .arrow{transition:transform var(--d-hover) var(--ease-out)}
.rl-note{margin:0;font-family:var(--font-sans);font-size:12.5px;line-height:1.5;color:rgba(246,246,247,0.62);max-width:44ch}
.rl-close,.rl-nav{appearance:none;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.06);color:var(--c-ivory);border-radius:50%;cursor:pointer;transition:background-color var(--d-hover) var(--ease-out),transform var(--d-press) var(--ease-out)}
.rl-close{position:fixed;top:20px;right:20px;width:44px;height:44px;z-index:2}
.rl-nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;z-index:2}
/* Over the photo edges, where the pair's margins are, at every width. */
.rl-prev{left:12px}
.rl-next{right:12px}
.rl-close:active,.rl-nav:active{transform:scale(0.95)}
@media (hover:hover) and (pointer:fine){
.rl-close:hover,.rl-nav:hover{background:rgba(255,255,255,0.16)}
.rl-learn:hover{color:var(--c-seafoam)}
.rl-learn:hover .arrow{transform:translateX(3px)}
}
.rl-close:focus-visible,.rl-nav:focus-visible,.rl .btn-primary:focus-visible,.rl-learn:focus-visible{outline:2px solid var(--c-ivory);outline-offset:3px}
.rl-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:767px){
.rl{padding:76px 16px 28px;align-items:flex-start;overflow-y:auto}
.rl-dialog{grid-template-columns:1fr;gap:22px 0;max-height:none;align-items:start}
.rl-half img{max-height:58vh}
.rl-cap h2{font-size:26px}
.rl-detail{margin-bottom:20px}
.rl-nav{width:42px;height:42px;margin-top:-21px}
}
@media (prefers-reduced-motion:reduce){
.rl,.rl-dialog{animation:none}
.rl-close,.rl-nav,.rl-learn,.rl-learn .arrow{transition:none}
.rl-close:active,.rl-nav:active{transform:none}
}