変化する紋

/* 変化する紋: 同じ頂点数(24点)のpolygon同士なので
   clip-pathが滑らかに補間される。色相は@propertyで型付けして回す */

@property --cm-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.work-clip-morph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(242, 165, 184, 0.08), transparent 70%),
    #0b0c11;
}

/* 円相（背景の輪） */
.cm-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vmin, 78%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: conic-gradient(from 210deg, #000 0 78%, transparent 82% 100%);
  mask: conic-gradient(from 210deg, #000 0 78%, transparent 82% 100%);
}

.cm-crest {
  width: min(52vmin, 58%);
  aspect-ratio: 1;
  background: conic-gradient(from calc(var(--cm-hue) * -1),
    #f2a5b8, #b98cf0, #7cc7f2, #9df0c8, #f2dca5, #f2a5b8);
  filter:
    hue-rotate(var(--cm-hue))
    drop-shadow(0 0 26px rgba(242, 165, 184, 0.35));
  animation:
    cm-morph 16s cubic-bezier(0.65, 0, 0.35, 1) infinite,
    cm-hue 16s linear infinite;
  clip-path: polygon(50.0% 4.0%, 61.9% 5.6%, 73.0% 10.2%, 82.5% 17.5%, 89.8% 27.0%, 94.4% 38.1%, 96.0% 50.0%, 94.4% 61.9%, 89.8% 73.0%, 82.5% 82.5%, 73.0% 89.8%, 61.9% 94.4%, 50.0% 96.0%, 38.1% 94.4%, 27.0% 89.8%, 17.5% 82.5%, 10.2% 73.0%, 5.6% 61.9%, 4.0% 50.0%, 5.6% 38.1%, 10.2% 27.0%, 17.5% 17.5%, 27.0% 10.2%, 38.1% 5.6%);
}

@keyframes cm-hue {
  to { --cm-hue: 360deg; }
}

@keyframes cm-morph {
  /* 蛇の目（円） */
  0%, 20%, 100% {
    clip-path: polygon(50.0% 4.0%, 61.9% 5.6%, 73.0% 10.2%, 82.5% 17.5%, 89.8% 27.0%, 94.4% 38.1%, 96.0% 50.0%, 94.4% 61.9%, 89.8% 73.0%, 82.5% 82.5%, 73.0% 89.8%, 61.9% 94.4%, 50.0% 96.0%, 38.1% 94.4%, 27.0% 89.8%, 17.5% 82.5%, 10.2% 73.0%, 5.6% 61.9%, 4.0% 50.0%, 5.6% 38.1%, 10.2% 27.0%, 17.5% 17.5%, 27.0% 10.2%, 38.1% 5.6%);
  }

  /* 花紋 */
  25%, 45% {
    clip-path: polygon(50.0% 20.0%, 62.2% 4.6%, 65.0% 24.0%, 83.2% 16.8%, 76.0% 35.0%, 95.4% 37.8%, 80.0% 50.0%, 95.4% 62.2%, 76.0% 65.0%, 83.2% 83.2%, 65.0% 76.0%, 62.2% 95.4%, 50.0% 80.0%, 37.8% 95.4%, 35.0% 76.0%, 16.8% 83.2%, 24.0% 65.0%, 4.6% 62.2%, 20.0% 50.0%, 4.6% 37.8%, 24.0% 35.0%, 16.8% 16.8%, 35.0% 24.0%, 37.8% 4.6%);
  }

  /* 星紋 */
  50%, 70% {
    clip-path: polygon(50.0% 2.0%, 56.2% 26.8%, 62.0% 29.2%, 83.9% 16.1%, 70.8% 38.0%, 73.2% 43.8%, 98.0% 50.0%, 73.2% 56.2%, 70.8% 62.0%, 83.9% 83.9%, 62.0% 70.8%, 56.2% 73.2%, 50.0% 98.0%, 43.8% 73.2%, 38.0% 70.8%, 16.1% 83.9%, 29.2% 62.0%, 26.8% 56.2%, 2.0% 50.0%, 26.8% 43.8%, 29.2% 38.0%, 16.1% 16.1%, 38.0% 29.2%, 43.8% 26.8%);
  }

  /* 亀甲風 */
  75%, 95% {
    clip-path: polygon(50.0% 4.0%, 58.8% 17.2%, 61.0% 30.9%, 74.0% 26.0%, 89.8% 27.0%, 82.8% 41.2%, 72.0% 50.0%, 82.8% 58.8%, 89.8% 73.0%, 74.0% 74.0%, 61.0% 69.1%, 58.8% 82.8%, 50.0% 96.0%, 41.2% 82.8%, 39.0% 69.1%, 26.0% 74.0%, 10.2% 73.0%, 17.2% 58.8%, 28.0% 50.0%, 17.2% 41.2%, 10.2% 27.0%, 26.0% 26.0%, 39.0% 30.9%, 41.2% 17.2%);
  }
}

/* 動きへの配慮: 停止し、CSSのみのチェックボックスでオプトイン再生 */
@media (prefers-reduced-motion: reduce) {
  .work-clip-morph * {
    animation-play-state: paused !important;
  }

  .work-clip-morph .motion-optin {
    display: inline-flex;
  }

  .work-clip-morph:has(.motion-optin input:checked) * {
    animation-play-state: running !important;
  }
}