/* fx.css · draw/shape-morph, a blob of colour morphs between shapes as you scroll · owner: Lizzy East · all rights reserved */

/* Two layers of colour, each cut by a 12-point clip-path polygon. Every shape has
   the same twelve points, so the browser can move each point smoothly from one
   shape to the next. The scroll drives it (a CSS view timeline): a cut square as
   the block comes up, a star as it crosses the middle, a round seal as it leaves.
   Where scroll timelines are missing, or motion is off, it is simply the final
   shape: the round seal on its starburst. Decoration only: aria-hidden. */
[data-fx~="draw/shape-morph"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (min-width: 48rem) {
  [data-fx~="draw/shape-morph"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
[data-fx~="draw/shape-morph"] [data-fx-shape] {
  display: grid;
  width: min(100%, var(--fx-shape-size, 30rem));
  aspect-ratio: 1;
  justify-self: center;
  overflow: clip;
}
[data-fx~="draw/shape-morph"] [data-fx-shape] > * { grid-area: 1 / 1; }
[data-fx~="draw/shape-morph"] [data-fx-shape] > :first-child {
  background: var(--fx-shape-echo, #cfff3e);
  clip-path: polygon(61.9% 5.6%, 71.2% 28.8%, 94.4% 38.1%, 79% 57.8%, 82.5% 82.5%, 57.8% 79%, 38.1% 94.4%, 28.8% 71.2%, 5.6% 61.9%, 21% 42.2%, 17.5% 17.5%, 42.2% 21%);
}
[data-fx~="draw/shape-morph"] [data-fx-shape] > :last-child {
  margin: 9%;
  background: var(--fx-shape-fill, linear-gradient(145deg, #2340ff, #7a3cff));
  clip-path: polygon(50% 3%, 73.5% 9.3%, 90.7% 26.5%, 97% 50%, 90.7% 73.5%, 73.5% 90.7%, 50% 97%, 26.5% 90.7%, 9.3% 73.5%, 3% 50%, 9.3% 26.5%, 26.5% 9.3%);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="draw/shape-morph"] [data-fx-shape] > :first-child {
      animation: fx-shape-echo linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    html:not(.fx-still) [data-fx~="draw/shape-morph"] [data-fx-shape] > :last-child {
      animation: fx-shape-blob linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* A cut square, a six-point star, a round seal: twelve points each. */
@keyframes fx-shape-blob {
  0%, 14% {
    clip-path: polygon(50% 8%, 74.2% 8%, 92% 25.8%, 92% 50%, 92% 74.2%, 74.2% 92%, 50% 92%, 25.8% 92%, 8% 74.2%, 8% 50%, 8% 25.8%, 25.8% 8%);
    transform: rotate(-45deg);
  }
  50% {
    clip-path: polygon(50% 2%, 62% 29.2%, 91.6% 26%, 74% 50%, 91.6% 74%, 62% 70.8%, 50% 98%, 38% 70.8%, 8.4% 74%, 26% 50%, 8.4% 26%, 38% 29.2%);
    transform: rotate(-15deg);
  }
  86%, 100% {
    clip-path: polygon(50% 3%, 73.5% 9.3%, 90.7% 26.5%, 97% 50%, 90.7% 73.5%, 73.5% 90.7%, 50% 97%, 26.5% 90.7%, 9.3% 73.5%, 3% 50%, 9.3% 26.5%, 26.5% 9.3%);
    transform: rotate(0deg);
  }
}
@keyframes fx-shape-echo {
  0%, 14% {
    clip-path: polygon(50% 12%, 69% 17.1%, 82.9% 31%, 88% 50%, 82.9% 69%, 69% 82.9%, 50% 88%, 31% 82.9%, 17.1% 69%, 12% 50%, 17.1% 31%, 31% 17.1%);
    transform: translate(6%, 6%);
  }
  50% {
    clip-path: polygon(50% 8%, 74.2% 8%, 92% 25.8%, 92% 50%, 92% 74.2%, 74.2% 92%, 50% 92%, 25.8% 92%, 8% 74.2%, 8% 50%, 8% 25.8%, 25.8% 8%);
    transform: translate(4%, -4%) rotate(20deg);
  }
  86%, 100% {
    clip-path: polygon(61.9% 5.6%, 71.2% 28.8%, 94.4% 38.1%, 79% 57.8%, 82.5% 82.5%, 57.8% 79%, 38.1% 94.4%, 28.8% 71.2%, 5.6% 61.9%, 21% 42.2%, 17.5% 17.5%, 42.2% 21%);
    transform: translate(0%, 0%) rotate(0deg);
  }
}