@import "import";

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dot {
  @include type-item(fluid-headline);
  $dot-size: 0.35em;
  font-family: font-family(monospace);
  background-image: url(../../assets/images/aura.jpg);
  background-size: 125%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(50% - $dot-size / 2);
  left: -1em;
  height: $dot-size;
  width: $dot-size;
  border-radius: rounded(circle);
  will-change: transform;
  user-select: none;
}

.flowerContainer {
  position: relative;
  margin-top: calc(var(--header-height) * -1);
  margin-bottom: spacer(lg);
  overflow: clip;
  animation-name: fade-in;
  animation-duration: 1000ms;
  animation-delay: 1400ms;
  animation-fill-mode: forwards;
  opacity: 0;

  &.debug {
    @include debug(flowerContainer);

    .flower {
      @include debug(flower);
    }

    .inner {
      @include debug(inner);
    }

    .petal {
      @include debug(petal);
    }

    .appCallout {
      @include debug(appCallout);
    }
  }

  .flower {
    position: sticky;
    top: 0;
  }

  .inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .petal {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    will-change: transform;
    user-select: none;

    .label {
      @include transition(color);
      @include type-item(fluid-headline);
      white-space: pre;
      color: color(text-faint-light);
      cursor: pointer;
    }

    &:hover,
    &.active {
      .label {
        color: color(text-light);
      }
    }
  }

  .petal:is(.notAllowed) {
    pointer-events: none;

    .label {
      color: color(text-faint-light);
      cursor: auto;
    }
  }

  .petal:is(.appCallout) {
    @include flex(column, $gap: spacer(md));
    z-index: z(1);

    .label {
      color: color(text-light);
      cursor: auto;
    }

    .icon {
      color: color(text-light);
      height: calc(4rem + 2vw);
      width: auto;

      @include breakpoint(medium) {
        height: calc(9.2rem + 2vw);
      }
    }

    .cta {
      transition: none !important;
      background-color: color(text-light);
      color: color(background);
    }
  }
}