/* Preview Tooltip Component Styles */
.preview-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  overflow: hidden;
  border-radius: 8px;
  /* both frames of a cross-dissolve share one grid cell, so the incoming one
     lies over the outgoing instead of flowing below it */
  display: grid;
}

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

/* mobile: no cursor to follow, so we fade opacity instead of the clip-path
   animations. Placed once at the finger, held, then faded out over 0.8s. */
.preview-tooltip.mobile-preview {
  transition: opacity 0.8s ease;
}

.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.jpg (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;
  width: 206px;
  height: auto;
  pointer-events: none;
  object-fit: cover;
  border-radius: 8px;
  grid-area: 1 / 1;
  /* grid stretches items by default, which would squash a frame whose aspect
     ratio differs from the one it opens over */
  place-self: start;
}

/* Incoming frame held shut until its pixels arrive — without this it would wipe
   open over an empty box on a first, uncached load. */
.preview-tooltip img.is-entering,
.preview-tooltip video.is-entering {
  clip-path: inset(50% 50% 50% 50% round 8px);
}

/* The swap itself: the same expand-from-nothing reveal the first preview uses,
   but run on the frame instead of the tooltip, so the new image opens over the
   outgoing one — which stays put underneath until the reveal lands. */
.preview-tooltip img.is-revealing,
.preview-tooltip video.is-revealing {
  animation: expandFrame 0.2s ease-out forwards;
}

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

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