/* One rhythm: a gentle start, unhurried movement and quiet deceleration. Geometry stays unchanged. */
:root{--ease-craft:cubic-bezier(.3,0,.25,1);--motion-short:220ms}
@keyframes line-build{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes line-build-vertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Existing borders keep their space; their visible copies animate without reflow. */
.service-shortcuts.motion-lines>div{position:relative;border-top-color:transparent;border-bottom-color:transparent}
.service-shortcuts.motion-lines>div:before,.service-shortcuts.motion-lines>div:after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left;pointer-events:none}
.service-shortcuts.motion-lines>div:before{top:-1px}
.service-shortcuts.motion-lines>div:after{bottom:-1px}
.service-shortcuts.motion-lines.is-revealing>div:before,.service-shortcuts.motion-lines.is-revealing>div:after{animation:line-build 900ms var(--ease-craft)}
.motion-step{position:relative;border-top-color:transparent}
.motion-step:after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#c9c9c9;transform-origin:left;pointer-events:none}
.motion-step.is-revealing:after{animation:line-build 850ms var(--ease-craft) var(--line-delay,0ms) backwards}

/* Content below the opening screen waits, invisible but in place, for its own reveal. Once seen it never disappears again. */
:root .motion-hide{opacity:0}
.service-shortcuts.motion-lines.motion-pending>div:before,.service-shortcuts.motion-lines.motion-pending>div:after,.motion-step.motion-pending:after{transform:scaleX(0)}

/* Only the mask moves. Captions stay in place, above the mask and below no interaction layer. */
.photo-veil{position:absolute;inset:-1px;background:var(--paper);transform:translateX(0);pointer-events:none;z-index:1}
.service-photo .photo-caption,.service-photo .photo-arrow{z-index:2}
.service-photo img,.gallery-item img{transition:transform 850ms var(--ease-craft)}

/* Arrows use their actual direction; all controls retain their touch target. */
.button,.service-shortcuts a{transition:background var(--motion-short),transform var(--motion-short) var(--ease-craft)}
.button>span,.text-link>span,.work-link>span,.service-shortcuts a>span:last-child,.menu-indicator,.photo-arrow,.gallery-enlarge{display:inline-block;transition:transform var(--motion-short) var(--ease-craft)}
.photo-arrow,.gallery-enlarge{display:grid;transition:transform var(--motion-short) var(--ease-craft),background-color var(--motion-short) var(--ease-craft)}
.service-photo:focus-visible .photo-arrow,.gallery-item:focus-visible .gallery-enlarge{background:var(--green)}
.button:focus-visible>span,.service-shortcuts a:focus-visible>span:last-child,.menu-link:focus-visible .menu-indicator,.service-photo:focus-visible .photo-arrow,.gallery-item:focus-visible .gallery-enlarge{transform:translate(3px,-3px)}
.text-link:focus-visible>span{transform:translateX(4px)}
.work-link:focus-visible>span{transform:translateY(4px)}
.button:active:not(:disabled),.service-shortcuts a:active{transform:scale(.985);transition-duration:150ms}

