@use 'variables' as var;

@keyframes glow-sweep-wide {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    transform: translate3d(0%, 0, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

@mixin headline-common($bg-height) {
  background-repeat: no-repeat;
  background-size: 100% $bg-height;
  background-position: bottom;

  font-family: var.$italic-font;
  font-style: italic;

  margin: 1.2rem 0rem;
  scroll-margin-top: var.$menu-bar-height;

  position: relative;
  overflow: hidden;

  &:target {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;

      background: linear-gradient(to top, rgba(var.$color_pink, 0.4) 0%, rgba(var.$color_purple, 0) 70%);

      transform: translate3d(-100%, 0, 0);
      opacity: 0;

      animation: glow-sweep-wide 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
    }
  }

  // reduced‑motion guard.
  @media (prefers-reduced-motion: reduce) {
    &:target {
      &::after {
        animation: none !important;
        transition: none !important;
      }
    }
  }
}

@mixin headline-high($bg-height) {
  background: linear-gradient(to right, var.$color_purple 0%, 10%, var.$color_pink 80%, var(--bg));
  @include headline-common($bg-height);
}

@mixin headline-middle($bg-height) {
  background: linear-gradient(to right, var.$color_pink 80%, var(--bg));
  @include headline-common($bg-height);
}

@mixin headline-low($bg-height: 0.1rem) {
  background: linear-gradient(to right, var.$color_purple 80%, var(--bg));
  @include headline-common($bg-height);
}

h1 {
  font-size: 2em;
  margin-block: 0.67em;

  @include headline-high(0.3rem);
}

h2 {
  font-size: 1.7em;
  @include headline-high(0.25rem);
}

h3 {
  font-size: 1.4em;
  @include headline-middle(0.2rem);
}

h4 {
  font-size: 1.25em;
  @include headline-middle(0.2rem);
}

h5 {
  font-size: 1.2em;
  @include headline-low();
}

h6 {
  font-size: 1.15em;
  @include headline-low();
}
