/* [project]/components/workbench/pro-swap.css [app-client] (css) */
@keyframes pro-swap-surface-out {
  to {
    opacity: 0;
  }
}

@keyframes pro-swap-surface-in {
  from {
    opacity: 0;
  }
}

@keyframes pro-badge-out {
  to {
    opacity: 0;
  }
}

@keyframes pro-badge-in {
  from {
    opacity: 0;
  }
}

@keyframes pro-badge-stamp {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pro-swap-anchor-hold {
  from, to {
    opacity: 1;
  }
}

@keyframes pro-composer-turn-out-forward {
  from {
    opacity: 1;
    transform: perspective(1400px)rotateY(0);
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: perspective(1400px)rotateY(-90deg);
  }
}

@keyframes pro-composer-turn-in-forward {
  from {
    opacity: 0;
    transform: perspective(1400px)rotateY(90deg);
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: perspective(1400px)rotateY(0);
  }
}

@keyframes pro-composer-turn-out-back {
  from {
    opacity: 1;
    transform: perspective(1400px)rotateY(0);
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: perspective(1400px)rotateY(90deg);
  }
}

@keyframes pro-composer-turn-in-back {
  from {
    opacity: 0;
    transform: perspective(1400px)rotateY(-90deg);
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: perspective(1400px)rotateY(0);
  }
}

html[data-pro-swap] [data-pro-morph="lockup"] {
  view-transition-name: pro-lockup;
}

html[data-pro-swap] [data-pro-morph="badge"] {
  view-transition-name: pro-badge;
}

html[data-pro-swap] [data-pro-morph="composer"] {
  view-transition-name: pro-composer;
}

html[data-pro-swap]::view-transition-group(root) {
  animation: .21s linear both pro-swap-anchor-hold;
}

html[data-pro-swap]::view-transition-group(pro-lockup) {
  animation: .21s linear both pro-swap-anchor-hold;
}

html[data-pro-swap]::view-transition-group(pro-badge) {
  animation: .21s linear both pro-swap-anchor-hold;
}

html[data-pro-swap]::view-transition-old(root) {
  animation: .13s cubic-bezier(.4, 0, 1, 1) both pro-swap-surface-out;
}

html[data-pro-swap]::view-transition-new(root) {
  animation: .21s cubic-bezier(.16, 1, .3, 1) both pro-swap-surface-in;
}

html[data-pro-swap]::view-transition-old(pro-lockup) {
  opacity: 0;
  animation: none;
}

html[data-pro-swap]::view-transition-new(pro-lockup) {
  opacity: 1;
  animation: none;
}

html[data-pro-swap]::view-transition-old(pro-badge) {
  animation: .11s cubic-bezier(.4, 0, 1, 1) both pro-badge-out;
}

html[data-pro-swap="enter"]::view-transition-new(pro-badge) {
  transform-origin: center;
  animation: .16s cubic-bezier(.16, 1, .3, 1) both pro-badge-stamp;
}

html[data-pro-swap="exit"]::view-transition-new(pro-badge) {
  animation: .19s cubic-bezier(.16, 1, .3, 1) both pro-badge-in;
}

html[data-pro-swap]::view-transition-group(pro-composer) {
  z-index: 2;
  animation-duration: .52s;
  animation-timing-function: cubic-bezier(.86, 0, .14, 1);
}

html[data-pro-swap]::view-transition-old(pro-composer) {
  mix-blend-mode: normal;
  transform-origin: center;
}

html[data-pro-swap]::view-transition-new(pro-composer) {
  mix-blend-mode: normal;
  transform-origin: center;
}

html[data-pro-swap="enter"]::view-transition-old(pro-composer) {
  animation: .24s cubic-bezier(.4, 0, 1, 1) both pro-composer-turn-out-forward;
}

html[data-pro-swap="enter"]::view-transition-new(pro-composer) {
  animation: .28s cubic-bezier(.22, 1, .36, 1) .24s both pro-composer-turn-in-forward;
}

html[data-pro-swap="exit"]::view-transition-old(pro-composer) {
  animation: .24s cubic-bezier(.4, 0, 1, 1) both pro-composer-turn-out-back;
}

html[data-pro-swap="exit"]::view-transition-new(pro-composer) {
  animation: .28s cubic-bezier(.22, 1, .36, 1) .24s both pro-composer-turn-in-back;
}

@media (prefers-reduced-motion: reduce) {
  [data-pro-stamp] {
    animation: .16s cubic-bezier(.16, 1, .3, 1) both pro-badge-in;
  }

  html[data-pro-swap="enter"]::view-transition-new(pro-badge) {
    animation: .16s cubic-bezier(.16, 1, .3, 1) both pro-badge-in;
    transform: none;
  }

  html[data-pro-swap]::view-transition-group(pro-composer) {
    animation: none;
  }

  html[data-pro-swap]::view-transition-old(pro-composer) {
    opacity: 0;
    animation: none;
  }

  html[data-pro-swap]::view-transition-new(pro-composer) {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/*# sourceMappingURL=components_workbench_pro-swap_329686b0.css.map*/