/* Freshcut — barbershop theme.
   Barber-pole red + mint + porcelain for salons and barbers:
   cuts, color, shaves, styling chairs. A barber-pole divider
   band and a walk-ins marquee. All self-hosted; nothing here
   moves without content. */

html[data-theme="freshcut"] {
  --brand: #b34a5e;
  --brand-deep: #2c1a20;
  --brand-soft: #f8e8ec;
  --hero-bg: #201318;
  --hero-ink: #f8eef1;
  --accent: #7fc6b5;
  --pole: #b34a5e;
  --mint: #7fc6b5;
  --porcelain: #f6f0ea;
}

html[data-theme="freshcut"] .hero {
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(127 198 181 / 0.16), transparent 60%),
    var(--hero-bg);
}

/* --- barber-pole divider ---------------------------------------------------------- */
.pole-band {
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    var(--pole) 0 14px,
    var(--porcelain) 14px 28px,
    var(--mint) 28px 42px,
    var(--porcelain) 42px 56px
  );
  border-block: 1px solid rgb(179 74 94 / 0.5);
}

/* --- walk-ins marquee --------------------------------------------------------------- */
.walkins {
  overflow: hidden;
  background: var(--brand-deep);
  color: var(--porcelain);
  border-block: 1px solid var(--pole);
  padding-block: 0.55rem;
}
.walkins-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: walkins-scroll 26s linear infinite;
  will-change: transform;
}
.walkins-track span {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  white-space: nowrap;
}
@keyframes walkins-scroll {
  to { transform: translateX(-50%); }
}

html[data-theme="freshcut"] .service {
  border-color: rgb(179 74 94 / 0.4);
  background: linear-gradient(180deg, var(--brand-soft), transparent 140%);
}

html[data-theme="freshcut"] .site-footer {
  background: var(--brand-deep);
  color: var(--hero-ink);
}

@media (prefers-reduced-motion: reduce) {
  .walkins-track { animation: none; }
}