@use './animation' as animation;

@mixin spin-transition(
  $target: root,
  $scale: var(--neo-spin-transition-target, 0.9),
  $speed: var(--neo-spin-transition-speed, 2s),
  $easing: var(
      --neo-spin-transition-easing,
      linear(0, 0.324 9.1%, 0.584 18.6%, 0.782 28.6%, 0.858 33.8%, 0.92 39.2%, 0.997 49.5%, 1.021 55.1%, 1.033 61%, 1.035 71.7%, 1)
    ),
  $backdrop: var(--neo-spin-transition-backdrop, var(--neo-grey-light, #60605e))
) {
  &::view-transition {
    background: $backdrop;
  }

  &::view-transition-image-pair(#{$target}) {
    transform-origin: 50% 50% 100vw;
    transform-style: preserve-3d;
    perspective: 2500px;
    perspective-origin: center;
    filter: drop-shadow(0 0 6px hsl(165deg 11% 3%)) drop-shadow(0 0 25px hsl(165deg 11% 3% / 50%));
  }

  &::view-transition-old(#{$target}),
  &::view-transition-new(#{$target}) {
    transform: translateZ(-50vw) scale(var(--neo-scale)) rotateY(var(--neo-rotation)) translateZ(50vw);
    transform-origin: 50% 50% 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: $speed $easing;
  }

  &::view-transition-old(#{$target}) {
    animation-name: neo-spin-out;
  }

  &::view-transition-new(#{$target}) {
    animation-name: neo-spin-in;
  }

  @include animation.spin-in($scale);
  @include animation.spin-out($scale);
}

@mixin wave-transition($target: root, $waviness: var(--neo-waviness, 1.75)) {
  --neo-frequency: calc(#{$waviness} * 3.14); // 3.14 is pi
  --neo-time: 0;

  &::view-transition-old(#{$target}) {
    animation: none;
  }

  &::view-transition-new(#{$target}) {
    animation: 2s ease-in both neo-time-in;
    clip-path: polygon(
      0% 0%,
      0% calc(sin((0 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      4% calc(sin((0.04 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      8% calc(sin((0.08 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      12% calc(sin((0.12 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      16% calc(sin((0.16 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      20% calc(sin((0.2 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      24% calc(sin((0.24 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      28% calc(sin((0.28 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      32% calc(sin((0.32 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      36% calc(sin((0.36 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      40% calc(sin((0.4 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      44% calc(sin((0.44 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      48% calc(sin((0.48 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      52% calc(sin((0.52 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      56% calc(sin((0.56 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      60% calc(sin((0.6 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      64% calc(sin((0.64 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      68% calc(sin((0.68 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      72% calc(sin((0.72 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      76% calc(sin((0.76 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      80% calc(sin((0.8 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      84% calc(sin((0.84 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      88% calc(sin((0.88 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      92% calc(sin((0.92 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      96% calc(sin((0.96 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      100% calc(sin((1 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
      100% 0%
    );
  }

  @include animation.time-in;
}

@mixin circle-transition($target: root) {
  &::view-transition-old(#{$target}) {
    animation-delay: 1s;
  }

  &::view-transition-new(#{$target}) {
    animation: 1s ease-in-out circle-in;
  }

  @include animation.circle-in(var(--neo-transition-trigger-x, 50%), var(--neo-transition-trigger-y, 0%));
}