@keyframes alliance-small {
  from {
    outline-offset: 1px;
  }
  to {
    outline-offset: 1rem;
  }
}

@keyframes alliance-large {
  from {
    outline-offset: 1cqw;
  }
  to {
    outline-offset: 2cqw;
  }
}

@keyframes alliance-rotation {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}

.alliance {
  position: relative;

  .alliance-figure {
    position: relative;
    container-type: inline-size;
    container-name: alliance-container;
    text-align: center;
    max-width: 640px;
    @media (width >= 1920px) {
      max-width: 900px;
    }
    margin-inline: auto;
  }

  .base-header-group {
    text-align: center;
    @media (width >= 1920px) {
      text-align: left;
      position: absolute;
      left: 50%;
      max-width: 600px;
      transform: translateX(-166%);
    }
  }

  .base-header-group__header {
    margin-bottom: 0;
  }

  .alliance-aiplus-logo {
    @media (width < 1024px) {
      margin-bottom: 2rem;
      img {
        max-width: 100%;
        height: auto;
      }
    }
    @media (width >= 1024px) {
      position: relative;
      isolation: isolate;
      display: flex;
      width: 100%;
      aspect-ratio: 1;
      align-items: center;
      justify-content: center;
      margin: var(--space-big) auto;
      img {
        opacity: 0;
        transition: opacity 1s linear 1s;

        &:not([data-undiscovered]) {
          opacity: 1;
        }
      }
    }
  }

  .alliance-aiplus-logo::before {
    @media (width >= 1024px) {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      border: 2px dashed var(--color-main);
      border-radius: 50%;
      mask-image: var(--mask-image-url);
      mask-size: 100%;
      mask-mode: alpha;
      animation-name: alliance-rotation;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-duration: 2s;
      animation-play-state: paused;
    }
  }

  .alliance-figure:not([data-undiscovered]) .alliance-aiplus-logo::before {
    @media (width >= 1024px) {
      animation-play-state: running;
    }
  }

  .alliance-logo {
    --trans-x: 0%;
    --trans-y: 0%;
    display: inline-flex;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-back);
    box-shadow: 5px 5px 10px rgb(0 0 0 / .2);
    border-radius: 50%;
    overflow: hidden;
    width: min(calc(100% - 2rem), 360px);
    font-size: .75rem;
    text-align: center;
    gap: .5em;
    outline: 1px dashed hsl(var(--color-main-h) var(--color-main-s) var(--color-main-l) / .3);
    outline-offset: 1rem;
    animation-name: alliance-small;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 1.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;

    &.alliance-logo-1 {
      animation-duration: 1.4s;
    }

    &.alliance-logo-2 {
      animation-duration: 1.1s;
    }

    @media (width < 1024px) {
      --trans-x: -5vw;
      --trans-y: -2rem;
      position: relative;
      z-index: 1;
      transform: translateX(var(--trans-x)) translateY(var(--trans-y));
      opacity: 0;
      transition: opacity .5s linear;
      &:not([data-undiscovered]) {
        opacity: 1;
      }
      &.alliance-logo-0 {
        margin-top: 2rem;
        z-index: 2;
      }
      &.alliance-logo-1 {
        --trans-x: 5vw;
        @media (width > 640px) {
          --trans-y: -10vw;
        }
      }
      &.alliance-logo-2 {
        @media (width > 640px) {
          --trans-y: -15vw;
        }
      }
    }
    @media (width >= 1024px) {
      --trans-x: 0%;
      --trans-y: 0%;
      width: 360px;
      max-width: none;
      animation-name: alliance-large;
      font-size: .85rem;
      margin-bottom: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(calc(-50% + var(--trans-x))) translateY(calc(-50% + var(--trans-y)));
      transition: transform .66s ease-in, opacity .33s linear .33s;
      opacity: 0;
      &:not([data-undiscovered]) {
        opacity: 1;
      }
      &.alliance-logo-0:not([data-undiscovered]) {
        --trans-x: -58cqw;
        --trans-y: 19cqw;
      }
      &.alliance-logo-1:not([data-undiscovered]) {
        --trans-x: 52cqw;
        --trans-y: -30cqw;
      }
      &.alliance-logo-2:not([data-undiscovered]) {
        --trans-x: 38cqw;
        --trans-y: 42cqw;
      }
    }
    @media (width >= 1920px) {
      width: 50cqw;
      font-size: 1rem;
    }

    strong {
      max-width: 75%;
    }

    span {
      max-width: 85%;
    }
  }
}

/*# sourceMappingURL=alliance.css.map */