/* Corporate animated illustrations for text pages */
.prose-with-illu {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 900px) {
  .prose-with-illu {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .illu-panel {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
  }
}

.illu-panel {
  margin: 0;
}

.illu {
  --illu-ink: var(--color-ink);
  --illu-line: var(--color-accent); /* brand blue */
  --illu-brand: var(--color-primary); /* teal */
  --illu-soft: var(--color-accent-soft);
  --illu-brand-soft: color-mix(in srgb, var(--color-primary) 14%, #ffffff);
  --illu-muted: var(--color-border);
  display: block;
  width: 100%;
  max-width: 18rem;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.illu svg {
  display: block;
  width: 100%;
  height: auto;
}

.illu__label {
  padding: 0.65rem 1rem 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

/* Shared stroke language — blue structure + teal accents */
.illu .stroke {
  fill: none;
  stroke: var(--illu-line);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illu .stroke-brand {
  fill: none;
  stroke: var(--illu-brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illu .stroke-ink {
  fill: none;
  stroke: var(--illu-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.illu .fill-soft {
  fill: var(--illu-soft);
}

.illu .fill-brand-soft {
  fill: var(--illu-brand-soft);
}

.illu .fill-line {
  fill: var(--illu-brand);
}

.illu .fill-brand {
  fill: var(--illu-brand);
}

/* Motions */
.illu .float-a {
  animation: illuFloat 4.8s var(--ease) infinite;
}

.illu .float-b {
  animation: illuFloat 5.6s var(--ease) infinite reverse;
  animation-delay: 0.4s;
}

.illu .pulse-soft {
  transform-origin: center;
  animation: illuPulse 3.2s var(--ease) infinite;
}

.illu .draw-loop {
  stroke-dasharray: 64;
  animation: illuDraw 4.5s var(--ease) infinite;
}

.illu .bar-a,
.illu .bar-b,
.illu .bar-c {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: illuBar 3.8s var(--ease) infinite;
}

.illu .bar-b {
  animation-delay: 0.2s;
}

.illu .bar-c {
  animation-delay: 0.4s;
}

.illu .orbit {
  transform-origin: 100px 88px;
  animation: illuOrbit 14s linear infinite;
}

.illu .scan {
  animation: illuScan 3.6s var(--ease) infinite;
}

.illu .check-pop {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: illuCheck 3.8s var(--ease) infinite;
}

@keyframes illuFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes illuPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.7;
    transform: scale(1);
  }
}

@keyframes illuDraw {
  0% {
    stroke-dashoffset: 64;
  }
  40%,
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -64;
  }
}

@keyframes illuBar {
  0%,
  100% {
    transform: scaleY(0.72);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes illuOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes illuScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.7;
  }
}

@keyframes illuCheck {
  0%,
  20% {
    stroke-dashoffset: 24;
  }
  40%,
  75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .illu .float-a,
  .illu .float-b,
  .illu .pulse-soft,
  .illu .draw-loop,
  .illu .bar-a,
  .illu .bar-b,
  .illu .bar-c,
  .illu .orbit,
  .illu .scan,
  .illu .check-pop {
    animation: none !important;
  }

  .illu .draw-loop,
  .illu .check-pop {
    stroke-dashoffset: 0 !important;
  }
}