/*
 * LMAO Graphic image viewer v1.12.19
 * Lightbox centrale non fullscreen, immagini sempre proporzionate e pinch-to-zoom.
 */

.lmao-image-expand-host{
  isolation:isolate;
}

.lmao-image-expand-button,
.lmao-image-lightbox-close{
  appearance:none;
  position:absolute;
  z-index:80;
  display:grid;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  place-items:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.62);
  border-radius:50%;
  background:rgba(2,11,24,.76);
  box-shadow:0 9px 26px rgba(2,11,24,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transform:translateZ(0);
  transition:color .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease,transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}

.lmao-image-expand-button{
  top:10px;
  left:calc(100% - 54px);
}

.lmao-image-expand-button[hidden]{
  display:none!important;
}

.lmao-image-expand-button svg{
  width:20px;
  height:20px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.lmao-image-expand-button:hover,
.lmao-image-expand-button:focus-visible,
.lmao-image-lightbox-close:hover,
.lmao-image-lightbox-close:focus-visible{
  color:#020b18;
  border-color:#fff;
  background:#67eaf2;
  box-shadow:0 0 0 4px rgba(0,238,255,.17),0 12px 32px rgba(0,0,0,.32);
  outline:none;
  transform:scale(1.08);
}

.lmao-image-expand-button:active,
.lmao-image-lightbox-close:active{
  transform:scale(.96);
}

html.lmao-image-lightbox-active,
body.lmao-image-lightbox-active{
  overscroll-behavior:none;
}

.lmao-image-lightbox{
  position:fixed;
  z-index:2147483000;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:clamp(18px,4vw,48px);
  overflow:hidden;
  color:#fff;
  border:0;
  background:rgba(2,11,24,.22);
  opacity:0;
  transition:opacity .34s ease;
}

.lmao-image-lightbox[open]{
  display:grid;
  place-items:center;
}

.lmao-image-lightbox::backdrop{
  background:rgba(2,7,20,.68);
  opacity:0;
  backdrop-filter:blur(15px) saturate(.82);
  -webkit-backdrop-filter:blur(15px) saturate(.82);
  transition:opacity .34s ease;
}

.lmao-image-lightbox.is-open,
.lmao-image-lightbox.is-open::backdrop{
  opacity:1;
}

.lmao-image-lightbox-panel{
  --lmao-lightbox-size:min(86vw,76vh,860px);
  --lmao-lightbox-size:min(86vw,76svh,860px);
  position:relative;
  width:var(--lmao-lightbox-size);
  height:var(--lmao-lightbox-size);
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:
    radial-gradient(circle at 78% 18%,rgba(0,238,255,.1),transparent 26%),
    linear-gradient(145deg,rgba(7,19,39,.98),rgba(2,11,24,.98));
  box-shadow:0 34px 110px rgba(0,0,0,.56),0 0 0 1px rgba(0,238,255,.05) inset;
  opacity:0;
  transform:translate3d(0,24px,0) scale(.76);
  transform-origin:center;
  transition:opacity .28s ease,transform .44s cubic-bezier(.16,1,.3,1);
}

.lmao-image-lightbox.is-open .lmao-image-lightbox-panel{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.lmao-image-lightbox-viewport{
  position:absolute;
  inset:14px;
  display:grid;
  overflow:hidden;
  place-items:center;
  border-radius:18px;
  background:rgba(0,0,0,.13);
  touch-action:none;
  overscroll-behavior:contain;
  cursor:zoom-in;
  -webkit-user-select:none;
  user-select:none;
}

.lmao-image-lightbox-viewport[data-zoomed="true"]{
  cursor:grab;
}

.lmao-image-lightbox-viewport[data-dragging="true"]{
  cursor:grabbing;
}

.lmao-image-lightbox-image{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  margin:0;
  padding:0;
  object-fit:contain;
  object-position:center;
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center;
  transition:opacity .22s ease;
  will-change:transform;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
}

.lmao-image-lightbox.is-image-ready .lmao-image-lightbox-image{
  opacity:1;
}

.lmao-image-lightbox-image.is-resetting{
  transition:opacity .22s ease,transform .24s cubic-bezier(.22,1,.36,1);
}

.lmao-image-lightbox-viewport::before{
  position:absolute;
  width:34px;
  height:34px;
  content:"";
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#00eeff;
  border-radius:50%;
  opacity:1;
  animation:lmaoImageLightboxLoading .82s linear infinite;
  transition:opacity .18s ease;
}

.lmao-image-lightbox.is-image-ready .lmao-image-lightbox-viewport::before{
  opacity:0;
  animation:none;
}

.lmao-image-lightbox-close{
  top:14px;
  right:14px;
}

.lmao-image-lightbox-close span{
  position:absolute;
  width:20px;
  height:2px;
  background:currentColor;
  border-radius:99px;
  pointer-events:none;
}

.lmao-image-lightbox-close span:first-child{
  transform:rotate(45deg);
}

.lmao-image-lightbox-close span:last-child{
  transform:rotate(-45deg);
}

.lmao-image-lightbox-hint{
  position:absolute;
  right:64px;
  bottom:18px;
  left:18px;
  z-index:4;
  margin:0;
  color:rgba(255,255,255,.72);
  font-family:Montserrat,sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.055em;
  line-height:1.4;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .25s ease .3s,transform .25s ease .3s;
}

.lmao-image-lightbox.is-open .lmao-image-lightbox-hint{
  opacity:1;
  transform:none;
}

.lmao-image-lightbox-viewport[data-zoomed="true"]+.lmao-image-lightbox-hint{
  opacity:0;
  transition-delay:0s;
}

@keyframes lmaoImageLightboxLoading{
  to{transform:rotate(360deg)}
}

@media(max-width:767px){
  .lmao-image-expand-button,
  .lmao-image-lightbox-close{
    width:44px;
    height:44px;
  }

  .lmao-image-expand-button{
    top:8px;
    left:calc(100% - 52px);
  }

  .lmao-image-lightbox{
    padding:16px;
  }

  .lmao-image-lightbox-panel{
    --lmao-lightbox-size:min(92vw,calc(100vw - 32px),72vh,720px);
    --lmao-lightbox-size:min(92vw,calc(100vw - 32px),72svh,720px);
    border-radius:20px;
  }

  .lmao-image-lightbox-viewport{
    inset:10px;
    border-radius:14px;
  }

  .lmao-image-lightbox-close{
    top:10px;
    right:10px;
  }

  .lmao-image-lightbox-hint{
    right:58px;
    bottom:14px;
    left:14px;
    font-size:.62rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .lmao-image-expand-button,
  .lmao-image-lightbox-close,
  .lmao-image-lightbox,
  .lmao-image-lightbox::backdrop,
  .lmao-image-lightbox-panel,
  .lmao-image-lightbox-image,
  .lmao-image-lightbox-hint{
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }

  .lmao-image-lightbox-viewport::before{
    animation:none;
  }
}