section#support {
  --slashImageDuration: 2.5s;
  --showDuration: 1s;
}
@media (orientation: landscape) {
  section#support {
    --slashImageDuration: 2.24s;
  }
}

section#support .slash {
  z-index: var(--slashIndex, 1);
  transition: translate var(--slashImageDuration) ease,
    z-index calc(var(--slashImageDuration) / 2) linear;
  translate: 0 5%;
  perspective: 1000rem;
}

@property --slashIndex {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

section#support .slash .body {
  opacity: 0;
  transition: opacity var(--showDuration) ease var(--slashImageDuration);
}

section#support:has(.btn.tab.active) .slash {
  --slashIndex: 3;
  translate: unset;
}
section#support .slash .body .tabContent {
  transition: visibility 0.001s linear calc(var(--slashRotateDuration) / 2);
}

section#support .slash .placeholder {
  opacity: 0;
  translate: 0 15%;
  transition: opacity var(--showDuration) ease var(--showDuration),
    translate var(--showDuration) ease var(--showDuration);
}

section#support .slash .slash-placeholder {
  pointer-events: none;
  transition: opacity var(--showDuration) ease,
    transform var(--showDuration) ease;
  transform-style: preserve-3d;
  transform-origin: 70% 50%;
}
section#support:not(.slash-blocked):has(.slash-image[src])
  .slash
  .slash-placeholder {
  --showDuration: 0s;
  transition-delay: 0.025s;
}
section#support:is(.slash-blocked, :not(:has(.slash-image[src]))) .slash .body {
  --slashImageDuration: calc(var(--showDuration) * 2);
}
section#support:has(.btn.tab.active) .slash .slash-placeholder {
  transform: rotateX(-96deg) rotateY(0deg) rotateZ(63deg);
  opacity: 0;
}
section#support:has(.btn.tab.active) .slash .placeholder {
  opacity: 1;
  translate: unset;
}
section#support:has(.btn.tab.active) .slash .slash-image {
  visibility: visible;
}
section#support:has(.btn.tab.active) .slash .body {
  pointer-events: auto;
  opacity: 1;
}

section#support:has(.btn.tab.active.wechat) .slash .body .tabContent.wechat {
  visibility: visible;
}

section#support:has(.btn.tab.active.whatsapp)
  .slash
  .body
  .tabContent.whatsapp {
  visibility: visible;
}

section#support:has(.btn.tab.active.telegram)
  .slash
  .body
  .tabContent.telegram {
  visibility: visible;
}