/* ============================================================
   SUVINAY CREATIONS — YARN SYSTEM (visual styling)
   Slender gold thread used to stitch the hero to the intro strip.
   Same path language as the product-card underline: one line, a
   small curl at the end. Pairs with js/yarn.js.
   ============================================================ */

.yarn-path path {
  fill: none;
  stroke: var(--brand-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.yarn-path.is-gold path { stroke: var(--brand-gold); }
.yarn-path.is-blush path { stroke: var(--brand-blush); }

.yarn-end {
  opacity: 0;
  animation: yarn-fade-in 0.6s ease 1.9s forwards;
}

@keyframes yarn-fade-in {
  to { opacity: 1; }
}

.yarn-seam {
  position: relative;
  height: clamp(48px, 8vw, 84px);
  overflow: visible;
}

.yarn-seam .yarn-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .yarn-end {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 560px) {
  .yarn-seam { height: 48px; }
}