/* =====================================
   WORK DETAIL / SLIDER
===================================== */

.work{background:var(--dark);color:var(--white);padding:0 0 24px;min-height:100dvh}.work-header{position:fixed;top:0;left:0;right:0;height:80px;z-index:60;background:linear-gradient(var(--dark),rgba(11,17,16,.88));display:grid;grid-template-columns:1fr 64px;align-items:center;padding:18px 22px}.work-header .brand{height:52px;font-size:17px;color:var(--ink);background:var(--paper);}.work-close{width:54px;height:54px;background:var(--paper);color:var(--ink);font-size:42px;line-height:1;border:3px solid var(--line)}.work-back{position:relative;z-index:2;margin:92px 0 12px;padding-left:24px;color:rgba(255,250,240,.78);font-size:14px;letter-spacing:.1em;text-align:left}.work-image-wrap{background:var(--paper);none;border-top:3px solid rgba(255,250,240,.75);border-bottom:3px solid rgba(255,250,240,.75);padding:36px 22px 0;display:grid;place-items:center}.work-image-wrap img{max-width:100%;max-height:58dvh;object-fit:contain;border:2px solid rgba(0,0,0,.6);background:white}.work-info{padding:28px 24px 0}.work-info h1{font-size:48px;line-height:1;margin:0 0 8px}.work-info h2{color:var(--orange);font-size:18px;margin:0 0 30px}.meta-table{display:grid;grid-template-columns:90px 1fr;gap:10px 20px;color:rgba(255,250,240,.78);font-size:15px;line-height:1.5}.meta-table b{color:rgba(255,250,240,.52);font-weight:500}.open-image{display:block;margin-top:28px;border:2px solid rgba(255,250,240,.9);padding:18px;text-align:center;color:var(--white);text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.2em}
.work-image-wrap,
.work-image-wrap img{
  position:relative;
  z-index:100;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

.work::before,
.work::after,
.work-image-wrap::before,
.work-image-wrap::after{
  content:none !important;
  display:none !important;
}

.work-can-label{
  display:block;
  width:100px;
  height:auto;
  margin:0 0 18px;
}

.work-title-can{
    display:flex;
    align-items:center;

    gap:12px;

    margin:14px 0 6px;
}

.work-title-can img{
    width:95px;
}

.work-title-can h2{
    margin-left:-12px;
}

.work-slider{
  position:relative;
  overflow:hidden;
  padding:36px 0;
  background:var(--paper);
}

.work-slider img{
  display:block;
  object-fit:contain;
}

.main-work-img{
  width:86%;
  max-height:58dvh;
  margin:0 auto;
  border:2px solid rgba(0,0,0,.6);
  background:white;
  position:relative;
  z-index:2;
}

.work-slider .side{
  position:absolute;
  top:50%;
  width:72%;
  max-height:50dvh;
  transform:translateY(-50%) scale(.88);
  opacity:.22;
  filter:grayscale(.2);
  z-index:1;
}

.prev-side{
  left:-62%;
}

.next-side{
  right:-62%;
}
.work-slider{
  touch-action:pan-y;
}

.work-slider.swiping .main-work-img{
  transform:scale(.98);
  transition:transform .15s ease;
}

.main-work-img{
  transition:transform .22s ease, opacity .22s ease;
}
.prev-side,
.next-side{
  display:none !important;
}
.swipe-hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;

  font-size:12px;
  letter-spacing:.22em;
  color:rgba(20,20,20,.55);
  background:rgba(255,250,240,.72);
  border:1px solid rgba(20,20,20,.25);
  padding:6px 10px;

  animation:swipeHint 2s ease forwards;
  pointer-events:none;
}

@keyframes swipeHint{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(8px);
  }
  20%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(-4px);
  }
}
.main-work-img{
  transition:transform .2s ease, opacity .2s ease;
}