.pure-css {
  --headline-color: rgb(255, 255, 237);
  --glow-offset: 0.5vw;
  --blink-off:
    drop-shadow(0 0 0 var(--headline-color)) drop-shadow(0px 0px 0 var(--headline-color)) drop-shadow(0 0 0 var(--headline-color));
  --blink-on:
    drop-shadow(var(--glow-offset) var(--glow-offset) var(--glow-offset) var(--headline-color)) drop-shadow(0px 0px var(--glow-offset) var(--headline-color)) drop-shadow(calc(-1 * var(--glow-offset)) calc(-1 * var(--glow-offset)) var(--glow-offset) var(--headline-color));

  view-timeline-name: --pureCssTimeline;
  view-timeline-axis: block;

  background-color: var(--background-color);
  height: 300vh;

  .pure-css-inner {
    height: 150vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.pure-css-scroll-text {
  display: block;
  position: absolute;
  top: calc(2ch - 1lh / 2);
  right: 2ch;
  font-family: 'Lobster';
  font-size: clamp(20px, 3vw, 80px);
  color: var(--headline-color);
}

.this-is-wrapper {
  position: sticky;
  top: 30vh;
  margin-left: 15vw;
}

.this-is-headline {
  font-family: 'Lobster';
  font-size: 10vw;
  text-shadow: -3px 0px 3px var(--headline-color), 0px -3px 3px var(--headline-color), 3px 0px 3px var(--headline-color), 0px 3px 3px var(--headline-color);
  color: var(--background-color);
}

.pure-css-svg-wrapper {
  transform: translateY(50vh);
  left: 0;
  width: 100%;
  --should-blink: true;

  animation-timeline: --pureCssTimeline;
  animation-name: pureCssTransformAnimation;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-duration: 1ms;
  animation-range-start: entry 0%;
  animation-range-end: exit 100%;
}

#PureCssSVG {
  filter: var(--blink-on);

  animation-name: purecssblink;
  animation-duration: 0.75s;
  animation-delay: 1.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

#PureCssPath {
  fill-rule: evenodd;
  fill: none;
  stroke: var(--headline-color);
  stroke-linecap: round;
  stroke-width: calc(var(--glow-offset) / 5);
}

@container style(--should-blink: false) {
  #PureCssSVG {
    animation-name: none;
  }
}

@keyframes pureCssTransformAnimation {
  0% {
    transform: translateY(50vh);
    --should-blink: true;
  }
  
  40% {
    transform: translateY(50vh);
    --should-blink: true;
  }

  50% {
    transform: translateY(20vh) scale3d(0.9, 0.9, 1);
    position: static;
    --should-blink: true;
  }

  60% {
    transform: translateY(20vh) scale3d(0.9, 0.9, 1);
    position: fixed;
    top: 6vh;
    opacity: 1;
    --should-blink: true;
  }
  
  70% {
    transform: translateY(20vh) scale3d(1.7, 1.7, 1);
    position: fixed;
    top: 6vh;
    opacity: 0.2;
    --should-blink: false;
  }
  
  80% {
    transform: translateY(20vh) scale3d(2.5, 2.5, 1);
    position: fixed;
    top: 6vh;
    opacity: 0;
    visibility: visible;
    --should-blink: false;
  }
  
  85% {
    transform: translateY(20vh) scale3d(2.5, 2.5, 1);
    opacity: 0;
    visibility: visible;
    --should-blink: false;
  }
  
  100% {
    transform: translateY(20vh) scale3d(0.9, 0.9, 1);
    opacity: 0;
    position: static;
    visibility: hidden;
    --should-blink: false;
  }
}

@keyframes purecssblink {
  0% {
    filter: var(--blink-off);
    opacity: 0;
  }

  5% {
    filter: var(--blink-on);
    opacity: 1;
  }

  10% {
    filter: var(--blink-on);
    opacity: 1;
  }

  13% {
    filter: var(--blink-off);
    opacity: 0;
  }

  18% {
    filter: var(--blink-on);
    opacity: 1;
  }

  25% {
    filter: var(--blink-on);
    opacity: 1;
  }

  30% {
    filter: var(--blink-off);
    opacity: 0;
  }

  32% {
    filter: var(--blink-on);
    opacity: 1;
  }

  35% {
    filter: var(--blink-on);
    opacity: 1;
  }

  37% {
    filter: var(--blink-off);
    opacity: 0;
  }

  45% {
    filter: var(--blink-on);
    opacity: 1;
  }

  100% {
    filter: var(--blink-on);
    opacity: 1;
  }
}