:root {
  --daily-photo-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--daily-photo-transition-ease);
}

::view-transition-old(root) {
  animation-name: daily-photo-root-out;
}

::view-transition-new(root) {
  animation-name: daily-photo-root-in;
}

::view-transition-group(daily-photo-image) {
  z-index: 20;
  overflow: clip;
  animation-duration: 560ms;
  animation-timing-function: var(--daily-photo-transition-ease);
}

::view-transition-image-pair(daily-photo-image) {
  isolation: isolate;
}

::view-transition-old(daily-photo-image),
::view-transition-new(daily-photo-image) {
  height: 100%;
  object-fit: cover;
}

@keyframes daily-photo-root-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.9;
  }
}

@keyframes daily-photo-root-in {
  from {
    opacity: 0.96;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(daily-photo-image) {
    animation-duration: 1ms;
  }

  ::view-transition-new(root) {
    animation-name: none;
  }
}