/* ArcSmith website motion. Only transform, opacity, stroke-dashoffset. Every rule has a reduced motion answer. */
.hm-scene *{transform-box:fill-box}
.hm-draw{stroke-dasharray:100}
.hm-rise,.hm-trees{transform-origin:50% 100%}
.hm-sun,.hm-rays,.hm-halo,.hm-spread{transform-origin:50% 50%}
.hm-deck{transform-origin:0 50%}
.hm-hz{animation:as-draw 476ms cubic-bezier(.6,0,.3,1) 250ms both}
.hm-haze{animation:as-rise 527ms cubic-bezier(.2,.8,.2,1) 369ms both}
.hm-path{animation:as-draw 833ms cubic-bezier(.6,0,.3,1) 437ms both}
.hm-sun{animation:as-sun 884ms cubic-bezier(.22,.61,.2,1) 437ms both}
.hm-rays{animation:as-rays 527ms cubic-bezier(.2,.8,.2,1) 845ms both}
.hm-halo{animation:as-halo 442ms cubic-bezier(.2,.8,.2,1) 1083ms both}
.hm-range{animation:as-rise-o 476ms cubic-bezier(.2,.8,.2,1) 607ms both}
.hm-ridge{animation:as-rise-o 476ms cubic-bezier(.2,.8,.2,1) 760ms both}
.hm-house{animation:as-rise-o 408ms cubic-bezier(.2,.8,.2,1) 998ms both}
.hm-line{animation:as-draw 595ms cubic-bezier(.6,0,.3,1) 1117ms both}
.hm-roof{animation:as-fade-in 221ms cubic-bezier(.22,.61,.2,1) 1491ms both}
.hm-glass{animation:as-fade-in 187ms cubic-bezier(.22,.61,.2,1) 1644ms both}
.hm-deck{animation:as-slide 306ms cubic-bezier(.6,0,.3,1) 1576ms both}
.hm-trees{animation:as-pop 323ms cubic-bezier(.2,.8,.2,1) 1695ms both}
.hm-s0{animation:as-spread 442ms cubic-bezier(.2,.8,.2,1) 1763ms both}
.hm-refl{animation:as-fade-in 391ms cubic-bezier(.22,.61,.2,1) 1882ms both}
.hm-s1{animation:as-spread 442ms cubic-bezier(.2,.8,.2,1) 1848ms both}
.hm-s2{animation:as-spread 442ms cubic-bezier(.2,.8,.2,1) 1933ms both}
.hm-s3{animation:as-spread 442ms cubic-bezier(.2,.8,.2,1) 2018ms both}
.hero-mark .hm-rays{animation:as-rays 527ms cubic-bezier(.2,.8,.2,1) 845ms both,hm-spin 140s linear 2460ms infinite}
.hero-mark .hm-halo{animation:as-halo 442ms cubic-bezier(.2,.8,.2,1) 1083ms both,hm-breathe 6s ease-in-out 2460ms infinite alternate}
.hero-mark #hm-ripples{animation:hm-drift 7s ease-in-out 2460ms infinite alternate}
.hero-mark .hm-wglow{opacity:0;pointer-events:none}
html[data-time="dusk"] .hero-mark .hm-wglow{animation:hm-glow 5s ease-in-out 2460ms infinite alternate both;--g0:.25;--g1:.55}
html[data-time="night"] .hero-mark .hm-wglow{animation:hm-glow 5s ease-in-out 2460ms infinite alternate both;--g0:.5;--g1:.9}
@keyframes hm-spin{to{rotate:360deg}}
@keyframes hm-breathe{from{scale:1}to{scale:1.22}}
@keyframes hm-drift{from{translate:-.8px 0}to{translate:.8px 0}}
@keyframes hm-glow{from{opacity:var(--g0)}to{opacity:var(--g1)}}
@keyframes as-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes as-rise{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes as-rise-o{0%{transform:scaleY(0)}70%{transform:scaleY(1.05)}100%{transform:none}}
@keyframes as-sun{from{transform:rotate(-40deg);opacity:0}12%{opacity:1}to{transform:none;opacity:1}}
@keyframes as-rays{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes as-halo{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:none;opacity:1}}
@keyframes as-fade-in{from{opacity:0}to{opacity:1}}
@keyframes as-slide{from{transform:scaleX(0)}to{transform:none}}
@keyframes as-pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:none}}
@keyframes as-spread{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* the hero mark folds into the sun arc & the A as it scrolls away, & opens back out on the way up */
.hero-mark{view-timeline:--hm-fold block}
.hero-mark .hm-f, .hero-mark .hm-fa, .hero-mark .hm-fa-in{transform-box:fill-box}
.hero-mark .hm-fa{transform-origin:50% 100%;transform:translate(9px,0) scale(0.583)}
.hero-mark .hm-fa-in{opacity:0}
.hero-mark .hm-f-lake{transform-origin:50% 0}
.hero-mark .hm-f-rays{transform-origin:50% 50%}
.hero-mark .hm-f-deck{transform-origin:0 50%}
.hero-mark .hm-f-line{transform-origin:50% 50%}
.hero-mark .hm-f-trees{transform-origin:50% 100%}
.hero-mark .hm-f-house{transform-origin:50% 100%}
.hero-mark .hm-f-glass{transform-origin:50% 50%}
.hero-mark .hm-f-roof{transform-origin:50% 50%}
.hero-mark .hm-f-ridge{transform-origin:50% 100%}
.hero-mark .hm-f-range{transform-origin:50% 100%}
.hero-mark .hm-f-haze{transform-origin:50% 100%}
@supports (animation-timeline:view()){
.hero-mark .hm-f-lake{animation:hm-fold-lake linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-rays{animation:hm-fold-rays linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-deck{animation:hm-fold-deck linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-line{animation:hm-fold-line linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-trees{animation:hm-fold-trees linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-house{animation:hm-fold-house linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-glass{animation:hm-fold-glass linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-roof{animation:hm-fold-roof linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-ridge{animation:hm-fold-ridge linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-range{animation:hm-fold-range linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-f-haze{animation:hm-fold-haze linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-fa{animation:hm-fold-a linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
.hero-mark .hm-fa-in{animation:hm-fold-a-in linear both;animation-timeline:--hm-fold;animation-range:exit -12% exit 70%}
}
@media (prefers-reduced-motion:reduce){
.hero-mark .hm-f, .hero-mark .hm-fa, .hero-mark .hm-fa-in{animation:none!important}
.hero-mark[data-state="compact"] .hm-f{opacity:0}
.hero-mark[data-state="compact"] .hm-fa{transform:none}
.hero-mark[data-state="compact"] .hm-fa-in{opacity:1}
}
@keyframes hm-fold-lake{0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}30%,100%{opacity:0;transform:translateY(-1.5px) scaleY(.35)}}
@keyframes hm-unfold-lake{0%,70%{opacity:0;transform:translateY(-1.5px) scaleY(.35);animation-timing-function:cubic-bezier(.2,.8,.2,1)}100%,100%{opacity:1;transform:none}}
@keyframes hm-fold-rays{0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}32%,100%{opacity:0;transform:rotate(50deg) scale(.5)}}
@keyframes hm-unfold-rays{0%,68%{opacity:0;transform:rotate(50deg) scale(.5);animation-timing-function:cubic-bezier(.2,.8,.2,1)}100%,100%{opacity:1;transform:none}}
@keyframes hm-fold-deck{0%,4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}30%,100%{opacity:0;transform:scaleX(.2)}}
@keyframes hm-unfold-deck{0%,70%{opacity:0;transform:scaleX(.2);animation-timing-function:cubic-bezier(.2,.8,.2,1)}96%,100%{opacity:1;transform:none}}
@keyframes hm-fold-line{0%,2%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}36%,100%{opacity:0;transform:none}}
@keyframes hm-unfold-line{0%,64%{opacity:0;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}98%,100%{opacity:1;transform:none}}
@keyframes hm-fold-trees{0%,6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}36%,100%{opacity:0;transform:scale(.3)}}
@keyframes hm-unfold-trees{0%,64%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.2,.8,.2,1)}94%,100%{opacity:1;transform:none}}
@keyframes hm-fold-house{0%,16%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}44%,100%{opacity:0;transform:scaleY(.9)}}
@keyframes hm-unfold-house{0%,56%{opacity:0;transform:scaleY(.9);animation-timing-function:cubic-bezier(.22,.61,.2,1)}84%,100%{opacity:1;transform:none}}
@keyframes hm-fold-glass{0%,16%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}44%,100%{opacity:0;transform:none}}
@keyframes hm-unfold-glass{0%,56%{opacity:0;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}84%,100%{opacity:1;transform:none}}
@keyframes hm-fold-roof{0%,18%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}46%,100%{opacity:0;transform:none}}
@keyframes hm-unfold-roof{0%,54%{opacity:0;transform:none;animation-timing-function:cubic-bezier(.22,.61,.2,1)}82%,100%{opacity:1;transform:none}}
@keyframes hm-fold-ridge{0%,10%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}44%,100%{opacity:0;transform:translateY(1px) scaleY(.4)}}
@keyframes hm-unfold-ridge{0%,56%{opacity:0;transform:translateY(1px) scaleY(.4);animation-timing-function:cubic-bezier(.2,.8,.2,1)}90%,100%{opacity:1;transform:none}}
@keyframes hm-fold-range{0%,14%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}48%,100%{opacity:0;transform:translateY(1px) scaleY(.4)}}
@keyframes hm-unfold-range{0%,52%{opacity:0;transform:translateY(1px) scaleY(.4);animation-timing-function:cubic-bezier(.2,.8,.2,1)}86%,100%{opacity:1;transform:none}}
@keyframes hm-fold-haze{0%,18%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}52%,100%{opacity:0;transform:translateY(1px) scaleY(.4)}}
@keyframes hm-unfold-haze{0%,48%{opacity:0;transform:translateY(1px) scaleY(.4);animation-timing-function:cubic-bezier(.2,.8,.2,1)}82%,100%{opacity:1;transform:none}}
@keyframes hm-fold-a{0%,36%{transform:translate(9px,0) scale(0.583);animation-timing-function:cubic-bezier(.2,.8,.2,1)}100%{transform:none}}
@keyframes hm-unfold-a{0%{transform:none;animation-timing-function:cubic-bezier(.2,.8,.2,1)}64%,100%{transform:translate(9px,0) scale(0.583)}}
@keyframes hm-fold-a-in{0%,10%{opacity:0;animation-timing-function:cubic-bezier(.22,.61,.2,1)}38%,100%{opacity:1}}
@keyframes hm-unfold-a-in{0%,62%{opacity:1;animation-timing-function:cubic-bezier(.22,.61,.2,1)}90%,100%{opacity:0}}

