.pine-notion-target {
  position: relative;
  display: inline-block;
  --pine-notion-color: #ff4fd8;
  --pine-notion-stroke-width: 3px;
  --pine-notion-duration: 800ms;
}

.pine-notion-target::after,
.pine-notion-target::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.pine-notion-style-underline::after {
  bottom: -0.1em;
  border-bottom: var(--pine-notion-stroke-width) solid var(--pine-notion-color);
}

.pine-notion-style-overline::after {
  top: -0.1em;
  border-top: var(--pine-notion-stroke-width) solid var(--pine-notion-color);
}

.pine-notion-style-mark-decoration::after {
  top: 100%;
  left: 0;
  width: 100%;
  /* Match SVG viewBox aspect (~491:15) so stroke scales with height, not squashed by width. */
  height: clamp(12px, calc(var(--pine-notion-stroke-width) * 5), 72px);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  border: none;
  background-color: var(--pine-notion-color);
  -webkit-mask-image: url("../images/mark-decoration-5.svg");
  mask-image: url("../images/mark-decoration-5.svg");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  /* auto width keeps aspect ratio; 100% height = stroke thickness tracks slider (vs 100% 100% hairline on wide headings). */
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
  z-index: -1;
}

.pine-notion-style-double::after,
.pine-notion-style-double::before {
  bottom: -0.1em;
  border-bottom: var(--pine-notion-stroke-width) solid var(--pine-notion-color);
}

.pine-notion-style-double::before {
  bottom: calc(-0.1em - var(--pine-notion-stroke-width) - 2px);
}

.pine-notion-style-highlight::after {
  top: 0.1em;
  bottom: 0.1em;
  width: 100%;
  height: auto;
  background: color-mix(in srgb, var(--pine-notion-color) 35%, transparent);
  z-index: -1;
}

.pine-notion-style-circle::after {
  display: none;
}

.pine-notion-style-circle::before {
  display: none;
}

.pine-notion-circle-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(var(--pine-notion-circle-rotation, -9deg));
  overflow: visible;
}

.pine-notion-circle-path {
  fill: none;
  stroke: var(--pine-notion-color);
  stroke-width: max(1px, var(--pine-notion-stroke-width));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--pine-notion-circle-length, 320);
  stroke-dashoffset: var(--pine-notion-circle-length, 320);
}

.pine-notion-style-circle.pine-notion-active .pine-notion-circle-path {
  animation: pine-notion-circle-draw var(--pine-notion-duration) cubic-bezier(0.35, 0.05, 0.15, 1) forwards;
}

.pine-notion-target:not(.pine-notion-style-circle):not(.pine-notion-style-mark-decoration).pine-notion-active::after,
.pine-notion-target:not(.pine-notion-style-circle):not(.pine-notion-style-mark-decoration).pine-notion-active::before {
  animation: pine-notion-draw var(--pine-notion-duration) ease-out forwards;
}

.pine-notion-target.pine-notion-style-mark-decoration.pine-notion-active::after {
  animation: pine-notion-draw-centered var(--pine-notion-duration) ease-out forwards;
}

.pine-notion-target:not(.pine-notion-style-circle).pine-notion-loop.pine-notion-active::after,
.pine-notion-target:not(.pine-notion-style-circle).pine-notion-loop.pine-notion-active::before {
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes pine-notion-draw {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes pine-notion-draw-centered {
  0% {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
  }
}

@keyframes pine-notion-circle-draw {
  0% {
    stroke-dashoffset: var(--pine-notion-circle-length, 320);
  }
  100% {
    stroke-dashoffset: 0;
  }
}