/* 05-shapes.css — Quiet-Signal-Deko-Formen + geometrische Divider
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/ fuer die Zuordnung Sektion -> Datei. */
/* 7.5 Quiet Signal Decorative Shapes */
.qs-shape-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.qs-shape {
  position: absolute;
  opacity: 0.25;
  animation: qs-float 25s ease-in-out infinite alternate;
}
.qs-pill {
  border-radius: 999px;
  background: var(--mist);
}
.qs-circle {
  border-radius: 50%;
  background: var(--electric-soft);
}
@keyframes qs-float {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(60px, -40px) rotate(45deg); }
}

/* Geometric Dividers */
.geom-divider {
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.qs-pill-divider {
  position: absolute;
  width: 120%;
  height: 120px;
  border-radius: 50% / 100% 100% 0 0;
  left: -10%;
  bottom: 0;
  background: var(--paper);
}
.qs-pill-divider.mist { background: var(--mist); }
.qs-pill-divider.teal { background: var(--teal); }
.qs-pill-divider.apricot { background: var(--apricot); }
.qs-pill-divider.electric { background: var(--electric); }
.qs-pill-divider.offset {
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  top: 0;
  bottom: auto;
}