/* ──────────────────────────────────────────────────────────────────
   GLYPHS · sistema marca-flor Stillova (F1 18-may, council GO unánime)

   La flor es la unidad económica del producto ("te quedan 3 flores").
   Tener un símbolo visual consistente refuerza:
   - counter del header (1 gratis / X flores este mes)
   - badge premium ("recomendado") en paywall
   - divider editorial entre secciones
   - spinner loading (screen-loading + cualquier estado pendiente)

   Variante: Hexapétala — 6 puntos en órbita + núcleo. Lectura múltiple
   (flor + rosa-de-vientos + mandala). Distintiva de la categoría.

   Uso: <span class="flower-glyph"><svg viewBox="0 0 24 24"><use href="#flower-hex"/></svg></span>
   Hereda color con currentColor.
   ────────────────────────────────────────────────────────────────── */

.flower-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: currentColor;
  line-height: 1;
  flex-shrink: 0;
}
.flower-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  pointer-events: none;
}

/* Tamaños canónicos */
.flower-glyph.is-sm { width: 14px; height: 14px; }
.flower-glyph.is-md { width: 18px; height: 18px; }
.flower-glyph.is-lg { width: 28px; height: 28px; }
.flower-glyph.is-xl { width: 48px; height: 48px; }
.flower-glyph.is-hero { width: 80px; height: 80px; }

/* ── Spinner (loading) ─────────────────────────────────────────────
   Rotación lenta + opacity-ladder fija en los 6 puntos exteriores.
   Mientras gira, el "punto opaco" parece moverse → ilusión de
   respiración. Núcleo central siempre visible (continuidad).
   ──────────────────────────────────────────────────────────────── */
.flower-glyph.is-spinner svg {
  animation: flower-rotate 3.6s linear infinite;
  transform-origin: 50% 50%;
}
.flower-glyph.is-spinner circle:nth-of-type(1) { opacity: 1; }
.flower-glyph.is-spinner circle:nth-of-type(2) { opacity: 0.75; }
.flower-glyph.is-spinner circle:nth-of-type(3) { opacity: 0.55; }
.flower-glyph.is-spinner circle:nth-of-type(4) { opacity: 0.4; }
.flower-glyph.is-spinner circle:nth-of-type(5) { opacity: 0.3; }
.flower-glyph.is-spinner circle:nth-of-type(6) { opacity: 0.2; }
.flower-glyph.is-spinner circle:nth-of-type(7) { opacity: 1; }

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

@media (prefers-reduced-motion: reduce) {
  .flower-glyph.is-spinner svg {
    animation: flower-fade 2s ease-in-out infinite alternate;
  }
  @keyframes flower-fade {
    from { opacity: 0.5; }
    to   { opacity: 1; }
  }
}

/* ── Divider editorial con flor centrada ───────────────────────────
   Reemplazo elegante de <hr> en secciones premium (paywall, profile,
   post-session). La flor queda como sello entre líneas hairline. */
.flower-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px auto;
  width: 100%;
  max-width: 420px;
  color: var(--muted, #6B5544);
  opacity: 0.5;
}
.flower-divider::before,
.flower-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.flower-divider .flower-glyph {
  width: 18px;
  height: 18px;
}

/* ── Badge premium ("recomendado") ────────────────────────────────
   La flor reemplaza/acompaña a stickers genéricos. Más sutil que
   "MÁS POPULAR" en mayúsculas. */
.flower-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft, #E8CBB8);
  color: var(--accent, #A85A3D);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.flower-badge .flower-glyph {
  width: 12px;
  height: 12px;
}

/* ── Motif: Constelación (F4 18-may) ─────────────────────────────
   Empty state library: puntos dispersos con líneas hairline
   conectando algunos. Concepto: tu colección crece como constelación.
   Cuando se agreguen meditaciones, los puntos eventualmente se
   "conectarán" más (todo opcional, evolución futura). */
.lib-constellation {
  display: block;
  width: 200px;
  max-width: 80%;
  margin: 8px auto 22px;
  color: var(--accent, #A85A3D);
}
.lib-constellation svg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
}
.lib-empty-constellation .profile-guest-title {
  margin-top: 6px;
}

/* Animación sutil de "respiración" en los puntos —
   cada punto pulsa con opacity en cascada. */
.lib-constellation circle {
  animation: constellation-pulse 4.2s ease-in-out infinite;
}
.lib-constellation circle:nth-of-type(1) { animation-delay: 0s; }
.lib-constellation circle:nth-of-type(2) { animation-delay: 0.45s; }
.lib-constellation circle:nth-of-type(3) { animation-delay: 0.9s; }
.lib-constellation circle:nth-of-type(4) { animation-delay: 1.35s; }
.lib-constellation circle:nth-of-type(5) { animation-delay: 1.8s; }
.lib-constellation circle:nth-of-type(6) { animation-delay: 2.25s; }
.lib-constellation circle:nth-of-type(7) { animation-delay: 2.7s; }

@keyframes constellation-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-constellation circle { animation: none; }
}