.contour-motion-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted-ink);
}

.contour-motion-toggle .contour-motion-play,
.contour-motion-toggle[data-paused="true"] .contour-motion-pause { display: none; }
.contour-motion-toggle[data-paused="true"] .contour-motion-play { display: block; }

.contour-card {
  --contour-light: var(--brand);
  --contour-tint: var(--blue-light);
  --contour-x: 50%;
  --contour-y: 70%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.contour-card-dark {
  --contour-light: var(--blue-light);
  --contour-tint: var(--on-brand);
}

.contour-card > * { position: relative; z-index: 1; }

.contour-card::before,
.contour-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.contour-card::before {
  inset: -12%;
  background:
    radial-gradient(ellipse at 20% 85%, color-mix(in oklch, var(--contour-light) 14%, transparent), transparent 62%),
    radial-gradient(ellipse at 85% 25%, color-mix(in oklch, var(--contour-tint) 10%, transparent), transparent 50%),
    repeating-radial-gradient(ellipse at 10% 90%, transparent 0 14px, color-mix(in oklch, var(--contour-light) 7%, transparent) 15px 16px, transparent 17px 32px);
  mask-image: linear-gradient(180deg, transparent, #000 75%);
  animation: contour-flow 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.contour-card:nth-child(2n)::before { animation-delay: -8s; }
.contour-card:nth-child(3n)::before { animation-delay: -16s; }
[data-contour-section][data-motion-state="playing"] .contour-card[data-in-view="true"]::before { animation-play-state: running; }

.contour-card::after {
  inset: 0;
  opacity: 0;
  background: radial-gradient(280px circle at var(--contour-x) var(--contour-y), color-mix(in oklch, var(--contour-light) 10%, transparent), transparent 75%);
  transition: opacity 180ms ease;
}

@keyframes contour-flow {
  from { transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(1.04); }
  to { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.08); }
}

@media (hover: hover) and (pointer: fine) {
  [data-contour-section][data-motion-state="playing"] .contour-card:hover::after { opacity: 1; }
  .contour-motion-toggle:hover { background: var(--paper-blue); color: var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
  .contour-card::before { animation: none; }
  .contour-card::after { display: none; }
  .contour-motion-toggle { display: none; }
}

.contour-motion-toggle[hidden] { display: none; }
.contour-motion-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }

[data-contour-section] [data-motion-illustration] * { animation-play-state: paused; }
[data-contour-section][data-motion-state="playing"] [data-motion-illustration][data-in-view="true"] * { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  [data-motion-illustration] * { animation: none !important; transition: none !important; }
}