/* 配方取自 react-view-transitions 技能。时长变量见 tokens.css。 */
@keyframes fade {
  from {
    filter: blur(3px);
    opacity: 0;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes slide {
  from {
    translate: var(--slide-offset);
  }

  to {
    translate: 0;
  }
}

::view-transition-old(.fade-out) {
  animation: var(--duration-exit) ease-in fade reverse;
}

::view-transition-new(.fade-in) {
  animation: var(--duration-enter) ease-out var(--duration-exit) both fade;
}

::view-transition-old(.nav-forward) {
  --slide-offset: -60px;

  animation:
    var(--duration-exit) ease-in both fade reverse,
    var(--duration-move) ease-in-out both slide reverse;
}

::view-transition-new(.nav-forward) {
  --slide-offset: 60px;

  animation:
    var(--duration-enter) ease-out var(--duration-exit) both fade,
    var(--duration-move) ease-in-out both slide;
}

::view-transition-old(.nav-back) {
  --slide-offset: 60px;

  animation:
    var(--duration-exit) ease-in both fade reverse,
    var(--duration-move) ease-in-out both slide reverse;
}

::view-transition-new(.nav-back) {
  --slide-offset: -60px;

  animation:
    var(--duration-enter) ease-out var(--duration-exit) both fade,
    var(--duration-move) ease-in-out both slide;
}

/* 顶栏、底栏使用 backdrop-filter,需隐藏旧快照以免闪烁 */
::view-transition-group(bar-top),
::view-transition-group(bar-bottom) {
  animation: none;
  z-index: 100;
}

::view-transition-old(bar-top),
::view-transition-old(bar-bottom) {
  display: none;
}

::view-transition-new(bar-top),
::view-transition-new(bar-bottom) {
  animation: none;
}