@import "tailwindcss/theme";
@import "../variables/theme.css";

.aiForAll {
  @apply sticky top-0 overflow-hidden bg-blue-800;

  @variant md {
    @apply h-dvh;
  }
}

&:has(.pageSectionNavigation) .aiForAll {
  top: 122px;
  height: calc(100dvh - 122px);
}

&:has(.pageSectionNavigation--slideUp) .aiForAll,
&:has(.header):has(:not(.pageSectionNavigation)) .aiForAll {
  top: 58px;
  height: calc(100dvh - 58px);
}

.aiForAll-opening {
  @apply absolute flex h-full w-full flex-col items-center justify-center text-center;

  gap: var(--spacing-4);
  transition: opacity 0.8s ease-in-out;
}

.aiForAll-opening--transition {
  @apply opacity-0;
}

.aiForAll-openingHeading {
  transform-origin: 60% 50%;
  transition: transform 0.8s ease-in-out;
}

.aiForAll-openingHeading--transition {
  transform: scale(50);
}

.aiForAll-heading {
  @apply absolute top-1/2 text-white;

  width: 95%;
  transform: translateY(-50%);
}

.aiForAll-heading--transition {
  @apply inline-block;

  transition:
    transform 1.2s ease-in-out,
    opacity 1.2s ease-in-out;

  &:nth-child(2) {
    transition:
      transform 0.8s 1.2s ease-in-out,
      opacity 0.8s 1.2s ease-in-out;
  }
}

.aiForAll-heading--transitionReady {
  @apply opacity-0;

  transform: translateY(100%);
  transition-delay: 0.8s, 0.8s;

  &:nth-child(2) {
    transition-delay: 0s, 0s;
  }
}

.aiForAll-content {
  transition: opacity 1.2s ease-in-out;
}

.aiForAll-content--transition {
  @apply opacity-0;
}

.aiForAll-container {
  @apply absolute top-0 left-0 h-full w-full;

  transition: opacity 1.2s ease-in-out;
}

.aiForAll-container--transition {
  @apply opacity-0;
}

.aiForAll-list {
  @apply absolute text-white/60;

  top: var(--list-top);
  left: var(--list-left);
  width: 55.55%;
  max-width: 250px;
  white-space: nowrap;
  transform: rotate(var(--list-rotate));
  transform-origin: 0 50%;
  transition: all 0.3s ease-in-out;
  will-change: contents;

  @variant md {
    width: 330px;
  }

  @variant lg {
    width: 380px;
  }
}

.aiForAll-list--active {
  @apply text-white;

  .aiForAll-prefix {
    @apply text-blue-500;
  }
}

.aiForAll-description {
  @apply whitespace-normal;
}