/* =========================================================
   DISABLE OLD LIGHTBOX
   ========================================================= */

#lightbox {
    display:none !important;
}


/* =========================================================
   3D CIRCULAR LIGHTBOX
   ========================================================= */

.ring-viewer {
    position:fixed;
    inset:0;

    z-index:99999999;

    display:none;

    overflow:hidden;

    background:
      radial-gradient(
        ellipse at center,
        rgba(35,30,27,.94) 0%,
        rgba(10,9,8,.98) 65%,
        #050505 100%
      );

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    perspective:1800px;
}

.ring-viewer.open {
    display:block;
}


/* background blur */
.ring-viewer::before {
    content:"";

    position:absolute;
    inset:-35px;

    background:
      var(--ring-bg)
      center/cover no-repeat;

    filter:
      blur(24px)
      brightness(.22);

    transform:scale(1.08);

    opacity:.55;

    transition:
      background-image .35s ease;
}


/* =========================================================
   STAGE
   ========================================================= */

.ring-viewer-stage {
    position:absolute;

    left:0;
    right:0;

    top:4%;
    bottom:21%;

    overflow:hidden;

    perspective:1800px;
    transform-style:preserve-3d;

    touch-action:pan-y;
}


/* =========================================================
   CARDS
   ========================================================= */

.ring-viewer-card {
    position:absolute;

    left:50%;
    top:50%;

    width:min(35vw,550px);
    height:min(70vh,760px);

    padding:0;

    border:0;
    border-radius:10px;

    overflow:hidden;

    background:#111;

    cursor:pointer;

    transform-style:preserve-3d;
    backface-visibility:hidden;

    box-shadow:
      0 28px 85px rgba(0,0,0,.40);

    will-change:
      transform,
      opacity,
      filter;

    transition:
      transform 560ms cubic-bezier(.22,.61,.36,1),
      opacity 420ms ease,
      filter 420ms ease,
      box-shadow 420ms ease;
}

.ring-viewer-card img {
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    background:#0d0d0d;

    pointer-events:none;

    user-select:none;
}


/* CENTER */

.ring-viewer-card[data-distance="0"] {
    z-index:40;

    opacity:1;

    transform:
      translate3d(-50%,-50%,260px)
      rotateY(0deg)
      scale(1);

    filter:
      brightness(1)
      saturate(1);

    cursor:default;

    box-shadow:
      0 35px 100px rgba(0,0,0,.48);
}


/* LEFT 1 */

.ring-viewer-card[data-distance="-1"] {
    z-index:30;

    opacity:.70;

    transform:
      translate3d(-131%,-50%,20px)
      rotateY(29deg)
      scale(.73);

    filter:
      brightness(.62)
      saturate(.75);
}


/* RIGHT 1 */

.ring-viewer-card[data-distance="1"] {
    z-index:30;

    opacity:.70;

    transform:
      translate3d(31%,-50%,20px)
      rotateY(-29deg)
      scale(.73);

    filter:
      brightness(.62)
      saturate(.75);
}


/* LEFT 2 */

.ring-viewer-card[data-distance="-2"] {
    z-index:20;

    opacity:.40;

    transform:
      translate3d(-183%,-50%,-210px)
      rotateY(42deg)
      scale(.56);

    filter:
      brightness(.48)
      saturate(.60);
}


/* RIGHT 2 */

.ring-viewer-card[data-distance="2"] {
    z-index:20;

    opacity:.40;

    transform:
      translate3d(83%,-50%,-210px)
      rotateY(-42deg)
      scale(.56);

    filter:
      brightness(.48)
      saturate(.60);
}


/* LEFT 3 */

.ring-viewer-card[data-distance="-3"] {
    z-index:10;

    opacity:.17;

    transform:
      translate3d(-224%,-50%,-390px)
      rotateY(52deg)
      scale(.43);

    filter:
      brightness(.35);
}


/* RIGHT 3 */

.ring-viewer-card[data-distance="3"] {
    z-index:10;

    opacity:.17;

    transform:
      translate3d(124%,-50%,-390px)
      rotateY(-52deg)
      scale(.43);

    filter:
      brightness(.35);
}


/* hidden */

.ring-viewer-card[data-hidden="1"] {
    opacity:0;

    pointer-events:none;

    transform:
      translate3d(-50%,-50%,-650px)
      scale(.30);
}


/* =========================================================
   CONTROLS
   ========================================================= */

.ring-viewer-close {
    position:absolute;

    z-index:200;

    top:20px;
    right:24px;

    width:46px;
    height:46px;

    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(20,20,20,.48);

    color:white;

    font-family:var(--font-body);
    font-size:30px;
    font-weight:200;

    cursor:pointer;

    backdrop-filter:blur(10px);
}

