section#support {
  --slashRotateDuration: 0.8s;
}

section#support.slash-animation-ready {
  --slashRotateX: 0deg;
  --slashRotateY: 0deg;
  --slashRotateZ: 0deg;
  --slashTransalteY: 0%;
  --slashTransalteZ: 0rem;
  --slashBlur: 0rem;
  --slashBrightness: 1;
}

section#support.slash-animation-ready .slash {
  transform-style: preserve-3d;
  transition: transform var(--slashRotateDuration)
      cubic-bezier(0.94, -0, 0.42, 0.79),
    filter calc(var(--slashRotateDuration) / 3) ease-in-out
      calc(var(--slashRotateDuration) / 3);
  transform: translateY(var(--slashTransalteY))
    translateZ(var(--slashTransalteZ)) rotateX(var(--slashRotateX))
    rotateY(var(--slashRotateY)) rotateZ(var(--slashRotateZ));
  filter: blur(var(--slashBlur)) brightness(var(--slashBrightness));
}

section#support.slash-animation-start:has(.slash-image[src]) {
  --slashBrightness: 1.5;
}

section#support.slash-animation-start {
  --slashTransalteY: -60%;
  --slashTransalteZ: -800rem;
  --slashRotateY: 530deg;
  --slashRotateZ: 100deg;
  --slashBlur: 7rem;
  --slashBrightness: 1.1;
}

section#support.slash-animation-ready .slash .slash-image,
section#support.slash-animation-ready .slash .slash-placeholder {
  pointer-events: none;
}

section#support .content {
  perspective: 800rem;
}