/* Preview Tooltip Component Styles */
.preview-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  overflow: hidden;
}

.preview-tooltip.show {
  opacity: 1;
}

.preview-tooltip.animating-in {
  animation: expandFrame 0.1s ease-out forwards;
}

.preview-tooltip.animating-out {
  animation: collapseFrame 0.1s ease-out forwards;
}

/* Images used in preview tooltip:
   - /assets/index-frame/core.jpg (menu: core)
   - /assets/index-frame/clay.pet.svg (menu: clay.pet)
   - /assets/index-frame/signs.svg (menu: signs)
   - /assets/background/sairse.svg (project link)
   - /assets/background/star-onyx.svg (project link)
   - /assets/background/scully's.svg (project link)
   - /assets/background/nami.svg (project link)
   - /assets/background/miil3x.svg (project link)
   - /assets/background/dawa.svg (project link)
   - /assets/background/latent.svg (project link)
   - /assets/background/hermit.svg (project link)
   - /assets/background/Triskele.svg (project link)
   - /assets/background/anu initiative.svg (project link)
   - /assets/background/artefact.svg (project link)
   - /assets/background/earthconnection1.svg (project link)
   - /assets/background/duir2.svg (project link)
   - /assets/background/expanse1.svg (project link)
   - /assets/background/ondra1.svg (project link)
*/
.preview-tooltip img,
.preview-tooltip video {
  display: block;
  height: auto;
  width: 147px;
  pointer-events: none;
  object-fit: cover;
}

@keyframes expandFrame {
  from {
    clip-path: inset(50% 50% 50% 50%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes collapseFrame {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(50% 50% 50% 50%);
  }
}