@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: guanyu-page-out 200ms cubic-bezier(.4, 0, 1, 1) both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: guanyu-page-in 360ms cubic-bezier(.22, 1, .36, 1) both;
  mix-blend-mode: normal;
}
@keyframes guanyu-page-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); }
}
@keyframes guanyu-page-in {
  from { opacity: 0; transform: translateY(12px) scale(1.008); }
  to { opacity: 1; transform: none; }
}

.category-nav.has-motion,
#geo-museum .m-view-switch.has-motion {
  position: relative;
  isolation: isolate;
}
.motion-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: transform 340ms cubic-bezier(.22, 1, .36, 1),
              width 280ms cubic-bezier(.22, 1, .36, 1),
              height 280ms cubic-bezier(.22, 1, .36, 1);
}
.category-nav > .motion-indicator {
  border-left: 2px solid #98cbf1;
  border-radius: 0 .5rem .5rem 0;
  background: #172331d9;
}
.category-nav.has-motion .category-button,
#geo-museum .m-view-switch.has-motion button {
  position: relative;
  z-index: 1;
}
.category-nav.has-motion .category-button.is-active {
  border-left-color: transparent;
  background: transparent;
}
#geo-museum .m-view-switch > .motion-indicator {
  border-radius: 5px;
  background: #263448;
}
#geo-museum .m-view-switch.has-motion button[aria-pressed="true"] {
  background: transparent;
}
.category-button .lucide {
  transition: color 220ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.category-button.is-active .lucide {
  transform: scale(1.06);
}
.enter-course .lucide {
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.course-card:hover .enter-course .lucide {
  transform: translateX(4px);
}

@media (max-width: 620px) {
  .category-nav > .motion-indicator {
    border: 1px solid #597e9c80;
    border-radius: .4rem;
  }
  .category-nav.has-motion .category-button.is-active {
    border-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .motion-indicator,
  .category-button .lucide,
  .enter-course .lucide { transition: none !important; }
  .category-button.is-active .lucide,
  .course-card:hover .enter-course .lucide { transform: none; }
}