/* "Play tour" button inside the "Keep scrolling" pill (Julio 2026-10-13): [> Play tour] or keep scrolling.
   Used by every scroll story (homepage walk, Machinery, Remodel bath/flooring). While the tour plays the pill stays
   up and shows only [|| Pause]. js/story-autoplay.js; hidden for reduced motion. Selectors are a notch stronger than
   the page hint rules (story.css, pages/remodel-story.css) so they win on every page. */
.story .story__hint:has(.story__play:not([hidden])) { padding-left: 5px; }
.story .story__play {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 2px 0 0;
  padding: 7px 13px 7px 10px; border-radius: 999px; color: #fff; cursor: pointer;
  font: 600 14px/1 var(--sans, inherit); letter-spacing: 0.02em; white-space: nowrap;
  background: #1F5C45; border: 1px solid rgba(255,255,255,0.3);
  transition: background-color 0.25s ease, transform 0.15s ease;
}
.story .story__play:hover { background: #2A7558; }
.story .story__play:focus-visible { outline: 3px solid #9FD3B8; outline-offset: 2px; }
.story .story__hint svg.story__play-ic,
.story .story__hint.is-visible svg.story__play-ic { width: 14px; height: 14px; flex: none; color: #fff; animation: none; }
.story .story__hint svg.story__play-ic--pause { display: none; }
.story .story__play.is-playing svg.story__play-ic--pause { display: block; }
.story .story__play.is-playing svg.story__play-ic--play { display: none; }
.story .story__play.is-waiting svg.story__play-ic--pause { animation: play-wait 1s ease-in-out infinite; }
@keyframes play-wait { 50% { opacity: 0.35; } }
.story .story__play[hidden] { display: none; }
/* the pill ignores clicks while hidden; once shown (or keyboard-focused) the button takes them */
.story .story__hint.is-visible .story__play, .story.is-autoplay .story__play { pointer-events: auto; }
.story .story__hint:focus-within { opacity: 1; transform: translate(-50%, 0); }
/* playing: keep the pill up (the engine hides it on every scroll) with just the Pause button */
.story.is-autoplay .story__hint { opacity: 1; transform: translate(-50%, 0); padding: 5px; }
.story.is-autoplay .story__hint-or, .story.is-autoplay .story__hint-arrow { display: none; }
.story.is-autoplay .story__play { margin: 0; }
@media (max-width: 420px) { .story .story__hint { font-size: 13px; } .story .story__play { font-size: 13px; padding: 7px 11px 7px 9px; } }
@media (prefers-reduced-motion: reduce) { .story .story__play { display: none; } }

/* status next to Pause while the tour plays: "Auto tour · scroll to stop" (slideshow: "Photo tour · …") */
.story .story__hint-status { display: none; }
.story.is-autoplay .story__hint-status {
  display: inline; padding: 0 10px 0 6px; font-weight: 600; white-space: nowrap; color: #fff;
}
.story.is-autoplay .story__hint { padding: 5px 5px 5px 5px; }
@media (max-width: 420px) { .story.is-autoplay .story__hint-status { padding: 0 8px 0 4px; } }

/* the visitor tried to scroll during the tour (ignored): Pause pulses so they see how to stop. Bigger tap target on phones */
.story.is-nudge .story__play { animation: play-nudge 0.65s ease-in-out 2; }
@keyframes play-nudge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(159, 211, 184, 0.9); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(159, 211, 184, 0); }
}
@media (max-width: 420px) { .story.is-autoplay .story__play { padding: 9px 14px 9px 11px; } }