/* Each design has a tactile response tuned to its own visual language. */
body.sample{--hover-x:0px;--hover-y:-3px;--hover-rotation:0deg;--hover-scale:1;--hover-shadow:0 5px 0 var(--accent)}
body.identity-01{--hover-x:3px;--hover-y:0px;--hover-shadow:-4px 0 0 var(--accent)}
body.identity-02{--hover-x:3px;--hover-y:-3px;--hover-shadow:-5px 5px 0 var(--accent)}
body.identity-04{--hover-y:-2px;--hover-shadow:0 5px 0 var(--accent)}
body.identity-05{--hover-y:-2px;--hover-shadow:3px 4px 0 var(--accent)}
body.identity-06{--hover-y:-4px;--hover-rotation:-2deg;--hover-scale:1.025;--hover-shadow:3px 5px 0 var(--accent)}
body.identity-07{--hover-x:4px;--hover-y:0px;--hover-shadow:0 2px 0 var(--accent)}
body.identity-08{--hover-y:-3px;--hover-shadow:0 5px 10px #0003}
body.identity-09{--hover-x:-3px;--hover-y:-3px;--hover-shadow:5px 5px 0 var(--accent)}
body.identity-12{--hover-x:2px;--hover-y:-2px;--hover-shadow:0 0 0 3px var(--accent)}
body.identity-13{--hover-x:3px;--hover-y:0px;--hover-shadow:0 3px 0 var(--accent)}
body.identity-14{--hover-y:-3px;--hover-rotation:1deg;--hover-shadow:4px 4px 0 var(--accent)}
body.identity-17{--hover-y:-3px;--hover-shadow:0 7px 18px #0003}
body.identity-18{--hover-y:-3px;--hover-shadow:4px 5px 0 var(--accent)}
body.identity-19{--hover-y:-4px;--hover-shadow:0 8px 16px #0003}
body.identity-21{--hover-y:-3px;--hover-rotation:2deg;--hover-scale:1.025;--hover-shadow:5px 5px 0 var(--accent)}
body.identity-22{--hover-x:3px;--hover-y:-2px;--hover-shadow:0 4px 0 var(--accent)}
body.identity-23{--hover-y:-2px;--hover-shadow:0 0 0 3px var(--accent),0 0 16px var(--accent)}
body.identity-24{--hover-y:-4px;--hover-shadow:0 7px 14px #0003}
body.identity-25{--hover-x:4px;--hover-y:0px;--hover-shadow:-4px 0 0 var(--accent)}
body.identity-28{--hover-y:-3px;--hover-rotation:-1.5deg;--hover-shadow:4px 4px 0 var(--accent)}
body.sample :is(a,button,summary,select){transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,text-decoration-color .2s ease}
body.sample :is(a,button,summary,select):focus-visible{outline:3px solid currentColor;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 body.sample :is(.action,.service-pick,.nav-contact,.project-planner summary,.feature-add,.feature-buttons button,.compare-controls button):hover{transform:translate(var(--hover-x),var(--hover-y)) rotate(var(--hover-rotation)) scale(var(--hover-scale));box-shadow:var(--hover-shadow);filter:none}
 body.sample :is(.biz-header nav a:not(.nav-contact),.secondary,.photo-story-step a,.choose,.biz-footer a,.demo-bar a,.demo-bar button):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
 body.sample :is(.questions summary,select):hover{box-shadow:0 0 0 3px var(--accent)}
}
@media(prefers-reduced-motion:reduce){body.sample :is(a,button,summary,select){transition:none!important}body.sample :is(.action,.service-pick,.nav-contact,.project-planner summary,.feature-add,.feature-buttons button,.compare-controls button):hover{transform:none!important}}
@media(hover:hover) and (pointer:fine){body.sample button:hover{outline:2px solid currentColor;outline-offset:3px}}
@media(hover:hover) and (pointer:fine){body.sample :is(input,textarea):hover{outline:2px solid var(--accent);outline-offset:2px}body.sample a:not(.action):not(.identity):hover{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:5px}}
/* Text links use a visible background on hover instead of extra underlines. */
body.sample :is(.secondary,.service-pick,.choose,.photo-story-step a){border-bottom:0!important;text-decoration:none!important}
@media(hover:hover) and (pointer:fine){
 body.sample a:hover{text-decoration:none!important}
 body.sample :is(.biz-header nav a:not(.nav-contact),.secondary,.photo-story-step a,.choose,.biz-footer a,.demo-bar a):hover{background:color-mix(in srgb,currentColor 14%,transparent);border-radius:3px}
}
body.sample .demo-bar button[aria-pressed=true]{text-decoration:none;font-weight:700;background:#ffffff1f;border-radius:3px}
@media(hover:hover) and (pointer:fine){body.sample .demo-bar button:hover{text-decoration:none;background:#ffffff29;border-radius:3px}}
@media(hover:hover) and (pointer:fine){body.sample .biz-header nav a:not(.nav-contact):hover{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent)}}
