/* decorative.css — elementos decorativos Pontos e Contos
 *
 * Sistema visual dos SVGs decorativos:
 *   stroke: terracota da identidade (#9D552E)
 *   fill: none
 *   stroke-width: ~1.4 (1.2–1.8)
 *   linecap/linejoin: round
 *
 * Animações:
 *   - .pc-dec-draw  → traço "desenhando" (stroke-dasharray/dashoffset)
 *   - .pc-dec-fade  → fade + translateY(5px)
 *   Disparam quando o elemento entra no viewport (.pc-dec-in-view).
 *   prefers-reduced-motion: desliga tudo.
 */

.pc-dec {
  display: inline-block;
  line-height: 0;
  color: var(--pc-dec-color, #9D552E); /* terracota Pontos e Contos */
}

.pc-dec svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-dec[data-dec-color] {
  color: var(--pc-dec-color);
}

/* ── animação de desenho (fios/pontos) ─────────────────────────── */
.pc-dec-draw svg path,
.pc-dec-draw svg circle {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.pc-dec-draw.pc-dec-in-view svg path,
.pc-dec-draw.pc-dec-in-view svg circle {
  animation: pc-dec-draw 1.2s ease-out forwards;
}
@keyframes pc-dec-draw {
  to { stroke-dashoffset: 0; }
}

/* ── animação fade + translateY (flores/igreja/agulha) ─────────── */
.pc-dec-fade svg {
  opacity: 0;
  transform: translateY(5px);
}
.pc-dec-fade.pc-dec-in-view svg {
  animation: pc-dec-fade 0.9s ease-out forwards;
}
@keyframes pc-dec-fade {
  to { opacity: 1; transform: translateY(0); }
}

/* ── prefers-reduced-motion: sem animação, tudo visível ────────── */
@media (prefers-reduced-motion: reduce) {
  .pc-dec-draw svg path,
  .pc-dec-draw svg circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .pc-dec-fade svg {
    opacity: 1;
    transform: none;
  }
  .pc-dec-draw.pc-dec-in-view svg path,
  .pc-dec-draw.pc-dec-in-view svg circle,
  .pc-dec-fade.pc-dec-in-view svg {
    animation: none;
  }
}