@view-transition {
  navigation: auto;
}

html {
  scroll-behavior: smooth;
}

::view-transition-old(root) {
  animation: vtpPageOut 150ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vtpPageIn 220ms cubic-bezier(0, 0, .2, 1) both;
}

@keyframes vtpPageOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: .55; transform: translateY(-4px); }
}

@keyframes vtpPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

html.vtpNavigationPending {
  cursor: progress;
}

html.vtpNavigationPending::before {
  content: '';
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2147483647;
  width: 42%;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #8b5cf6, #f472b6, #60a5fa);
  box-shadow: 0 0 16px rgba(139, 92, 246, .42);
  pointer-events: none;
  animation: vtpNavigationProgress 900ms cubic-bezier(.2, .7, .2, 1) infinite;
}

@keyframes vtpNavigationProgress {
  0% { transform: translateX(-115%); width: 34%; }
  55% { width: 58%; }
  100% { transform: translateX(290%); width: 28%; }
}

.vtpPostActionForm.isPending .vtpPostAction,
.vtpFavouriteForm.isPending button {
  opacity: .62;
  cursor: progress;
}

.vtpPostAction[aria-pressed='true'] {
  background: rgba(244, 114, 182, .16) !important;
  border-color: rgba(244, 114, 182, .48) !important;
  color: #be185d !important;
}

.vtpPostAction.vtpReactionPulse,
.vtpFavouriteForm button.vtpReactionPulse {
  animation: vtpReactionPulse 260ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes vtpReactionPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.vtpActionToastHost {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2147483646;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.vtpActionToast {
  padding: 11px 14px;
  border: 1px solid rgba(71, 56, 79, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  color: #281532;
  box-shadow: 0 16px 42px rgba(40, 21, 50, .18);
  font-weight: 800;
  text-align: center;
  animation: vtpToastIn 180ms ease-out both;
}

.vtpActionToast.isError {
  border-color: rgba(190, 24, 93, .26);
  color: #9d174d;
}

@keyframes vtpToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.vtpNavigationPending::before,
  .vtpPostAction.vtpReactionPulse,
  .vtpFavouriteForm button.vtpReactionPulse,
  .vtpActionToast {
    animation: none !important;
  }
}