/* Include on the home and the internal page. Names are assigned to one image
   at a time in page-transitions.js; never assign this name to every card. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.22, .7, .22, 1);
}

::view-transition-group(vicom-page-photo) {
  z-index: 2;
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.22, .7, .22, 1);
  overflow: clip;
}

::view-transition-old(vicom-page-photo),
::view-transition-new(vicom-page-photo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 300ms;
}

.vicom-page-ghost {
  position: fixed;
  z-index: 2147483600;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  background: #263d32;
  contain: layout paint;
  will-change: left, top, width, height;
}

.vicom-page-ghost,
.vicom-page-ghost * {
  box-sizing: border-box;
  view-transition-name: none !important;
}

.vicom-page-ghost > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(root),
  ::view-transition-group(vicom-page-photo),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(vicom-page-photo),
  ::view-transition-new(vicom-page-photo) {
    animation-duration: 0s !important;
  }
}