/* the hero follows the visitor's clock: dawn, day, dusk, night (set on <html> by a two line script) */
.hm-clock{transform-box:fill-box;transform-origin:50% 50%}
html[data-time="dawn"] .hero-mark .hm-clock{transform:rotate(-14deg)}
html[data-time="dawn"] .hero-mark #hm-sun-disc{fill:#D08A4E}
html[data-time="dawn"] .hero-mark #hm-sun-halo{fill:#F2B48C;fill-opacity:0.38}
html[data-time="dawn"] .hero-mark #hm-sun-rays path{stroke:#D08A4E;stroke-opacity:1}
html[data-time="dawn"] .hero-mark #hm-haze path{fill:#E4DACF}
html[data-time="dawn"] .hero-mark #hm-range path:first-child{fill:#B3B9A0}
html[data-time="dawn"] .hero-mark #hm-range path:last-child{fill:#C6C9B2}
html[data-time="dusk"] .hero-mark .hm-clock{transform:rotate(-4deg)}
html[data-time="dusk"] .hero-mark #hm-sun-disc{fill:#B9542A}
html[data-time="dusk"] .hero-mark #hm-sun-halo{fill:#E58A55;fill-opacity:0.42}
html[data-time="dusk"] .hero-mark #hm-sun-rays path{stroke:#B9542A;stroke-opacity:1}
html[data-time="dusk"] .hero-mark #hm-haze path{fill:#D5B7A6}
html[data-time="dusk"] .hero-mark #hm-range path:first-child{fill:#A39C8F}
html[data-time="dusk"] .hero-mark #hm-range path:last-child{fill:#B5AC9D}
html[data-time="dusk"] .hero-mark #hm-window, html[data-time="dusk"] .hero-mark #hm-glass rect:nth-of-type(2){fill:#EDB45C}
html[data-time="dusk"] .hero-mark #hm-reflection path:first-child{fill-opacity:0.6}
html[data-time="night"] .hero-mark .hm-clock{transform:rotate(22deg)}
html[data-time="night"] .hero-mark #hm-sun-disc{fill:#8D9BAA}
html[data-time="night"] .hero-mark #hm-sun-halo{fill:#C5D0DA;fill-opacity:0.5}
html[data-time="night"] .hero-mark #hm-sun-rays path{stroke:#9AA8B6;stroke-opacity:0}
html[data-time="night"] .hero-mark #hm-haze path{fill:#C3CBD4}
html[data-time="night"] .hero-mark #hm-range path:first-child{fill:#8E9C90}
html[data-time="night"] .hero-mark #hm-range path:last-child{fill:#A1ADA2}
html[data-time="night"] .hero-mark #hm-window, html[data-time="night"] .hero-mark #hm-glass rect:nth-of-type(2){fill:#F2B85B}
html[data-time="night"] .hero-mark #hm-reflection path:first-child{fill-opacity:0.75}

