@keyframes strokeAnimation {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.js theme-reveal-text {
  opacity: 0;
}

.highlighted-text {
  transform: translateZ(0);
}

.highlighted-text .icon {
  z-index: -1;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  stroke: rgb(var(--color-highlight));
  transform: scaleX(var(--transform-logical));
}

.highlighted-text .icon-circle {
  width: min(120%, calc(100% + 40px));
  height: 140%;
  inset-block-start: -20%;
  inset-inline-start: calc(min(10%, 20px) * -1);
}

.highlighted-text .icon-underline {
  width: 100%;
  height: 30%;
  inset-block-start: auto;
  inset-block-end: -20%;
}

.highlighted-text .icon-sketch-underline {
  width: 100%;
  height: 60%;
  inset-block-start: auto;
  inset-block-end: -20%;
}

.highlighted-text .icon-squiggle-underline {
  width: 100%;
  height: 50%;
  inset-block-start: auto;
  inset-block-end: -30%;
}

.highlighted-text .icon-squiggle-underline-alt {
  width: 100%;
  height: 50%;
  inset-block-start: auto;
  inset-block-end: -35%;
}

.highlighted-text .icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.highlighted-text.animated .icon path {
  opacity: 1;
  animation: strokeAnimation 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.01s;
}

.highlighted-text[data-style=text] {
  transition: color 0.5s ease;
}

.highlighted-text.animated[data-style=text] {
  color: rgb(var(--color-highlight));
}

.highlighted-text:is([data-style=full_text], [data-style=half_text], [data-style=underline]) {
  background-repeat: no-repeat;
  background-image: linear-gradient(to var(--transform-origin-end), rgb(var(--color-highlight)) 0, rgb(var(--color-background)) 100%), linear-gradient(to var(--transform-origin-end), rgb(var(--color-highlight)) 0, rgb(var(--color-background)) 100%);
  transition: background-size 0.5s ease;
}

.highlighted-text.with-gradient:is([data-style=full_text], [data-style=half_text], [data-style=underline]) {
  background-image: var(--gradient-highlight);
}

.highlighted-text[data-style=full_text] {
  background-position: var(--transform-origin-start) 70%;
  background-size: 0 80%;
}

.highlighted-text.animated[data-style=full_text] {
  background-size: 100% 80%;
}

.highlighted-text[data-style=half_text] {
  background-position: var(--transform-origin-start) 90%;
  background-size: 0 28%;
}

.highlighted-text.animated[data-style=half_text] {
  background-size: 100% 28%;
}

.highlighted-text[data-style=underline] {
  background-size: 0 3px, 0% 80%;
  background-position: var(--transform-origin-start) 90%, var(--transform-origin-start) 50%;
}

.highlighted-text.animated[data-style=underline] {
  background-size: 100% 3px, 0% 80%;
}

.highlighted-text[data-style=marker]:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: -2px;
  inset-inline: -4px;
  background-repeat: no-repeat;
  background-image: linear-gradient(to var(--transform-origin-end), rgb(var(--color-highlight)) 0, rgb(var(--color-highlight)) 100%), linear-gradient(to var(--transform-origin-end), rgb(var(--color-highlight)) 0, rgb(var(--color-highlight)) 100%);
  transition: background-size 0.5s ease;
  background-position: var(--transform-origin-start) 70%;
  background-size: 0 80%;
  transform: rotate(3deg);
}

.highlighted-text.with-gradient[data-style=marker]:before {
  background-image: var(--gradient-highlight);
}

.highlighted-text.animated[data-style=marker]:before {
  background-size: 100% 80%;
}

.highlighted-text[data-style=stencil] {
  -webkit-text-stroke: var(--stencil-stroke-width, 0.02em) currentColor;
  -webkit-text-fill-color: transparent;
}

.section--solid .highlighted-text[data-style=stencil] {
  --stencil-stroke-width: 2px;
  -webkit-text-fill-color: rgb(var(--color-background));
  paint-order: stroke fill;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  .highlighted-text[data-style=text] {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;

    background-image: linear-gradient(
      to var(--transform-origin-start),
      rgb(var(--color-text)),
      rgb(var(--color-text)) 50%,
      rgb(var(--color-highlight)) 50%
    );
    background-size: 200% 100%;
    background-position: var(--transform-origin-end);
    transition: background-position 1.2s cubic-bezier(.19, 1, .22, 1);
  }

  .highlighted-text.animated[data-style=text] {
    background-position: var(--transform-origin-start);
  }

  .highlighted-text.with-gradient[data-style=text] {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-image: var(--gradient-highlight);
    background-position: var(--transform-origin-start) 100%;
    background-size: 0 100%;
    transition: background-size 0.5s ease;
  }

  .highlighted-text.with-gradient.animated[data-style=text] {
    background-size: 100% 100%;
  }

  theme-reveal-text>.highlighted-text.with-gradient[data-style=text] {
    background-image: linear-gradient(rgb(var(--color-text)), rgb(var(--color-text))), var(--gradient-highlight);
    background-position: var(--transform-origin-start) 100%;
    background-size: 100% 100%, 0% 100%;
  }

  theme-reveal-text>.highlighted-text.with-gradient.animated[data-style=text] {
    background-size: 0% 100%, 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .highlighted-text .icon path {
    opacity: 1;
    animation: strokeAnimation forwards;
  }

  .highlighted-text[data-style=text] {
    color: rgb(var(--color-highlight));
  }

  .highlighted-text[data-style=full_text] {
    background-size: 100% 80%;
  }

  .highlighted-text[data-style=half_text] {
    background-size: 100% 28%;
  }

  .highlighted-text[data-style=underline] {
    background-size: 100% 3px, 0% 80%;
  }

  @media (-webkit-min-device-pixel-ratio: 0) {
    .highlighted-text.with-gradient[data-style=text] {
      background-size: 100% 100%;
    }

    theme-reveal-text>.highlighted-text.with-gradient[data-style=text] {
      background-size: 0% 100%, 100% 100%;
    }
  }
}