.yellow {
  --bg-slide: #fff8e5;
  --bg-slide-hover: #b79639;
}
.pink {
  --bg-slide: #fbf0f9;
  --bg-slide-hover: #be3ba6;
}
.black {
  --bg-slide: #ececec;
  --bg-slide-hover: #898585;
}
.green {
  --bg-slide: #dbf9db;
  --bg-slide-hover: #328519;
}
.blue {
  --bg-slide: #effafb;
  --bg-slide-hover: #1694d4;
}
.underline_animate {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: 3.5s infinite forwards dash;
}
mark {
  --lightness: 90%;
  --highlighted: 1;
  --highlight: hsl(var(--hue, 45) 80% var(--lightness));
  background: 0 0;
}
mark span {
  background: linear-gradient(
      120deg,
      var(--highlight, #add8e6) 50%,
      transparent 50%
    )
    110% 0/200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 1s;
}
@supports (animation-timeline: view()) {
  mark {
    --highlighted: 0;
    animation: steps(1) both highlight;
    animation-timeline: view();
    animation-range: entry 100% cover 10%;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes highlight {
  to {
    --highlighted: 1;
  }
}
::view-transition-new(root) {
  animation: 1s grow;
}
::view-transition-old(root) {
  animation: none;
}
@keyframes grow {
  0% {
    clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
  }
  100% {
    clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
  }
}