@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/cta-primary";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/maps";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

$height: 500px;

.homepage-hero {
  @include content-containers.bleed();

  position: relative;
  overflow: hidden;
  min-height: $height;

  &__content {
    @include content-containers.safe-area-content();

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: site-config.$column-gap;
    z-index: 1;
    position: relative;

    > * {
      grid-column: 1 / -1;

      @media (width >= mq.$mq-640) {
        grid-column: 2 / -2;
      }

      @media (width >= mq.$mq-768) {
        grid-column: 3 / -3;
      }

      + * {
        margin-top: site-config.spacer(2);
      }
    }
  }

  &__subtitle {
    @extend %text-style-intro-copy;
  }

  &__cta {
    a {
      @extend %cta-primary;
    }
  }

  &__large-shape-left,
  &__large-shape-right {
    --_shape-offset: 60%;

    width: $height;
    aspect-ratio: 1/1;
    top: 0;
    overflow: hidden;
    transition: all 200ms ease-in-out;

    @media (width >= mq.$mq-640) {
      --_shape-offset: 50%;
    }

    &::before {
      content: '';
      opacity: 0.4;
      position: absolute;
      inset: 0;
      transition: all 200ms ease-in-out;
    }
  }

  &__large-shape-left {
    position: absolute;
    transform: translateX(calc(var(--_shape-offset) * -1));

    [data-site-mode="at-work"] & {
      border-radius: 100%;
    }

    &::before {
      background-color: var(--highlight-color);
    }
  }

  &__large-shape-right {
    position: absolute;
    right: 0;
    transform: translateX(var(--_shape-offset));
    display: flex;
    place-items: center;

    [data-site-mode="at-play"] & {
      border-radius: 100%;
    }

    &::before {
      background-color: var(--highlight-color-2);
    }
  }

  [data-site-mode="at-work"] & {
    &__at-work-text {
      display: none;
    }
  }

  [data-site-mode="at-play"] & {
    &__at-play-text {
      display: none;
    }
  }
}
