@view-transition {
  navigation: auto;
}

.site-main {
  view-transition-name: page-content;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-tips-to-avoid-renovation-regret.webp"],
.single-post .post-hero[src$="blog-tips-to-avoid-renovation-regret.webp"] {
  view-transition-name: blog-renovation-regret;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-prepping-garden-great-lakes-spring.jpg"],
.single-post .post-hero[src$="blog-prepping-garden-great-lakes-spring.jpg"] {
  view-transition-name: blog-garden-spring;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-tips-for-outdoor-decorating.webp"],
.single-post .post-hero[src$="blog-tips-for-outdoor-decorating.webp"] {
  view-transition-name: blog-outdoor-decorating;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-get-your-home-winter-ready-with-a-few-handy-tips.webp"],
.single-post .post-hero[src$="blog-get-your-home-winter-ready-with-a-few-handy-tips.webp"] {
  view-transition-name: blog-winter-ready;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-update-your-kitchen-without-a-reno.webp"],
.single-post .post-hero[src$="blog-update-your-kitchen-without-a-reno.webp"] {
  view-transition-name: blog-kitchen-update;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-fall-home-projects-with-the-best-roi.webp"],
.single-post .post-hero[src$="blog-fall-home-projects-with-the-best-roi.webp"] {
  view-transition-name: blog-fall-roi;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-easy-home-updates-to-help-you-chill-out-this-fall.webp"],
.single-post .post-hero[src$="blog-easy-home-updates-to-help-you-chill-out-this-fall.webp"] {
  view-transition-name: blog-fall-updates;
}

.page-blog:not(.single-post) .blog-cont img[src$="blog-tips-for-closing-up-the-cottage-this-year.webp"],
.single-post .post-hero[src$="blog-tips-for-closing-up-the-cottage-this-year.webp"] {
  view-transition-name: blog-closing-cottage;
}

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

::view-transition-old(root) {
  display: none;
}

::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(page-content) {
  animation: none;
}

::view-transition-group(blog-renovation-regret),
::view-transition-group(blog-garden-spring),
::view-transition-group(blog-outdoor-decorating),
::view-transition-group(blog-winter-ready),
::view-transition-group(blog-kitchen-update),
::view-transition-group(blog-fall-roi),
::view-transition-group(blog-fall-updates),
::view-transition-group(blog-closing-cottage) {
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

::view-transition-old(blog-renovation-regret),
::view-transition-new(blog-renovation-regret),
::view-transition-old(blog-garden-spring),
::view-transition-new(blog-garden-spring),
::view-transition-old(blog-outdoor-decorating),
::view-transition-new(blog-outdoor-decorating),
::view-transition-old(blog-winter-ready),
::view-transition-new(blog-winter-ready),
::view-transition-old(blog-kitchen-update),
::view-transition-new(blog-kitchen-update),
::view-transition-old(blog-fall-roi),
::view-transition-new(blog-fall-roi),
::view-transition-old(blog-fall-updates),
::view-transition-new(blog-fall-updates),
::view-transition-old(blog-closing-cottage),
::view-transition-new(blog-closing-cottage) {
  animation-duration: 680ms;
  height: 100%;
  object-fit: cover;
}

::view-transition-new(blog-renovation-regret),
::view-transition-new(blog-garden-spring),
::view-transition-new(blog-outdoor-decorating),
::view-transition-new(blog-winter-ready),
::view-transition-new(blog-kitchen-update),
::view-transition-new(blog-fall-roi),
::view-transition-new(blog-fall-updates),
::view-transition-new(blog-closing-cottage) {
  animation: blog-image-expand 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  transform-origin: center;
}

::view-transition-old(page-content) {
  animation: page-exit 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(page-content) {
  animation: page-enter 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
  backface-visibility: hidden;
}

@keyframes page-exit {
  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes blog-image-expand {
  from {
    clip-path: inset(4% round 8px);
    opacity: 0.65;
    transform: scale(0.92);
  }

  to {
    clip-path: inset(0 round 0);
    opacity: 1;
    transform: scale(1);
  }
}

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

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}