/* The existing fine underline remains; a second stroke builds over it on intent. */
.text-link,.hero .work-link,.back-link{position:relative}
.text-link:after,.hero .work-link:after,.back-link:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--green-deep);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-craft);pointer-events:none}
.text-link:focus-visible:after,.hero .work-link:focus-visible:after,.back-link:focus-visible:after{transform:scaleX(1)}
.field input,.field select,.field textarea{transition:border-color 180ms var(--ease-craft)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--green)}
.hero .work-link:after{background:var(--green)}
.field [aria-invalid=true]:focus{border-bottom-color:#ffd2c6}

@media(hover:hover) and (pointer:fine){
 .button:hover>span,.service-shortcuts a:hover>span:last-child,.menu-link:hover .menu-indicator,.service-photo:hover .photo-arrow,.gallery-item:hover .gallery-enlarge{transform:translate(3px,-3px)}
 .text-link:hover>span{transform:translateX(4px)}
 .work-link:hover>span{transform:translateY(4px)}
 .text-link:hover,.hero .work-link:hover,.back-link:hover{text-decoration:none}
 .text-link:hover:after,.hero .work-link:hover:after,.back-link:hover:after{transform:scaleX(1)}
 .service-photo:hover img,.gallery-item:hover img{transform:scale(1.025)}
}
@media(hover:none){.service-photo:hover img,.gallery-item:hover img{transform:none}}

@media(max-width:760px){
 .service-shortcuts.motion-lines a+a{position:relative;border-top-color:transparent}
 .service-shortcuts.motion-lines a+a:before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line);transform-origin:left;pointer-events:none}
 .service-shortcuts.motion-lines.is-revealing a+a:before{animation:line-build 760ms var(--ease-craft) var(--line-delay,0ms) backwards}
 .service-shortcuts.motion-lines.motion-pending a+a:before{transform:scaleX(0)}
 .motion-step.motion-pending:before{transform:scaleY(0)}
 .service-shortcuts.motion-lines.is-revealing>div:before,.service-shortcuts.motion-lines.is-revealing>div:after{animation-duration:760ms}
 .motion-step:after{display:none}
 .motion-step:before{transform-origin:top}
 .motion-step.is-revealing:before{animation:line-build-vertical 720ms var(--ease-craft)}
 .mobile-nav{transform:translateY(-8px);transition:opacity 180ms var(--ease-craft),transform 180ms var(--ease-craft),visibility 0s linear 180ms;pointer-events:none}
 .mobile-nav.is-open{transform:translateY(0);transition-duration:400ms,400ms,0s;transition-delay:0s;pointer-events:auto}
 .mobile-nav .menu-link{opacity:0;transform:translateY(-6px);transition:opacity 140ms var(--ease-craft),transform 140ms var(--ease-craft)}
 .mobile-nav.is-open .menu-link{opacity:1;transform:translateY(0);transition-duration:280ms;transition-delay:60ms}
 .mobile-nav.is-open .menu-link:nth-of-type(2){transition-delay:105ms}
 .mobile-nav.is-open .menu-link:nth-of-type(3){transition-delay:150ms}
 .menu-backdrop{transition:opacity 180ms var(--ease-craft),visibility 0s linear 180ms;pointer-events:none}
 .menu-open .menu-backdrop{transition-duration:400ms,0s;transition-delay:0s;pointer-events:auto}
 .menu-icon i{transition:transform 320ms var(--ease-craft)}
 .menu-toggle[aria-expanded=false] .menu-icon i{transition-duration:180ms}
 .mobile-actions{transform:translateY(8px);transition:opacity 160ms var(--ease-craft),transform 180ms var(--ease-craft),visibility 0s linear 180ms;pointer-events:none}
 .mobile-actions.is-visible{transform:translateY(0);transition-duration:260ms,280ms,0s;transition-delay:0s;pointer-events:auto}
}

/* Nothing waits for a reveal on paper or without motion. */
@media print,(prefers-reduced-motion:reduce){
 :root .motion-hide{opacity:1}
 .motion-pending:before,.motion-pending:after,.motion-pending :before,.motion-pending :after{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .photo-veil{display:none}
 .button,.button:hover,.button:active,.service-shortcuts a,.service-shortcuts a:active,.button>span,.text-link>span,.work-link>span,.service-shortcuts a>span:last-child,.menu-indicator,.photo-arrow,.gallery-enlarge,.service-photo img,.gallery-item img{transform:none!important}
 .mobile-nav,.mobile-nav.is-open,.mobile-nav .menu-link,.mobile-nav.is-open .menu-link,.mobile-actions,.mobile-actions.is-visible{transform:none!important}
 .mobile-nav.is-open .menu-link{opacity:1}
}