/* the header monogram: the sun climbs its arc on hover */
.brand .as-mono-sun{transform-box:fill-box;transform-origin:50% 50%;transition:transform 900ms var(--as-ease-settle)}
.brand:hover .as-mono-sun,.brand:focus-visible .as-mono-sun{transform:rotate(18deg)}

/* page to page: the header stays put, the page underneath cross fades & lifts */
@view-transition{navigation:auto}
.bar{view-transition-name:as-bar}
::view-transition-old(root){animation:vt-out 200ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in 460ms var(--as-ease-settle) 40ms both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* page arrival */
.rise{animation:site-rise 640ms var(--as-ease-settle) both;animation-delay:calc(80ms * var(--d,0))}
@keyframes site-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-mark{animation:site-card 900ms var(--as-ease-settle) 120ms both}
@keyframes site-card{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.photo{animation:site-card 900ms var(--as-ease-settle) 420ms both}
.photo .daylight{animation:site-daylight 3200ms cubic-bezier(.22,.61,.2,1) 1100ms both}
@keyframes site-daylight{from{transform:translateX(-100%);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateX(100%);opacity:0}}

/* scroll reveals: CSS scroll timelines where supported, otherwise everything simply shows */
@supports (animation-timeline:view()){
  .reveal{animation:site-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .reveal-stagger>*{animation:site-rise linear both;animation-timeline:view();animation-range:entry calc(var(--d,0) * 4%) cover calc(24% + var(--d,0) * 4%)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .photo .daylight{display:none}
}