/* ===========================================================
   Hair swatch visuals — CSS-crafted strand textures
   used in place of product photography across the prototype
   =========================================================== */

.swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--clay);
}

.swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255,255,255,0.10) 0px,
    rgba(255,255,255,0.10) 2px,
    transparent 2px,
    transparent 7px
  );
  mix-blend-mode: overlay;
}

.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,20,16,0) 55%, rgba(28,20,16,0.35) 100%);
}

.swatch-straight { background: linear-gradient(160deg, #2A1B14 0%, #4A2F1F 55%, #6E4126 100%); }
.swatch-wavy     { background: linear-gradient(155deg, #3D2418 0%, #7A4B26 50%, #B5713C 100%); }
.swatch-curly    { background: linear-gradient(150deg, #1C1410 0%, #5A2A27 55%, #8C4A33 100%); }
.swatch-kinky    { background: linear-gradient(150deg, #241A14 0%, #3A2C24 50%, #5A2A27 100%); }
.swatch-blonde   { background: linear-gradient(150deg, #8C6A3A 0%, #C99A4A 55%, #E8C9A8 100%); }
.swatch-bundle   { background: linear-gradient(150deg, #2A1B14 0%, #6E4126 50%, #C99A4A 100%); }

.swatch-curly::before {
  background-image:
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 3px, transparent 3px, transparent 12px);
}

.swatch-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  color: var(--white);
  z-index: 2;
}
.swatch-label .name {
  font-family: var(--font-display);
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}
.swatch-label .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.swatch-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(247,240,230,0.92);
  color: var(--wine);
  padding: 5px 10px;
  border-radius: 100px;
}

/* Strand line animated accents (hero signature element variants) */
.strand-thread {
  stroke-dasharray: 6 10;
  animation: thread-flow 14s linear infinite;
}
@keyframes thread-flow {
  to { stroke-dashoffset: -400; }
}
@media (prefers-reduced-motion: reduce) {
  .strand-thread { animation: none; }
}