.ring-viewer-close:hover {
    background:#b97886;
}


/* prev / next */

.ring-viewer-arrow {
    position:absolute;

    z-index:200;

    top:45%;

    width:56px;
    height:56px;

    border:1px solid rgba(255,255,255,.44);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(92,55,65,.55);

    color:#fff;

    font-family:var(--font-body);
    font-size:39px;

    cursor:pointer;

    backdrop-filter:blur(10px);

    transition:
      background .18s ease,
      transform .18s ease;
}

.ring-viewer-prev {
    left:22px;
}

.ring-viewer-next {
    right:22px;
}

.ring-viewer-arrow:hover {
    background:#b97886;

    transform:scale(1.07);
}


/* =========================================================
   COUNTER
   ========================================================= */

.ring-viewer-counter {
    position:absolute;

    z-index:150;

    left:50%;
    bottom:18.5%;

    transform:translateX(-50%);

    padding:7px 15px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;

    background:rgba(20,20,20,.45);

    color:#fff;

    font-family:var(--font-heading);

    font-size:15px;
    letter-spacing:.08em;

    backdrop-filter:blur(8px);
}


/* =========================================================
   THUMBNAILS
   ========================================================= */

.ring-viewer-thumbs-wrap {
    position:absolute;

    z-index:150;

    left:7%;
    right:7%;

    bottom:6%;

    display:grid;

    grid-template-columns:
      42px
      minmax(0,1fr)
      42px;

    align-items:center;

    gap:8px;
}

.ring-viewer-thumbs {
    display:flex;

    gap:9px;

    overflow-x:auto;

    padding:4px 2px;

    scroll-behavior:smooth;

    scrollbar-width:none;
}

.ring-viewer-thumbs::-webkit-scrollbar {
    display:none;
}

.ring-viewer-thumb {
    flex:0 0 76px;

    width:76px;
    height:56px;

    padding:0;

    border:2px solid transparent;
    border-radius:6px;

    overflow:hidden;

    background:#222;

    opacity:.48;

    cursor:pointer;

    transition:
      opacity .18s ease,
      border-color .18s ease,
      transform .18s ease;
}

.ring-viewer-thumb img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.ring-viewer-thumb:hover {
    opacity:.85;
}

.ring-viewer-thumb.active {
    opacity:1;

    border-color:#dca0ae;

    transform:scale(1.05);
}

.ring-viewer-thumb-arrow {
    border:0;

    background:transparent;

    color:rgba(255,255,255,.75);

    font-size:32px;

    cursor:pointer;
}


/* help */

.ring-viewer-help {
    position:absolute;

    left:50%;
    bottom:1.7%;

    transform:translateX(-50%);

    color:rgba(255,255,255,.50);

    font-family:var(--font-heading);

    font-size:13px;

    white-space:nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px) {

    .ring-viewer-stage {
        top:7%;
        bottom:26%;
    }

    .ring-viewer-card {
        width:73vw;
        height:58vh;

        border-radius:7px;
    }

    .ring-viewer-card[data-distance="0"] {
        transform:
          translate3d(-50%,-50%,160px)
          scale(1);
    }

    .ring-viewer-card[data-distance="-1"] {
        opacity:.56;

        transform:
          translate3d(-101%,-50%,-60px)
          rotateY(25deg)
          scale(.66);
    }

    .ring-viewer-card[data-distance="1"] {
        opacity:.56;

        transform:
          translate3d(1%,-50%,-60px)
          rotateY(-25deg)
          scale(.66);
    }

    .ring-viewer-card[data-distance="-2"],
    .ring-viewer-card[data-distance="2"],
    .ring-viewer-card[data-distance="-3"],
    .ring-viewer-card[data-distance="3"] {
        opacity:0;

        pointer-events:none;
    }

    .ring-viewer-arrow {
        width:44px;
        height:44px;

        font-size:33px;

        top:43%;
    }

    .ring-viewer-prev {
        left:5px;
    }

    .ring-viewer-next {
        right:5px;
    }

    .ring-viewer-close {
        top:10px;
        right:10px;

        width:41px;
        height:41px;
    }

    .ring-viewer-counter {
        bottom:23%;

        font-size:12px;
    }

    .ring-viewer-thumbs-wrap {
        left:3%;
        right:3%;

        bottom:8%;

        grid-template-columns:
          27px
          minmax(0,1fr)
          27px;
    }

    .ring-viewer-thumb {
        flex-basis:62px;

        width:62px;
        height:47px;
    }

    .ring-viewer-help {
        bottom:2.5%;

        font-size:11px;
    }

}


/* Prefer reduced motion */

@media(prefers-reduced-motion:reduce) {
    .ring-viewer-card {
        transition-duration:.12s !important;
    }
}