/* Animate only the bar artwork; sourced values and labels never move or count up. */
[data-motion-touch="chart"] .bar{background:transparent;border:0;box-shadow:none}
[data-motion-touch="chart"] .bar-ink{position:absolute;inset:0;border:3px solid var(--navy);border-bottom:0;border-radius:4px 4px 0 0;box-shadow:3px 0 0 var(--navy);transform-origin:50% 100%}
[data-motion-touch="chart"] .before .bar-ink{background:var(--blue)}
[data-motion-touch="chart"] .after .bar-ink{background:var(--orange)}
/* Face the conversation and keep that orientation even with motion disabled. */
#contact .welcome-art{transform:scaleX(-1);transform-origin:50% 95%}

/* One soft highlight follows the five-step journey, including the optional steps. */
#path .journey-steps>li{background:transparent;border-radius:10px;isolation:isolate}
#path .journey-steps>li:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ivory);opacity:0;transition:opacity 260ms ease-in-out;pointer-events:none}
#path .journey-steps>li.is-current-step:before{opacity:1}
@media(prefers-reduced-motion:reduce){#path .journey-steps>li:before{display:none;transition:none}}
html[data-motion-preference="off"] #path .journey-steps>li:before{display:none}

/* A slight tactile response, once per hover; touch and reduced-motion stay still. */
@keyframes language-pill-nudge{
 0%,100%{transform:translateX(0)}
 25%{transform:translateX(1.5px)}
 50%{transform:translateX(-1px)}
 75%{transform:translateX(.5px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:not([data-motion-preference="off"]) .language-section .translations>article:hover{animation:language-pill-nudge 360ms ease-in-out 1}
}