/* Shape divider.

   Decorative section divider: a horizontal rule with a small SVG glyph
   (flower / softBurst / etc.) centered in a gap. Used between
   recipe-detail sections. The shape itself is supplied as inline SVG;
   this file owns the rule-frame and shape sizing/animation.

   Variants: default (static), `--spin` (slow continuous rotation).

   Used in: recipe-detail page section transitions.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {
/* ==============================================
   SHAPE DIVIDER — flower / softBurst / etc.
   Used between recipe-detail sections.
   ============================================== */

.shape-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  color: var(--md-on-surface-variant);
}

.shape-divider__rule {
  flex: 1;
  height: 1px;
  background: var(--md-border-muted);
}

.shape-divider__shape {
  fill: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

@keyframes shape-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.shape-divider__shape--spin {
  animation: shape-spin 12s linear infinite;
  transform-origin: center;
}
}