[hidden] { display: none !important; }

/* Every routed page shares text-sized title geometry, even with a block header. */
.playground-view h1,
html[data-select-transition] [data-transition-title] {
  width: fit-content;
  max-width: 100%;
  flex: none;
}

html[data-select-transition] [data-transition-title] {
  view-transition-name: select-title;
}
html[data-select-transition] [data-transition-icon] {
  view-transition-name: select-icon;
}
html[data-select-transition] .home [data-transition-icon] {
  opacity: 1;
  transform: none;
}
html[data-select-transition] .home .project,
html[data-select-transition] .home .project-icon,
html[data-select-transition] .home .project-description {
  transition: none;
}
.playground-view h1:focus { outline: none; }

/* One spring for the shared title; a short, crisp bounce for the content. */
::view-transition-group(*) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-group(select-title),
::view-transition-group(select-icon) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(.2, 1.22, .32, 1);
}
::view-transition-old(*) {
  animation: select-part-out 90ms ease-out both;
}
::view-transition-new(*) {
  animation: select-part-in 380ms both;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(select-title),
::view-transition-old(select-icon) { display: none; }
::view-transition-new(select-title),
::view-transition-new(select-icon) {
  height: 100%;
  animation: none;
  mix-blend-mode: normal;
}
/* Labels can differ (Jont / Jont Font); move the snapshot without scaling text. */
::view-transition-new(select-title) {
  width: auto;
  height: auto;
}

@keyframes select-part-out {
  to { opacity: 0; }
}
@keyframes select-part-in {
  0% {
    opacity: 0;
    transform: translateY(12px);
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  65% {
    opacity: 1;
    transform: translateY(-2px);
    animation-timing-function: cubic-bezier(.3, 0, .3, 1);
  }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}