[data-dotbg] {
  isolation: isolate;
  position: relative;
}
.dotbg {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.dotbg-dot {
  animation: popout var(--dot-out-duration) linear both;
  background: var(--dot-color, var(--color-dot));
  border-radius: var(--dot-shape);
  height: var(--dot-size);
  left: var(--dot-left);
  position: absolute;
  rotate: var(--dot-rotate, 0deg);
  top: var(--dot-top);
  transform: scale(0);
  width: var(--dot-size);
}
.dotbg-dot--mask {
  border-radius: 0;
  -webkit-mask: var(--dot-mask) center / contain no-repeat;
  mask: var(--dot-mask) center / contain no-repeat;
}
.dotbg.is-in .dotbg-dot {
  animation: popin var(--dot-pop-duration) var(--ease-pop) var(--dot-delay) both;
}
.blob {
  animation: blob-spin var(--blob-period) linear infinite;
  border-radius: var(--blob-shape, var(--blob-shape-1));
  overflow: hidden;
  position: relative;
}
.blob--ccw {
  animation-direction: reverse;
}
.blob--small {
  animation-duration: var(--blob-period-small);
}
.blob--shape-2 {
  --blob-shape: var(--blob-shape-2);
}
.blob--shape-3 {
  --blob-shape: var(--blob-shape-3);
}
.blob > img {
  height: var(--blob-cover);
  inset: calc((100% - var(--blob-cover)) / 2);
  max-width: none;
  object-fit: cover;
  position: absolute;
  width: var(--blob-cover);
  animation: blob-spin var(--blob-period) linear infinite reverse;
}
.blob--ccw > img {
  animation-direction: normal;
}
.blob--small > img {
  animation-duration: var(--blob-period-small);
}
.mark-dot::before {
  background: var(--color-mark);
  border-radius: var(--dot-shape-1);
  content: "";
  display: inline-block;
  height: 0.6em;
  margin-right: 0.5em;
  vertical-align: 0.05em;
  width: 0.6em;
}
html.has-reveal .line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
html.has-reveal .line {
  display: inline-block;
  transform: translateY(calc(100% + 1px));
}
html.has-reveal h2.is-in .line {
  transition: transform var(--line-reveal-duration) var(--ease-expo);
  transform: none;
}
html.has-reveal h2 + p {
  opacity: 0;
}
html.has-reveal h2.is-in + p {
  opacity: 1;
  transition: opacity var(--line-reveal-duration) var(--ease-expo)
    var(--line-reveal-stagger);
}
@keyframes popin {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes popout {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
@keyframes blob-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .blob,
  .blob > img,
  .dotbg-dot,
  .dotbg.is-in .dotbg-dot {
    animation: none;
  }
  .dotbg-dot {
    transform: scale(1);
  }
}