.app-route-transition,
.admin-page-transition {
  min-height: 100%;
  animation: page-soft-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity, filter;
  background: transparent;
}

.admin-page-transition {
  transform-origin: top center;
}

.route-loading {
  min-height: 280px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,244,238,0.78));
}

.route-loading span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(194, 105, 58, 0.2);
  border-top-color: #C2693A;
  animation: route-loading-spin 760ms linear infinite;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

@keyframes page-soft-enter {
  from {
    opacity: 0.94;
    transform: translate3d(18px, 0, 0) scale(0.998);
    filter: blur(0.2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes view-soft-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0.96; transform: translate3d(-8px, 0, 0); }
}

@keyframes view-soft-in {
  from { opacity: 0.96; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes route-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app-route-transition,
  .admin-page-transition,
  .route-loading span,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}