/* Motion follows Ecovera's connected operating model. All sequences end. */
nav a { position: relative; text-decoration: none !important; }
nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.button { transition: background .25s, box-shadow .3s, transform .3s; }
.button span { display: inline-block; transition: transform .3s; }
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 9px 22px #0d453826; }
.button:hover span, .button:focus-visible span { transform: translate(3px,-3px); }
.button:active { transform: translateY(0); }
.mark { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.brand:hover .mark, .brand:focus-visible .mark { transform: rotate(-8deg); }
.model { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .4s ease-out, box-shadow .4s; }
.connector { transform-origin: top; }
.model-flow { position: relative; }
.model-flow::before { content: ''; position: absolute; left: -2px; top: 0; width: 3px; height: 28px; border-radius: 3px; background: var(--lime); opacity: 0; }
.model.in-view .connector { animation: connect-line .9s .35s both; }
.model.in-view .model-flow::before { animation: connection-trace 1.5s .7s both; }
.cards article h3, .cards .number, .cards .tag { transition: color .3s, transform .35s; }
.cards .tag { position: relative; }
.cards .tag::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: #40834f; transform: scaleX(0); transform-origin: left; transition: transform .4s; }
@media (hover:hover) and (pointer:fine) {
  .model:hover { box-shadow: 0 18px 38px #0d453824; }
  .cards article:hover h3 { color: #40834f; transform: translateY(-3px); }
  .cards article:hover .tag::after { transform: scaleX(1); }
}
@keyframes connect-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes connection-trace { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 28px); opacity: 0; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .model, .button, .button span, .mark, .cards article h3 { transform: none !important; }
}