/* Motion follows the site's existing construction / wayfinding vocabulary. */
.worlds-wayfinding { display:flex; gap:5px; margin-top:18px; }
.worlds-wayfinding button {
  flex:1; min-width:0; min-height:44px; position:relative; padding:12px 0;
  border:0; border-top:1px solid rgba(255,255,255,.22); background:transparent;
  color:rgba(255,255,255,.55); font:700 10px/1 Archivo,sans-serif;
  font-variant-numeric:tabular-nums; transition:color .25s,background .25s;
}
.worlds-wayfinding button::before {
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.18,.82,.18,1);
}
.worlds-wayfinding button[aria-current="true"] { color:var(--signal); background:rgba(239,225,88,.06); }
.worlds-wayfinding button[aria-current="true"]::before { transform:scaleX(1); }
.worlds-wayfinding button:hover { color:var(--signal); }
.worlds-wayfinding button:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }

@media (min-width:721px) and (prefers-reduced-motion:no-preference) {
  .worlds[data-motion-track] .worlds-track { min-width:0; position:relative; }
  .worlds[data-motion-track] .worlds-head { padding-top:110px; padding-bottom:45px; }
  .worlds[data-motion-track] .worlds-head .display-heading { font-size:clamp(54px,5.6vw,90px); }
  .worlds[data-motion-track] .worlds-head p { margin-top:24px; }
  .worlds[data-motion-track] .worlds-progress { margin-top:28px; }
  .worlds[data-motion-track] .worlds-progress span { width:100%; transform-origin:left; }
  .worlds[data-motion-track] .world-media { inset:-5%; transition:filter .5s; will-change:transform; }
  .worlds[data-motion-track] .world-copy { will-change:transform; }
  .worlds[data-motion-track] .world-panel { will-change:transform; }
  .worlds[data-motion-track] .world-panel::before {
    content:""; position:absolute; z-index:3; inset:0; pointer-events:none;
    border-bottom:2px solid var(--signal); opacity:var(--panel-focus,0);
  }
}

.site-header nav a { position:relative; }
.site-header nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.18,.82,.18,1);
}
.site-header nav a:hover::after,
.site-header nav a[aria-current="location"]::after { transform:scaleX(1); transform-origin:left; }
:is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.button span,.text-link span { display:inline-block; transition:transform .4s cubic-bezier(.18,.82,.18,1); }
.button:hover span,.text-link:hover span { transform:translate(3px,-3px); }
.client-row h3 { transition:transform .45s cubic-bezier(.18,.82,.18,1); }
.client-row:hover h3 { transform:translateX(5px); }
.motion-rule { position:relative; }
.motion-rule::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:currentColor; opacity:.4; transform:scaleX(var(--rule-progress,1));
  transform-origin:left; pointer-events:none;
}
.contact-drawing { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.contact-drawing path { fill:none; stroke:var(--signal); stroke-width:1; vector-effect:non-scaling-stroke; }
.contact-drawing circle { fill:var(--signal); }
.contact-field.has-drawing > span { display:none; }
@media (prefers-reduced-motion:reduce) {
  .worlds { height:auto; }
  .worlds-wayfinding button,.worlds-wayfinding button::before,
  .site-header nav a::after,.button span,.text-link span,.client-row h3 { transition:none; }
}