/* =========================================================
   Brunettes With Brushes: motion + before/after sliders
   Motion only runs when <html> has .bwb-motion (added in <head>,
   skipped for visitors whose device asks for reduced motion).
   ========================================================= */

/* 1. Paint-roller reveal: three cream strokes roll up off the hero photo */
.roller-cover { display: none; }
/* pin all three hero pieces to their cells, so the cover can share the photo's cell */
.bwb-motion .hero-grid > .hero-copy { grid-column: 1; grid-row: 1; }
.bwb-motion .hero-grid > .hero-media, .bwb-motion .roller-cover { grid-column: 2; grid-row: 1; }
.bwb-motion .roller-cover {
  --bleed: calc((100vw - min(var(--container), 100vw)) / 2 + clamp(20px, 4vw, 40px));
  display: grid; grid-template-columns: repeat(3, 1fr); align-self: stretch;
  margin-right: calc(-1 * var(--bleed));   /* same bleed as the photo */
  position: relative; z-index: 1; overflow: hidden; pointer-events: none;
}
.bwb-motion .roller-cover i {
  position: relative; margin-inline: -1px; background: var(--cream);
  animation: bwb-roll 1.05s cubic-bezier(.62,.04,.3,1) both paused;
}
.bwb-motion .roller-cover i::after {   /* soft, feathered roller edge */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  background: linear-gradient(var(--cream), rgba(247,241,235,.55) 55%, rgba(247,241,235,0));
}
.bwb-motion .roller-cover i:nth-child(2) { animation-delay: .17s; }
.bwb-motion .roller-cover i:nth-child(3) { animation-delay: .34s; }
.bwb-motion .roller-cover.go i { animation-play-state: running; }
@keyframes bwb-roll { to { transform: translateY(calc(-100% - 24px)); } }
@media (max-width: 900px) {
  .bwb-motion .hero-grid > .hero-media, .bwb-motion .roller-cover { grid-column: 1; grid-row: 2; }
  .bwb-motion .roller-cover { margin-right: 0; border-radius: var(--radius); }
}

/* 2. Brush strokes under headings paint themselves in */
.swash { display: block; overflow: visible; }
.bwb-motion .swash path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1) .12s; }
.bwb-motion .swash.is-drawn path { stroke-dashoffset: 0; }

/* 3. Gentle fade-ins as content scrolls into view */
.bwb-motion .bwb-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s ease var(--d, 0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.bwb-motion .bwb-reveal.is-in { opacity: 1; transform: none; }

/* 4. Before/after slider */
.ba-slider { margin: 0 auto; max-width: 980px; }
.ba-frame {
  position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--radius);
  box-shadow: var(--shadow-soft); background: var(--blush);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 14px rgba(17,17,17,.35); pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid #fff; box-shadow: 0 10px 22px -8px rgba(217,78,120,.7);
  background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.ba-tag {
  position: absolute; top: 14px; padding: 7px 12px 6px; border-radius: 999px; pointer-events: none;
  font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(17,17,17,.6);
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; background: var(--rose); }
.ba-range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }   /* keyboard + screen readers */
.ba-frame:focus-within .ba-handle::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.ba-slider figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--taupe); }

@media print {
  .roller-cover { display: none !important; }
  .bwb-reveal { opacity: 1 !important; transform: none !important; }
}