/* Shared motion language. Native navigation, no router or animation library. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.site-header { transition: box-shadow 240ms ease, background 240ms ease; }
.site-header.is-scrolled { background: #fffffff7; box-shadow: 0 5px 24px #102d3b0b; }
.nav-links>a:not(.nav-contact) { position: relative; }
.nav-links>a:not(.nav-contact)::after { content: ''; position: absolute; height: 2px; background: #176d60; bottom: 3px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--motion-ease); }
.nav-links>a:hover::after,.nav-links>a:focus-visible::after,.nav-links>a[aria-current=page]::after { transform: scaleX(1); }
.button>span,.nav-contact>span,.outcome-link>span { transition: transform 260ms var(--motion-ease); }
.button:hover>span,.nav-contact:hover>span,.outcomes>a:hover .outcome-link>span { transform: translate(3px,-2px); }
.hero-visual { background: radial-gradient(ellipse at 18% 0%,#20525d 0%,transparent 62%),#102d3b; }
.app-section { background: radial-gradient(ellipse at 5% 55%,#1c4a50 0%,transparent 60%),#102d3b; }
.app-photo-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #c3dfa5; vertical-align: middle; }
.screen-expand,.zoom-label { transition: background 220ms ease, box-shadow 220ms ease; }
.screen-link:hover .screen-expand,.panel-image:hover .zoom-label { background: #e2f1d3; box-shadow: 0 4px 14px #102d3b18; }
.contact-card { transition: border-color 250ms ease, box-shadow 250ms ease; }
.contact-card:focus-within { border-color: #84aa78; box-shadow: 0 18px 45px #284b2220; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition { pointer-events: none; }
  ::view-transition-group(root) { animation-duration: 460ms; }
  ::view-transition-old(root) { animation: page-out 130ms ease-out both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: page-in 460ms cubic-bezier(.25,.8,.25,1) both; mix-blend-mode: normal; }
  ::view-transition-group(site-header) { z-index: 2; animation-duration: 460ms; animation-timing-function: var(--motion-ease); }
  ::view-transition-old(site-header) { animation: none; opacity: 0; }
  ::view-transition-new(site-header) { animation: none; }
  html[data-travel=back]::view-transition-old(root) { animation-name: page-back-out; }
  html[data-travel=back]::view-transition-new(root) { animation-name: page-back-in; }
  @keyframes page-out { to { opacity: 0; transform: translateX(-8px); } }
  @keyframes page-in { from { opacity: 0; transform: translateX(22px); } 30% { opacity: .7; } to { opacity: 1; transform: translateX(0); } }
  @keyframes page-back-out { to { opacity: 0; transform: translateX(8px); } }
  @keyframes page-back-in { from { opacity: 0; transform: translateX(-22px); } 30% { opacity: .7; } to { opacity: 1; transform: translateX(0); } }
  .lightbox[open] { animation: dialog-in 240ms var(--motion-ease) both; }
  .lightbox[open]::backdrop { animation: backdrop-in 240ms ease both; }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
  @keyframes backdrop-in { from { opacity: 0; } }
  @supports (animation-timeline: scroll()) {
    .site-header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #3f927c; transform-origin: left; animation: reading-progress linear both; animation-timeline: scroll(root block); }
    @keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .button:hover>span,.nav-contact:hover>span,.outcomes>a:hover .outcome-link>span { transform: none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none!important; }
}
@media print { .site-header::after { display: none; } }