.motion-refresh{background:#ededed;color:#282828}
.motion-refresh>.site-header.spatial-header{background:#fafafa}
.motion-refresh-opening{padding:0;background:#ededed}
.motion-refresh-title{width:var(--site-content-width);margin:0 auto;padding:clamp(40px,5vw,80px) 0 40px}
.motion-refresh-title>p{font-family:var(--font-mono),monospace;font-size:14px;letter-spacing:.05em;margin:0 0 24px}
.motion-refresh-title h1{font-family:var(--font-display),sans-serif;font-size:clamp(46px,6.7vw,102px);line-height:1.05;font-weight:500;letter-spacing:-.055em;margin:0}
.motion-refresh-title>p.motion-refresh-intro{max-width:none;margin:28px 0 0;font-family:var(--font-sans),sans-serif;font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.5;letter-spacing:0}
.motion-refresh-film{width:100%;display:grid;place-items:center;background:#fafafa}
.motion-refresh-film video{display:block;width:min(100%,780px);height:auto;max-height:85svh;object-fit:contain;aspect-ratio:1;background:#fafafa}
.motion-refresh-study{padding:0;color:#282828}
.motion-refresh-copy{width:var(--site-content-width);margin:0 auto 40px;display:grid;grid-template-columns:var(--reading-rail) minmax(0,1fr);gap:24px var(--reading-gap)}
.motion-refresh-copy>p{font-family:var(--font-mono),monospace;font-size:14px;line-height:1.5;margin:8px 0 0}
.motion-refresh-copy h2{font-family:var(--font-display),sans-serif;font-size:clamp(32px,4.2vw,64px);line-height:1.1;font-weight:500;letter-spacing:-.04em;margin:0;max-width:25ch}
.motion-refresh-study figure{margin:0;width:100%;background:inherit}
.motion-refresh-study figure img{display:block;width:var(--site-content-width);height:auto;margin:auto}
.motion-refresh-study[data-study="direction-studies"] figure img{width:calc(var(--site-content-width) * .85)}
.motion-refresh-study figcaption{width:var(--site-content-width);margin:24px auto 0;font-size:14px;line-height:1.6;max-width:none}
@media(max-width:800px){.motion-refresh-copy{grid-template-columns:1fr;gap:18px}.motion-refresh-copy>p{margin:0}.motion-refresh-film video{max-height:none}}

/* The content holds still; only the peripheral signal moves. */
.detail.motion-refresh .motion-result{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 75% 35%,#ffffff 0,#edf5fa 45%,#c5d8e8 100%);color:#132b41;padding:36px var(--site-gutter) 28px}
.motion-result p,.motion-result h2{margin:0}
.motion-result>header,.motion-result>footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:24px;font:500 14px/1.5 var(--font-mono),monospace;letter-spacing:.04em}
.motion-result>header{text-transform:uppercase}
.motion-result-composition{position:relative;z-index:1;padding:64px 9% 52px}
.motion-result-aside{position:absolute;left:9%;top:46%;font:400 14px/1.5 var(--font-mono),monospace;color:#425d73}
.motion-result h2{font:500 clamp(58px,9.5vw,154px)/1.06 var(--font-display),sans-serif;letter-spacing:-.065em}
.motion-result h2>span,.motion-result h2>em{display:block;width:fit-content;max-width:100%}
.motion-result h2>span:first-child{margin-left:7%}
.motion-result h2>span:nth-child(2){margin-left:45%;color:#64859f}
.motion-result h2>em{margin-left:16%;padding-right:.12em;padding-bottom:.04em;font-style:normal;background:linear-gradient(110deg,#18364e,#789bb4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.motion-result-note{margin:38px 0 0 38%;max-width:30ch;font-size:clamp(18px,1.6vw,24px);line-height:1.5}
.motion-result-note>span{display:block;margin-top:20px;font:400 16.8px/1.5 var(--font-mono),monospace;color:#425d73}
.motion-result-dots{position:absolute;inset:0;z-index:0;pointer-events:none}
.motion-result-rail{position:absolute;top:0;bottom:0;width:9%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;animation:motion-result-drift 12s ease-in-out infinite}
.motion-result-rail.left{left:0}.motion-result-rail.right{right:0;animation-delay:-.3s}
.motion-result-rail i{display:block;width:clamp(9px,1.25vw,20px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b8cedb,#5e819b);opacity:.52;box-shadow:0 3px 12px #365e7520}
.motion-result-rail i:nth-child(2n){opacity:.3;scale:.8}
@keyframes motion-result-drift{0%,100%{transform:translate(0,0)}25%{transform:translate(6px,-16px)}50%{transform:translate(-4px,8px)}75%{transform:translate(-8px,18px)}}
.motion-result[data-paused="true"] .motion-result-rail{animation-play-state:paused}
.motion-result>footer{color:#425d73}
.motion-result button{font:inherit;color:#132b41;background:transparent;border:1px solid #132b4133;border-radius:30px;min-height:44px;padding:10px 18px;cursor:pointer}
.motion-result button:hover{background:#ffffff80}.motion-result button:focus-visible{outline:2px solid #132b41;outline-offset:4px}
@media(max-width:700px){
 .motion-result-composition{padding:48px 5% 36px}
 .motion-result h2{font-size:clamp(40px,9.3vw,66px);letter-spacing:-.05em}
 .motion-result h2>span:first-child{margin-left:0}.motion-result h2>span:nth-child(2){margin-left:38%}.motion-result h2>em{margin-left:6%}
 .motion-result-aside{position:static;margin-bottom:24px!important;margin-left:8%!important}
 .motion-result-note{margin:28px 8% 0 18%;font-size:18px}
 .motion-result>header{align-items:flex-start}.motion-result>header>span{text-align:right;max-width:15ch}
 .motion-result>footer{align-items:flex-start;gap:16px}.motion-result>footer>span{max-width:18ch}.motion-result button{flex-shrink:0}
 .motion-result-rail{width:5%}
}
@media(prefers-reduced-motion:reduce){.motion-result-rail{animation:none}.motion-result button{display:none}}

/* Three offset lanes per edge; each dot enters on its own quiet cadence. */
.motion-result-rail{width:18%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr);justify-items:center;animation:none}
.motion-result-rail.left{--dot-direction:1}.motion-result-rail.right{--dot-direction:-1}
.motion-result-rail i{width:clamp(7px,.9vw,14px);opacity:0;translate:none;animation:motion-result-enter 9.1667s ease-in-out infinite;animation-delay:-2s}
@keyframes motion-result-enter{
 0%{transform:translateX(calc(var(--dot-direction) * -48px));opacity:0}
 20%{opacity:.38}
 65%{opacity:.3}
 100%{transform:translateX(calc(var(--dot-direction) * 40px));opacity:0}
}
.motion-result[data-paused="true"] .motion-result-rail i{animation-play-state:paused}
.motion-result-controls{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:24px;background:transparent;color:#425d73;font:500 14px/1.5 var(--font-mono),monospace;letter-spacing:.04em}
@media(max-width:700px){
 .motion-result-rail{width:14%}
 .motion-result-controls{align-items:flex-start;gap:16px}.motion-result-controls>span{max-width:18ch}
 @keyframes motion-result-enter{0%{transform:translateX(calc(var(--dot-direction) * -20px));opacity:0}20%{opacity:.3}65%{opacity:.22}100%{transform:translateX(calc(var(--dot-direction) * 12px));opacity:0}}
}
@media(prefers-reduced-motion:reduce){.motion-result-rail i{animation:none;opacity:.3}}

/* Offset rows: largest at the edge, shrinking toward the interior. */
.motion-result-rail{display:block;width:19%}
.motion-result-rail i{position:absolute;left:var(--dot-x);top:var(--dot-y);width:var(--dot-size);scale:1;background:#527991;box-shadow:none;opacity:var(--dot-alpha)}
.motion-result-rail i:nth-child(2n){scale:1;opacity:var(--dot-alpha)}
.motion-result-rail.right i{left:auto;right:var(--dot-x)}
@keyframes motion-result-enter{
 0%{transform:translateX(calc(var(--dot-direction) * -48px));scale:1;opacity:0}
 15%{scale:.9;opacity:var(--dot-alpha)}
 55%{scale:.4;opacity:calc(var(--dot-alpha) * .35)}
 85%{scale:0;opacity:0}
 100%{transform:translateX(calc(var(--dot-direction) * 40px));scale:0;opacity:0}
}
@media(max-width:700px){
 .motion-result-rail{width:16%}
 .motion-result-rail i{width:calc(var(--dot-size) * .65)}
 @keyframes motion-result-enter{0%{transform:translateX(calc(var(--dot-direction) * -20px));scale:1;opacity:0}15%{scale:.9;opacity:var(--dot-alpha)}55%{scale:.4;opacity:calc(var(--dot-alpha) * .35)}85%{scale:0;opacity:0}100%{transform:translateX(calc(var(--dot-direction) * 12px));scale:0;opacity:0}}
}
@media(prefers-reduced-motion:reduce){.motion-result-rail i{animation:none;opacity:var(--dot-alpha)}}

/* Continuous streams travel from the edge to 30% of the full section width. */
.motion-result-rail{width:100%;--flow-end:30vw}
.motion-result-rail i{left:0;animation:motion-result-flow 9.1667s linear infinite;animation-delay:var(--flow-delay)}
.motion-result-rail.right i{left:auto;right:0}
@keyframes motion-result-flow{
 0%{transform:translateX(calc(var(--dot-direction) * -24px));scale:1;opacity:0}
 5%{scale:.96;opacity:var(--dot-alpha)}
 75%{scale:.35;opacity:var(--dot-alpha)}
 100%{transform:translateX(calc(var(--dot-direction) * var(--flow-end)));scale:0;opacity:0}
}

/* One shared translation preserves every row and column throughout the loop. */
.motion-result-dots{mask-image:linear-gradient(to right,#000 0%,#000 5%,transparent 40%,transparent 60%,#000 95%,#000 100%)}
.motion-result-rail{width:16.875%;animation:motion-grid-flow 12.375s linear infinite;animation-delay:0s}
.motion-result-rail.right{animation-delay:0s}
.motion-result-rail i,.motion-result-rail i:nth-child(2n){left:var(--dot-x);width:15.2px;opacity:.55;translate:-50% 0;animation:motion-grid-shrink 12.375s linear infinite;animation-delay:0s}
.motion-result-rail.right i,.motion-result-rail.right i:nth-child(2n){left:auto;right:var(--dot-x);translate:50% 0}
@keyframes motion-grid-flow{from{transform:translateX(0)}to{transform:translateX(calc(var(--dot-direction) * 13.5vw))}}
@keyframes motion-grid-shrink{from{scale:var(--scale-from)}to{scale:var(--scale-to)}}
@media(max-width:700px){.motion-result-rail{width:16.875%}.motion-result-rail i{width:12px}}
@media(prefers-reduced-motion:reduce){
 .motion-result-rail{animation:none;transform:none}
 .motion-result-rail i,.motion-result-rail i:nth-child(2n){animation:none;scale:var(--scale-from);left:var(--dot-x)}
 .motion-result-rail.right i{left:auto;right:var(--dot-x)}
}

/* Keep the outcome readable and the peripheral dots subtle on tablets and phones. */
@media(max-width:1024px), (max-width:1366px) and (pointer:coarse){
 .motion-result-rail i,.motion-result-rail i:nth-child(2n){width:8px}
 .motion-result h2{font-size:clamp(52px,12vw,132px)}
 .motion-result-aside{font-size:clamp(16px,1.8vw,20px)}
 .motion-result-note{font-size:clamp(20px,2.6vw,28px)}
 .motion-result-note>span{font-size:clamp(18px,2vw,22px)}
}

/* Give the headline more room and presence as the window narrows. */
@media(max-width:1366px){
 .motion-result-composition{padding-inline:0}
 .motion-result h2{font-size:clamp(48px,16vw,154px)}
 .motion-result h2>span:first-child{margin-left:0}
 .motion-result-aside{position:static;margin:0 0 32px 8%!important}
}

/* Preserve the stagger while bringing the outer lines inward. */
.motion-result h2>span:first-child{margin-left:12%}
.motion-result h2>em{margin-left:26%}
@media(max-width:700px){
 .motion-result h2{font-size:clamp(60px,20vw,140px);line-height:1.02}
 .motion-result h2>span:first-child{margin-left:5%}
 .motion-result h2>span:nth-child(2){margin-left:45%}
 .motion-result h2>em{margin-left:20%}
 .motion-result-aside{font-size:clamp(20px,4.8vw,26px)}
 .motion-result-note{margin:36px 8% 0 12%;max-width:24ch;font-size:clamp(24px,6vw,32px)}
 .motion-result-note>span{font-size:clamp(20px,5vw,26px)}
}