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

.aiaPartner {
  @apply sticky z-0 h-dvh w-full items-center overflow-hidden text-white;

  top: 0;
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-24);
  background: #0166b6;

  @variant lg {
    @apply grid items-center;
  }

  &::before {
    @apply absolute aspect-square;

    top: -345px;
    right: -537px;
    z-index: -1;
    width: 744px;
    content: "";
    background: rgb(104 255 250 / 40%);
    border-radius: 100%;
    filter: blur(100px);

    @variant md {
      right: -357px;
    }

    @variant lg {
      right: -413px;
    }
  }

  &::after {
    @apply absolute aspect-square;

    right: -249px;
    bottom: -320px;
    z-index: -1;
    width: 588px;
    content: "";
    background: #68d2ff;
    border-radius: 100%;
    filter: blur(100px);

    @variant md {
      right: -9px;
    }

    @variant lg {
      right: -125px;
    }
  }

  &[data-logo-status="listEnd"] {
    @apply overflow-visible;
  }
}

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

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

.aiaPartner-container {
  @apply flex h-full flex-col justify-between;

  @variant lg {
    @apply grid h-auto;

    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-40) var(--spacing-20);
  }
}

.aiaPartner-logo {
  --logo-width: auto;
  --logo-height: 80%;

  @apply relative flex w-full items-center justify-center text-center;

  flex: 1 1 100%;
  mask: radial-gradient(circle, transparent 1%, black 0%) center / 10000%
    no-repeat;
  transition: mask-size 1.2s ease-in-out;

  @variant lg {
    --logo-width: 100%;
    --logo-height: auto;

    @apply w-full;

    grid-row-start: 2;
    grid-column-start: 2;
    mask-size: 15000%;
  }

  > * {
    max-width: 240px;
    background-position: center;
    transition:
      opacity 1.2s ease-in-out,
      transform 1.2s ease-in-out,
      filter 0.8s ease-in-out;

    @variant md {
      max-width: 360px;
    }

    @variant lg {
      max-width: 100%;
    }
  }

  &::after {
    @apply absolute top-0 left-1/2 h-full w-full opacity-0;

    max-width: 240px;
    content: "";
    background: url("../../images/logo-liquid-sm.png") center center / 100%
      no-repeat;
    filter: blur(5px);
    transform: translateX(-50%);
    transition:
      opacity 1.2s ease-in-out,
      filter 0.8s ease-in-out;

    @variant md {
      max-width: 360px;
    }

    @variant lg {
      max-width: 100%;
      background-image: url("../../images/logo-liquid-lg.png");
      background-size: 100% auto;
    }
  }
}

.aiaPartner-logo--maskShrink {
  /* animation: mask-shrink 1.2s forwards ease-in-out; */
  mask-size: 70%;

  @variant md {
    mask-size: 70%;
  }

  @variant lg {
    mask-size: 150%;
  }
}

.aiaPartner-logo--maskExpand {
  animation: mask-expand 1.2s forwards ease-in-out;
}

.aiaPartner-logo--ending {
  @apply mask-none;

  > * {
    @apply opacity-0;

    filter: blur(5px);
    transform: scale(1.02);
  }

  &::after {
    @apply opacity-100 blur-none;
  }
}

@keyframes mask-shrink {
  0% {
    --mask-size: 100%;
  }

  10% {
    --mask-size: 90%;
  }

  20% {
    --mask-size: 80%;
  }

  30% {
    --mask-size: 70%;
  }

  40% {
    --mask-size: 60%;
  }

  50% {
    --mask-size: 50%;
  }

  60% {
    --mask-size: 40%;
  }

  70% {
    --mask-size: 30%;
  }

  80% {
    --mask-size: 20%;
  }

  90% {
    --mask-size: 10%;
  }

  100% {
    --mask-size: 0%;
  }
}

@keyframes mask-expand {
  0% {
    --mask-size: 0%;
  }

  10% {
    --mask-size: 10%;
  }

  20% {
    --mask-size: 20%;
  }

  30% {
    --mask-size: 30%;
  }

  40% {
    --mask-size: 40%;
  }

  50% {
    --mask-size: 50%;
  }

  60% {
    --mask-size: 60%;
  }

  70% {
    --mask-size: 70%;
  }

  80% {
    --mask-size: 80%;
  }

  90% {
    --mask-size: 90%;
  }

  100% {
    --mask-size: 100%;
  }
}

.aiaPartner-contentContainer {
  @apply flex min-w-full flex-wrap items-center justify-between;

  gap: var(--spacing-24) var(--spacing-16);

  @variant lg {
    @apply grid;

    grid-template-rows: 32% min-content min-content;
    grid-row-start: 2;
    grid-column-start: 1;
    gap: var(--spacing-40);
    align-content: center;
  }
}

.aiaPartner-listScrollContainer {
  @apply overflow-hidden;

  width: 100px;
  height: 100px;

  @variant lg {
    @apply h-auto w-auto;
  }
}

.aiaPartner-listContainer {
  @apply grid;

  grid-template-rows: repeat(3, 1fr);
  gap: var(--spacing-48);
  transform: translateY(calc(-144px * var(--scroll-index, 0)));
  transition: transform 1.2s ease-in-out;

  @variant lg {
    @apply flex w-full transform-none justify-center overflow-visible;

    gap: var(--spacing-20);
    height: auto;
  }
}

.aiaPartner-list {
  @apply flex flex-col items-center justify-center;

  gap: var(--spacing-8);

  @variant lg {
    @apply relative;

    flex: 1 1 33.33%;
  }

  &:nth-child(2),
  &:nth-child(3) {
    @variant lg {
      @apply opacity-0;

      transform: translateY(100%);
      transition:
        opacity 1.2s ease-in-out,
        transform 1.2s ease-in-out;
    }
  }

  & + * {
    &::before {
      @variant lg {
        @apply absolute top-1/2 left-0 w-1 bg-white/40;

        height: var(--spacing-40);
        content: "";
        transform: translate(-10px, -50%);
      }
    }
  }
}

.aiaPartner-list--slideUp {
  &:nth-child(2),
  &:nth-child(3) {
    @variant lg {
      @apply opacity-100;

      transform: translateY(0);
    }
  }
}

.aiaPartner-list--stop {
  @apply transition-none;

  @variant md {
    @apply transition-none;
  }

  @variant lg {
    @apply transition-none;
  }

  &:nth-child(2),
  &:nth-child(3) {
    @variant lg {
      @apply transition-none;
    }
  }
}

.aiaPartner-description {
  flex: 1 1 0;
  padding-block: var(--spacing-48);

  @variant lg {
    @apply relative p-0;
  }

  &::after {
    @variant lg {
      @apply absolute aspect-square;

      top: -14px;
      right: -130px;
      width: 260px;
      content: "";
      background: #68d2ff;
      filter: blur(100px);
    }
  }
}

.aiaPartner-action {
  @apply w-full;

  @variant lg {
    @apply relative z-0;

    width: 160px;
    margin-top: calc(var(--spacing-16) * -1);
  }

  &::after {
    @variant lg {
      @apply absolute aspect-square;

      top: -70px;
      left: -96px;
      z-index: -1;
      width: 175px;
      content: "";
      background: #68d2ff;
      filter: blur(60px);
    }
  }
}

.aiaPartner-actionButton {
  @apply w-full;
}