/*
 * /static/css/components/public-shell-transition.css
 * 公开页壳层切页动画样式真源。
 * 相关文件：static/js/public-page-shell.js, views/base.html, docs/开发/公开页切页动画维护.md
 */

:root {
  --public-shell-transition-enter-offset: 60px;
  --public-shell-transition-leave-offset: 40px;
  --public-shell-transition-enter-duration: 600ms;
  --public-shell-transition-leave-duration: 400ms;
  --public-shell-transition-enter-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --public-shell-transition-leave-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

html.public-shell-transitioning::view-transition-group(public-shell-page),
html.public-shell-transitioning::view-transition-group(public-shell-home-view) {
  animation: none;
}

html.public-shell-transitioning::view-transition-image-pair(public-shell-page),
html.public-shell-transitioning::view-transition-image-pair(public-shell-home-view) {
  isolation: isolate;
}

html.public-shell-transitioning::view-transition-old(public-shell-page),
html.public-shell-transitioning::view-transition-new(public-shell-page),
html.public-shell-transitioning::view-transition-old(public-shell-home-view),
html.public-shell-transitioning::view-transition-new(public-shell-home-view) {
  backface-visibility: hidden;
  mix-blend-mode: normal;
  will-change: transform, opacity;
}

html.public-shell-transitioning[data-public-shell-transition-direction="forward"]::view-transition-old(public-shell-page),
html.public-shell-transitioning[data-public-shell-transition-direction="forward"]::view-transition-old(public-shell-home-view) {
  animation:
    public-shell-slide-leave-forward var(--public-shell-transition-leave-duration)
    var(--public-shell-transition-leave-easing) both;
}

html.public-shell-transitioning[data-public-shell-transition-direction="forward"]::view-transition-new(public-shell-page),
html.public-shell-transitioning[data-public-shell-transition-direction="forward"]::view-transition-new(public-shell-home-view) {
  animation:
    public-shell-slide-enter-forward var(--public-shell-transition-enter-duration)
    var(--public-shell-transition-enter-easing) both;
}

html.public-shell-transitioning[data-public-shell-transition-direction="backward"]::view-transition-old(public-shell-page),
html.public-shell-transitioning[data-public-shell-transition-direction="backward"]::view-transition-old(public-shell-home-view) {
  animation:
    public-shell-slide-leave-backward var(--public-shell-transition-leave-duration)
    var(--public-shell-transition-leave-easing) both;
}

html.public-shell-transitioning[data-public-shell-transition-direction="backward"]::view-transition-new(public-shell-page),
html.public-shell-transitioning[data-public-shell-transition-direction="backward"]::view-transition-new(public-shell-home-view) {
  animation:
    public-shell-slide-enter-backward var(--public-shell-transition-enter-duration)
    var(--public-shell-transition-enter-easing) both;
}

@keyframes public-shell-slide-enter-forward {
  from {
    opacity: 0;
    transform: translateX(var(--public-shell-transition-enter-offset));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes public-shell-slide-leave-forward {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(calc(-1 * var(--public-shell-transition-leave-offset)));
  }
}

@keyframes public-shell-slide-enter-backward {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--public-shell-transition-enter-offset)));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes public-shell-slide-leave-backward {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(var(--public-shell-transition-leave-offset));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.public-shell-transitioning::view-transition-old(public-shell-page),
  html.public-shell-transitioning::view-transition-new(public-shell-page),
  html.public-shell-transitioning::view-transition-old(public-shell-home-view),
  html.public-shell-transitioning::view-transition-new(public-shell-home-view) {
    animation: none;
    will-change: auto;
  }
}