/* Shared motion language. Default content remains visible without JavaScript. */
:root {
  --motion-out: cubic-bezier(.16,1,.3,1);
  --motion-in-out: cubic-bezier(.65,0,.35,1);
}
body.ui-system .hero-copy { animation: none; }
body.ui-system [data-motion="title"],
body.ui-system .reference-page .sd[data-motion="title"] { display: block; }
.motion-line { display: block; overflow: clip; padding-block: .08em; margin-block: -.08em; }
.motion-line-inner { display: block; transform-origin: left bottom; }
.motion-pending[data-motion="rise"] { opacity: 0; }
.motion-pending[data-motion="title"] .motion-line-inner { transform: translateY(108%); }
.motion-pending[data-motion="image"] { clip-path: inset(8% 14% 8% 14% round 24px); }
.motion-pending[data-motion="draw"] path { stroke-dashoffset: 1; opacity: 0; }
body.ui-system .ui-record-value .motion-count { font: inherit; color: inherit; letter-spacing: inherit; display: inline-block; min-width: 1.25ch; font-variant-numeric: tabular-nums; }
.motion-progress { position: fixed; z-index: 8; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,#0e7a61,#74c6a6); transform: scaleX(0); transform-origin: left; pointer-events: none; }
body.ui-system.is-reading::after { display: none; }
body.ui-system .ui-contact-section { position: relative; overflow: hidden; isolation: isolate; }
.motion-connection { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #0e7a61; opacity: .18; }
.motion-connection path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
body.ui-system .ui-contact-glass { position: relative; }
body.ui-system .company-photo { overflow: hidden; }
body.ui-system .company-photo img { transform-origin: center; }

/* Color spreads from the point of entry; both states retain white-on-green text. */
body.ui-system .motion-fill { position: relative; isolation: isolate; overflow: hidden; }
body.ui-system .motion-fill::before {
  content: ''; position: absolute; z-index: -1; left: var(--pointer-x,50%); top: var(--pointer-y,50%);
  width: 220%; aspect-ratio: 1; border-radius: 50%; background: #075641;
  transform: translate(-50%,-50%) scale(0); transition: transform 620ms var(--motion-out); pointer-events: none;
}
body.ui-system .motion-fill > .ui-icon { transition: translate 380ms var(--motion-out); translate: var(--arrow-x,0px) 0; }
body.ui-system .motion-fill:focus-visible::before { transform: translate(-50%,-50%) scale(1); }
body.ui-system .ui-action-circle { overflow: hidden; transition: background 350ms var(--motion-out),color 350ms,border-color 350ms,scale 350ms var(--motion-out); }
body.ui-system .ui-action-circle > .ui-icon { transition: transform 400ms var(--motion-out); }
body.ui-system .ui-service-image { transition: scale 800ms var(--motion-out); }
body.ui-system .ui-case-card { transition: translate 500ms var(--motion-out),border-color 350ms,box-shadow 500ms; }
body.ui-system .ui-news-row { transition: background 350ms,padding 500ms var(--motion-out); }
body.ui-system .company-links a .ui-icon { transition: transform 400ms var(--motion-out); }
body.ui-system .nav-link::after { transform-origin: right; transition: transform 450ms var(--motion-out); }
body.ui-system .nav-link:hover::after { transform-origin: left; }
body.ui-system .dropdown:not([hidden]) { animation: motion-dropdown 350ms var(--motion-out) both; }
body.ui-system .dropdown:not([hidden]) .dropdown-links a { animation: motion-menu-link 450ms var(--motion-out) both; }
body.ui-system .dropdown-links a:nth-child(2) { animation-delay: 35ms; }
body.ui-system .dropdown-links a:nth-child(3) { animation-delay: 70ms; }
body.ui-system .dropdown-links a:nth-child(4) { animation-delay: 105ms; }
body.ui-system .mobile-menu[open] { animation: motion-menu 500ms var(--motion-out) both; }
body.ui-system .mobile-menu[open] .mobile-links > li { animation: motion-menu-link 650ms var(--motion-out) both; animation-delay: calc(60ms + var(--menu-index,0) * 45ms); }
body.ui-system .mobile-links > li:nth-child(2) { --menu-index: 1; }
body.ui-system .mobile-links > li:nth-child(3) { --menu-index: 2; }
body.ui-system .mobile-links > li:nth-child(4) { --menu-index: 3; }
body.ui-system .mobile-links > li:nth-child(5) { --menu-index: 4; }
body.ui-system .mobile-links > li:nth-child(6) { --menu-index: 5; }
@keyframes motion-dropdown { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-menu { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes motion-menu-link { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(28px); } 46% { transform: translateX(-28px); } 100% { transform: translateX(0); } }
@media (hover:hover) and (pointer:fine) {
  body.ui-system .motion-fill:hover::before { transform: translate(-50%,-50%) scale(1); }
  body.ui-system .ui-service-card:hover .ui-service-image { scale: 1.025; }
  body.ui-system a.ui-case-card:hover { translate: 0 -5px; box-shadow: 0 16px 36px rgb(26 65 43 / 10%); }
  body.ui-system :is(.ui-action--text,.ui-service-card,.ui-news-row):hover .ui-action-circle > .ui-icon { animation: motion-arrow 480ms var(--motion-out); }
  body.ui-system .ui-news-row:hover { padding-inline: 10px; }
  body.ui-system .company-links a:hover .ui-icon { transform: translateX(5px); }
}
@media (prefers-reduced-motion:reduce) {
  .motion-pending[data-motion] { opacity: 1; clip-path: none; }
  .motion-pending[data-motion] .motion-line-inner { transform: none; }
  .motion-pending[data-motion] path { opacity: 1; stroke-dashoffset: 0; }
  body.ui-system :is(.hero-image,.hero-image img,.company-photo img) { transform: none !important; }
  body.ui-system .ui-service-image { scale: 1 !important; }
  body.ui-system a.ui-case-card:hover { translate: none; }
  body.ui-system .motion-fill::before { display: none; }
  body.ui-system .motion-fill > .ui-icon { translate: none; }
}
@media print {
  .motion-pending[data-motion] { opacity: 1; clip-path: none; }
  .motion-pending[data-motion] .motion-line-inner { transform: none; }
  .motion-progress,.motion-connection { display: none; }
}