/* Deliberate, finite sequences emphasize Ferrarius's operating structure. */
nav a { position: relative; }
nav a:not(.nav-contact)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.nav-contact { transition: border-color .25s, background .25s; }
.nav-contact:hover, .nav-contact:focus-visible { border-color: var(--blue); background: #8cabff12; }
.button { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s, box-shadow .25s, background .25s; }
.button::before { content: ''; position: absolute; z-index: -1; inset: 0; background: #fff3; transform: translateX(-101%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.button:hover::before, .button:focus-visible::before { transform: translateX(0); }
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 #8cabff18; }
.button:active { transform: translateY(0); }
.button span, .nav-contact span { display: inline-block; transition: transform .25s; }
.button:hover span, .button:focus-visible span, .nav-contact:hover span { transform: translate(3px,-3px); }
.brand .mark { transition: transform .3s; }
.brand:hover .mark { transform: translateX(3px); }
.process { position: relative; }
.process::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.process.in-view::before { animation: process-line 1.35s .2s both; }
.process > div { transition: background .3s; }
.operation-list article { position: relative; }
.operation-list article::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.operation-list h3, .operation-list .index { transition: color .3s, transform .3s; }
@media (hover:hover) and (pointer:fine) {
  .process > div:hover { background: #8cabff0d; }
  .operation-list article:hover::before { transform: scaleX(1); }
  .operation-list article:hover h3 { transform: translateX(5px); color: var(--blue); }
}
@keyframes process-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .button, .button span, .nav-contact span, .brand .mark, .operation-list h3 { transform: none !important; }
  .process::before { transform: scaleX(1); }
}