:root{
  --photo-cursor-color:#0757d8;
  --photo-cursor-ease:cubic-bezier(.16,1,.3,1);
}

.photo-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:100000;
  width:150px;
  height:110px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-200px,-200px,0);
  transition:opacity .16s ease;
  will-change:transform;
}
.photo-cursor.is-visible{opacity:1}
.photo-cursor__open-shell,
.photo-cursor__arrow-shell{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.photo-cursor__open{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border:2px solid var(--photo-cursor-color);
  border-radius:50%;
  background:var(--photo-cursor-color);
  opacity:0;
  transform:translate(-50%,-50%);
  transition:width .3s var(--photo-cursor-ease),height .3s var(--photo-cursor-ease),background-color .3s var(--photo-cursor-ease),border-color .2s ease,opacity .16s ease;
}
.photo-cursor__open::before,
.photo-cursor__open::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:1.5px;
  border-radius:999px;
  background:var(--photo-cursor-color);
  opacity:0;
  transform:translate(-50%,-50%);
  transition:transform .18s linear,background-color .2s ease,opacity .16s ease;
}
.photo-cursor__open::after{transform:translate(-50%,-50%) rotate(90deg)}
.photo-cursor[data-mode="open"] .photo-cursor__open,
.photo-cursor[data-mode="close"] .photo-cursor__open{
  width:44px;
  height:44px;
  background:transparent;
  opacity:1;
}
.photo-cursor[data-mode="open"] .photo-cursor__open::before,
.photo-cursor[data-mode="open"] .photo-cursor__open::after,
.photo-cursor[data-mode="close"] .photo-cursor__open::before,
.photo-cursor[data-mode="close"] .photo-cursor__open::after{opacity:1}
.photo-cursor[data-mode="close"]{
  --photo-cursor-color:#fff;
  mix-blend-mode:difference;
}
.photo-cursor[data-mode="close"] .photo-cursor__open::after{transform:translate(-50%,-50%) rotate(0)}
.photo-cursor__arrow-shell{
  opacity:0;
  transform:scale(.3) rotate(-135deg);
  transition:opacity .16s ease,transform .32s var(--photo-cursor-ease);
}
.photo-cursor__arrow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.photo-cursor__arrow path{
  fill:none;
  stroke:#000;
  stroke-width:1.5px;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.photo-cursor[data-mode="previous"] .photo-cursor__arrow-shell,
.photo-cursor[data-mode="next"] .photo-cursor__arrow-shell{opacity:1;transform:scale(1) rotate(0)}
.photo-cursor[data-mode="previous"] .photo-cursor__arrow{transform:rotate(180deg)}
.photo-cursor.is-bumping .photo-cursor__open-shell,
.photo-cursor.is-bumping .photo-cursor__arrow-shell{animation:photoCursorBump .3s var(--photo-cursor-ease)}
@keyframes photoCursorBump{0%,100%{scale:1}36%{scale:.72}}

@media (hover:hover) and (pointer:fine){
  [data-photo-cursor],
  [data-action="open-photo-lightbox"],
  [data-action="open-preview-lightbox"]{cursor:none!important}
  [data-photo-cursor-native],
  [data-photo-cursor] [data-photo-cursor-native]{cursor:pointer!important}
  body.photo-cursor-dragging [draggable="true"][data-action="open-photo-lightbox"]{cursor:grabbing!important}
}
@media (hover:none), (pointer:coarse){.photo-cursor{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .photo-cursor,.photo-cursor__open,.photo-cursor__open::before,.photo-cursor__open::after,.photo-cursor__arrow-shell{transition:none}
  .photo-cursor.is-bumping .photo-cursor__open-shell,.photo-cursor.is-bumping .photo-cursor__arrow-shell{animation:none}
}