/* A single motion vocabulary; content stays readable without JavaScript. */
:root{--motion-reveal:700ms;--motion-feedback:160ms;--ease-in-out:cubic-bezier(.77,0,.175,1)}
.hero-line{display:block;overflow:hidden;color:var(--paper)}
.hero-word{display:block;color:inherit}
.hero-accent,.hero-accent .hero-word{color:var(--green)}
.system-core{animation:none}
.flow-replay{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:8px 10px;color:var(--muted);font-size:10px}
.flow-replay[hidden]{display:none}
.flow-replay svg{width:15px;height:15px}
.hero-bottom{gap:20px}
.hero-bottom>span{flex:1}
.connector i{overflow:hidden}
.connector i::after{content:"";position:absolute;inset:0;background:var(--green);transform:translateX(-105%);opacity:0}
.system.is-connected .connector i::after{animation:signal-in 900ms var(--ease-in-out) both;animation-delay:calc(300ms + var(--signal-delay,0ms))}
.connector i:nth-child(2){--signal-delay:70ms}
.connector i:nth-child(3){--signal-delay:140ms}
.system.is-connected .connector.right i::after{animation-delay:1100ms}
.system.is-connected .system-core{animation:core-charge 1100ms var(--ease-out) 650ms both}
.system.is-connected .output-title svg{animation:connection-confirm 700ms var(--ease-out) 1500ms both}
.system.is-connected .input-line span{animation:input-connect 700ms var(--ease-out) both}
.system.is-connected .input-line span:nth-child(2){animation-delay:70ms}
.system.is-connected .input-line span:nth-child(3){animation-delay:140ms}
.service{position:relative;isolation:isolate}
.service::before{content:"";position:absolute;inset:0 -15px;background:#e9eddf;z-index:-1;opacity:0;transition:opacity 200ms ease}
.service svg,.button svg,.text-link svg,.header-contact svg,.email svg{transition:transform 200ms var(--ease-out)}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left}
.steps.is-sequenced li::before{animation:step-connect 700ms var(--ease-out) both}
.steps.is-sequenced li:nth-child(2)::before{animation-delay:140ms}
.steps.is-sequenced li:nth-child(3)::before{animation-delay:280ms}
.steps.is-sequenced li:nth-child(4)::before{animation-delay:420ms}
.service:focus-visible::before{opacity:1}
.light .service:focus-visible{color:var(--dark)}
@keyframes signal-in{0%{transform:translateX(-105%);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translateX(105%);opacity:0}}
@keyframes core-charge{0%{transform:rotate(-7deg) scale(1)}35%{transform:rotate(5deg) scale(1.1)}100%{transform:rotate(-7deg) scale(1)}}
@keyframes connection-confirm{from{opacity:.25;transform:translateY(7px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes input-connect{from{opacity:.5;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes step-connect{from{transform:scaleX(.03)}to{transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){
 .service:hover{color:var(--dark)}
 .service:hover::before{opacity:1}
 .service:hover>svg,.button:hover svg,.text-link:hover svg,.header-contact:hover svg,.email:hover svg{transform:translate(3px,-3px)}
 .flow-replay:hover{color:var(--green)}
 .flow-replay:hover svg{transform:rotate(-35deg)}
 .flow-replay svg{transition:transform 200ms var(--ease-out)}
}
/* Scroll-linked brand gesture: only the decorative symbol moves, never the copy. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference) and (min-width:701px){
  .about-mark svg{animation:brand-turn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes brand-turn{from{transform:translateY(24px) rotate(-17deg) scale(.95)}to{transform:translateY(-24px) rotate(7deg) scale(1.05)}}
 }
}
@media(max-width:700px){.flow-replay{font-size:9px;gap:7px;padding:8px 0}.hero-bottom{gap:12px}.hero-bottom>span{max-width:150px;line-height:1.7}.hero-bottom>a{width:25px}}
@media(prefers-reduced-motion:reduce){
 .system.is-connected .connector i::after,.system.is-connected .system-core,.system.is-connected .output-title svg,.system.is-connected .input-line span,.steps.is-sequenced li::before{animation:none}
 .steps.is-sequenced li::before{transform:none}
 .service svg,.button svg,.text-link svg,.header-contact svg,.email svg,.flow-replay svg{transition:none}
 .service:hover>svg,.button:hover svg,.text-link:hover svg,.header-contact:hover svg,.email:hover svg,.flow-replay:hover svg{transform:none}
 .flow-replay{display:none}
}
/* Occasional controls: small, interruptible feedback using the shared curve. */
.menu,.flow-replay,#copy{transition:transform 160ms var(--ease-out),opacity 160ms var(--ease-out)}
:root:not(.using-keyboard) .menu:active,:root:not(.using-keyboard) .flow-replay:not(:disabled):active,:root:not(.using-keyboard) #copy:active{transform:scale(.97)}
.flow-replay:disabled{opacity:.55;cursor:default}
.flow-replay:disabled svg{transform:none}
#copy{gap:8px;text-align:left}
.copy-check{width:16px;height:16px;opacity:0;transform:scale(.95);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
#copy.is-copied .copy-check{opacity:1;transform:scale(1)}
@media(max-width:700px){
 .menu-enhanced .header nav{display:flex;opacity:0;transform:scale(.97);transform-origin:top right;visibility:hidden;pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s 200ms}
 .menu-enhanced .header nav.open{opacity:1;transform:scale(1);visibility:visible;pointer-events:auto;transition-delay:0s}
}
.using-keyboard .menu,.using-keyboard .flow-replay,.using-keyboard #copy,.using-keyboard .copy-check,.using-keyboard.menu-enhanced .header nav{transition:none}
@media(prefers-reduced-motion:reduce){
 .menu,.flow-replay,#copy,.copy-check{transition:opacity 120ms var(--ease-out)}
 :root:not(.using-keyboard) .menu:active,:root:not(.using-keyboard) .flow-replay:not(:disabled):active,:root:not(.using-keyboard) #copy:active{transform:none}
 .copy-check,#copy.is-copied .copy-check{transform:none}
 .menu-enhanced .header nav{transform:none;transition:opacity 120ms var(--ease-out),visibility 0s 120ms}
 .menu-enhanced .header nav.open{transition-delay:0s}
 .using-keyboard.menu-enhanced .header nav{transition:none}
}