/* Approved Reali preview motion — 7 October 2026. */
.motion-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}
.motion-layer svg{display:block;width:100%;height:100%;overflow:visible}

/* 1. The familiar crowd gathers, then one human takes on Reali blue. */
html:not([data-crowd="off"]) #why{background-image:none}
.crowd-art{opacity:.75}
.crowd-people{stroke:#aeb8b7;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.21}
.crowd-person{stroke:var(--blue);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.38}
.motion-armed .crowd-art{opacity:0;transform:scale(1.035) translateY(10px);transform-origin:center}
.motion-armed #why.crowd-played .crowd-art{animation:crowd-gather 2200ms cubic-bezier(.2,.7,.2,1) both}
.motion-armed .crowd-person{opacity:0}
.motion-armed #why.crowd-played .crowd-person{animation:person-stands-out 1700ms ease 1100ms both}
@keyframes crowd-gather{to{opacity:.75;transform:none}}
@keyframes person-stands-out{0%{opacity:0}65%{opacity:.65}100%{opacity:.38}}

/* 2. Each type stamp has a small, individual movement into its final place. */
html:not([data-stamps="off"]) #copywriting::before{background:var(--paper)}
#copywriting .letterpress-art{left:calc((100vw - 100%)/-2);right:calc((100vw - 100%)/-2);width:auto}
.stamp{transform-box:fill-box;transform-origin:center}
.motion-armed .stamp{opacity:0;transform:translate(var(--stamp-x),var(--stamp-y)) rotate(var(--stamp-turn))}
.motion-armed #copywriting.stamps-played .stamp{animation:stamp-settle 5700ms cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--stamp-delay)}
@keyframes stamp-settle{to{opacity:1;transform:none}}

/* 3. A slightly uneven pen stroke under two selected phrases. */
.hand-underline{position:relative;display:inline-block;padding-bottom:.08em}
.hand-underline svg{position:absolute;left:0;bottom:-.055em;width:100%;height:.18em;overflow:visible;pointer-events:none}
.hand-underline path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#contact .hand-underline path{stroke:#aacfe9}
.motion-armed .hand-underline path{stroke-dasharray:1;stroke-dashoffset:1}
.motion-armed .underline-played .hand-underline path{animation:pen-underline 1100ms cubic-bezier(.42,0,.58,1) 1300ms both}
@keyframes pen-underline{to{stroke-dashoffset:0}}

/* 4. Routes resolve above the ad copy, inside the photograph's quiet left side. */
#google-ads .copy{z-index:2}
#google-ads .ads-route{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}
.ads-route{opacity:1;transition:opacity 550ms ease}
#google-ads.ads-fading .ads-route{opacity:0;transition-duration:900ms}
.ads-route svg{position:absolute;left:0;top:10%;width:48%;height:clamp(100px,18vh,170px);overflow:visible}
.ads-tangle{fill:none;stroke:#00437a;stroke-width:1.35;opacity:0}
.ads-clear-path{fill:none;stroke:#00437a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.34}
.ads-route-dot{fill:var(--blue);opacity:.48}
.motion-armed .ads-clear-path{stroke-dasharray:1;stroke-dashoffset:1}
.motion-armed .ads-route-dot{opacity:0}
.motion-armed #google-ads.ads-played .ads-tangle{animation:untangle-routes 2500ms ease 250ms both}
.motion-armed #google-ads.ads-played .ads-clear-path{animation:resolve-route 2100ms cubic-bezier(.2,.7,.2,1) 900ms both}
.motion-armed #google-ads.ads-played .ads-route-dot{animation:route-arrives 600ms ease 2750ms both}
@keyframes untangle-routes{0%{opacity:0}25%,45%{opacity:.15}100%{opacity:0}}
@keyframes resolve-route{to{stroke-dashoffset:0}}
@keyframes route-arrives{to{opacity:.48}}

/* Buttons keep their original labels and respond with a small, gentle swell. */
.button,button{font-weight:400}
.button.motion-button{position:relative;scale:1;transition:scale 350ms cubic-bezier(.2,.7,.2,1),background-color 250ms ease}
.button-label{display:inline-block;scale:1;transform-origin:center;transition:scale 400ms cubic-bezier(.2,.7,.2,1)}
.navlinks a.button:is(:hover,:focus-visible){text-decoration:none}
.reveal-enabled .intro-text.motion-button{transition:opacity 1600ms ease calc(1000ms + var(--intro-order,0)*160ms),transform 1800ms cubic-bezier(.2,.7,.2,1) calc(1000ms + var(--intro-order,0)*160ms),scale 350ms cubic-bezier(.2,.7,.2,1),background-color 250ms ease;transition-delay:calc(1000ms + var(--intro-order,0)*160ms),calc(1000ms + var(--intro-order,0)*160ms),0s,0s}
html:not([data-buttons="off"]) .motion-button:is(:hover,:focus-visible){scale:1.035}
html:not([data-buttons="off"]) .motion-button:is(:hover,:focus-visible) .button-label{scale:1.08}

/* Comparison switches restore the original textures. */
html[data-crowd="off"] .crowd-art,html[data-stamps="off"] .letterpress-art,html[data-ads="off"] .ads-route{display:none}
html[data-underline="off"] .hand-underline svg{display:none}

/* The process starts with a quiet button in the space reserved for its cards. */
.process-scroll-cue{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:128px;height:128px;display:none;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;opacity:var(--process-cue-opacity,1);transition:opacity 160ms linear}
.process-enabled .process-scroll-cue{display:flex}
.process-scroll-cue svg{width:108px;height:114px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:process-scroll-breathe 2600ms ease-in-out infinite}
.process-scroll-cue:is(:hover,:focus-visible) svg{stroke-width:2.3;animation:none;opacity:1;transform:translateY(4px)}
.process-scroll-cue:focus-visible{outline:3px solid #f9b543;outline-offset:4px;border-radius:12px}
.process-scroll-cue:disabled{visibility:hidden;pointer-events:none}
.process-section.is-skipping .process-node,.process-section.is-skipping .process-card,.process-section.is-skipping .process-connector-line,.process-section.is-skipping .process-connector-tip,.process-section.is-skipping .process-scroll-cue{transition:none!important;animation:none!important}
@keyframes process-scroll-breathe{0%,100%{opacity:.3}50%{opacity:.8}}
.process-scroll-description{display:none}
.process-enabled .process-scroll-description{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The line stops 3px behind the sharp chevron point at every scroll position. */
.process-item:not(:last-of-type)::after{display:none}
.process-connector{position:absolute;z-index:0;left:calc(50% + 40px);top:27px;width:calc(100% + var(--process-gap) - 80px);height:3px;pointer-events:none}
.process-enabled .process-connector{--connector-tip-gap:3px}
.process-connector-line{position:absolute;left:0;top:0;width:max(0px,calc(100%*var(--connector-progress) - var(--connector-tip-gap,0px)));height:100%;background:var(--blue);border-radius:4px;transition:width 100ms linear}
.process-connector-tip{position:absolute;left:calc(var(--connector-progress)*100%);top:50%;width:12px;height:14px;transform:translate(-100%,-50%);opacity:var(--connector-tip-opacity,0);transition:left 100ms linear,opacity 100ms linear}
.process-connector-tip svg{display:block;width:100%;height:100%;fill:var(--blue)}
html:not(.process-enabled) .process-connector-tip{display:none}
@media(max-width:1099px){
 .process-connector{left:20px;top:calc(50% + 30px);width:3px;height:calc(100% + var(--process-gap) - 60px)}
 .process-connector-line{width:100%;height:max(0px,calc(100%*var(--connector-progress) - var(--connector-tip-gap,0px)));transition:height 100ms linear}
 .process-connector-tip{left:50%;top:calc(var(--connector-progress)*100%);width:14px;height:12px;transform:translate(-50%,-100%);transition:top 100ms linear,opacity 100ms linear}
 .process-connector-tip svg{position:absolute;left:1px;top:-1px;width:12px;height:14px;transform:rotate(90deg)}
}
@media(min-width:1100px) and (max-height:500px){
 .process-scroll-cue,.process-enabled .process-scroll-cue,.process-enabled .process-scroll-description,.process-connector-tip{display:none}
 .process-connector-line{width:100%;height:100%}
}
@media(prefers-reduced-motion:reduce){
 .process-scroll-cue,.process-enabled .process-scroll-cue,.process-enabled .process-scroll-description,.process-connector-tip{display:none}
 .process-connector-line{width:100%;height:100%;transition:none}
}

@media(min-width:1100px){#copywriting .letterpress-art{left:calc(-180px - (100vw - 180px)*.06);right:calc((100vw - 180px)*-.06)}}
@media(max-width:760px){
 .crowd-art{opacity:1}
 @keyframes crowd-gather{to{opacity:1;transform:none}}
 .ads-route svg{top:3%;width:80%;height:90px}
}
@media(prefers-reduced-motion:reduce){
 .motion-armed .crowd-art{opacity:.75;transform:none;animation:none!important}
 .motion-armed .crowd-person{opacity:.38;animation:none!important}
 .motion-armed .stamp{opacity:1;transform:none;animation:none!important}
 .motion-armed .hand-underline path,.motion-armed .ads-clear-path{stroke-dashoffset:0;animation:none!important}
 .motion-armed .ads-tangle{opacity:0;animation:none!important}
 .motion-armed .ads-route-dot{opacity:.48;animation:none!important}
 #google-ads .ads-route{opacity:1;transition:none}
 .button.motion-button{scale:1!important;animation:none!important;transition:none!important}
 .button-label{scale:1!important;animation:none!important;transition:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.motion-armed .crowd-art{opacity:1}}