/* Local motion study. The published storefront keeps styles.css unchanged. */
.scroll-demo { --motion-ease: cubic-bezier(.16,1,.3,1); }
.scroll-demo ::selection { color: var(--paper); background: var(--ink); }
.scroll-demo :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.scroll-demo a { text-underline-offset: 5px; }
.scroll-demo main { overflow: clip; }
.word-mask { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.word-content { display: inline-block; transform-origin: left bottom; }
.motion-ribbon { overflow: hidden; padding: 46px 0 50px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ribbon-track { display: flex; gap: 50px; width: max-content; align-items: center; font: clamp(56px,7vw,96px)/1.15 var(--serif); letter-spacing: -.035em; }
.ribbon-track span { white-space: nowrap; }
.ribbon-track span:nth-child(even) { color: var(--accent); font-style: italic; }
.scroll-demo .showroom-grid { perspective: 1000px; }
.scroll-demo .showroom-grid article { transform-origin: left bottom; }
.motion-enabled .steps article > span { display: block; font-size: 40px; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; z-index: 30; pointer-events: none; }
.scroll-demo .hero > a { display: block; overflow: hidden; }
.scroll-demo .hero picture img { transform-origin: center; }
.motion-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding: 8px 4.5%; font-size: 11px; color: var(--muted); }
.motion-controls button { min-height: 44px; font: inherit; color: var(--ink); background: transparent; border: 0; cursor: pointer; padding: 8px 0 8px 12px; }
.motion-controls button::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; }
.motion-controls button[aria-pressed="false"]::before { background: var(--muted); }
.scroll-demo .shop-header nav a { position: relative; }
.scroll-demo .shop-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--motion-ease); }
.scroll-demo .shop-header nav a[aria-current="location"]::after { transform: scaleX(1); }
.room-story { background: var(--ink); color: var(--paper); }
.room-stage { position: relative; min-height: 660px; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.room-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 47%; }
.room-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(15,16,13,.88),rgba(15,16,13,.65) 38%,rgba(15,16,13,.1) 78%); }
.room-copy { padding: 70px 6%; width: 100%; }
.room-copy h2 { font: clamp(40px,4.5vw,72px)/1.09 var(--serif); font-weight: 400; letter-spacing: -.035em; margin: 0 0 28px; max-width: 680px; }
.room-copy h2 > span { display: block; }
.room-copy p { max-width: 410px; font-size: 14px; line-height: 1.85; color: #edece5; margin-bottom: 15px; }
.room-copy .underlink { display: inline-flex; margin-top: 15px; color: var(--paper); }
.scroll-demo .how-title { align-self: start; }
.scroll-demo .steps article { position: relative; transition: color .25s; }
.scroll-demo .steps article::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(var(--step-progress,0)); transform-origin: left; }
.scroll-demo .steps article.is-current > span { color: var(--ink); }
.scroll-demo .steps article.is-current h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: #a89d87; }
@media (min-width: 769px) {
  .motion-enabled .room-story { height: 175svh; min-height: 1100px; }
  .motion-enabled .room-stage { position: sticky; top: var(--header-height,96px); height: calc(100svh - var(--header-height,96px)); min-height: 560px; }
  .motion-enabled .how { padding-top: 100px; padding-bottom: 100px; }
  .motion-enabled .how-title { position: sticky; top: calc(var(--header-height,96px) + 50px); }
  .motion-enabled .steps article { min-height: 235px; padding: 35px 0; }
  .motion-enabled .steps article:first-child { padding-top: 15px; }
}
@media (max-width: 768px) {
  .motion-ribbon { padding: 30px 0; }
  .ribbon-track { gap: 28px; font-size: 56px; }
  .room-stage { min-height: 710px; align-items: flex-end; }
  .room-photo img { object-position: 50% 30%; }
  .room-shade { background: linear-gradient(0deg,rgba(15,16,13,.96),rgba(15,16,13,.7) 44%,rgba(15,16,13,.05) 85%); }
  .room-copy { padding: 140px 6% 44px; }
  .room-copy h2 { font-size: 42px; max-width: 90%; margin-bottom: 20px; }
  .room-copy p { font-size: 12px; line-height: 1.85; max-width: 340px; }
  .motion-controls { padding: 6px 5%; font-size: 11px; }
  .scroll-demo .shop-header nav { font-size: 11px; }
  .scroll-demo .shop-header nav a::after { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
}