/* Tactile keys: a raised face, a visible edge and a short press travel. */
:is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button){
  --button-top:#fbfaef;
  --button-bottom:#e1e6cf;
  --button-edge:#8c9672;
  --button-border:#ffffefc7;
  --button-ink:#23291f;
  --button-sheen:#ffffff70;
  --button-glow:#ffffff40;
  --button-depth:5px;
  --button-lift:0px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--button-ink);
  background:linear-gradient(160deg,var(--button-top),var(--button-bottom));
  border:1px solid var(--button-border);
  border-radius:14px;
  box-shadow:0 var(--button-depth) 0 var(--button-edge),0 12px 22px #080e0838,inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #00000012;
  transform:perspective(650px) translateY(var(--button-lift)) rotateX(var(--button-rotate-x,0deg)) rotateY(var(--button-rotate-y,0deg));
  transition:transform .32s cubic-bezier(.2,.8,.2,1.2),box-shadow .25s,border-color .2s;
  backface-visibility:hidden;
}
:is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button)::before{
  content:"";
  position:absolute;
  inset:-45%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,var(--button-sheen) 49%,transparent 63%);
  transform:translateX(-115%);
}
:is(.button,.header-contact,.copy-email)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at var(--button-light-x,50%) var(--button-light-y,0%),var(--button-glow),transparent 65%);
  opacity:0;
  transition:opacity .25s;
}
:is(.button-outline,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button){
  --button-top:#46513a;
  --button-bottom:#283320;
  --button-edge:#11190e;
  --button-border:#9daa83;
  --button-ink:#f5f3e9;
  --button-sheen:#ffffff1a;
  --button-glow:#ffffff0a;
}
.hero-actions{padding-bottom:6px}
.hero-actions .button{min-height:56px;padding:13px 18px;gap:20px}
:is(.button,.header-contact)>span[aria-hidden]{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:#26331c12;
  box-shadow:inset 0 1px 2px #00000014,0 1px 0 #ffffff50;
  font-size:20px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1.2);
}
.button-outline>span[aria-hidden]{background:#131c1266;box-shadow:inset 0 1px 3px #0004,0 1px 0 #ffffff1a}
.header-contact{padding:9px 14px;gap:16px;border-radius:13px}
.header-contact>span[aria-hidden]{width:25px;height:25px;font-size:18px}
.shape-picker{padding:5px;gap:6px;border-radius:14px;background:#1b2318;border-color:#657454;box-shadow:inset 0 2px 5px #0006,0 1px 0 #ffffff14}
.shape-picker button{--button-depth:3px;border-radius:9px;min-height:38px}
.shape-picker button[aria-pressed=true],.icon-button[aria-pressed=true]{
  --button-top:#e3eac0;
  --button-bottom:#c3d391;
  --button-edge:#70814c;
  --button-border:#e4edc4;
  --button-ink:#23291f;
  color:var(--button-ink);
  background:linear-gradient(160deg,var(--button-top),var(--button-bottom));
}
.icon-button,.menu-button{--button-depth:4px;border-radius:12px}
.hero-with-image .stage-caption p{background:#22281fe8;border:0;border-radius:20px;color:#e6eadb}
.hero-with-image .scene-controls{gap:9px}
.copy-email{border-radius:12px}
.dialog-close{--button-depth:3px;border-radius:10px}
:is(.project-open,.spatial-play){
  border:1px solid #ffffefc7;
  border-radius:13px;
  background:linear-gradient(150deg,#fbfaef,#e1e6cf);
  color:#23291f;
  box-shadow:0 4px 0 #8c9672,0 9px 16px #0003,inset 0 1px 0 #fff9;
  transition:transform .3s cubic-bezier(.2,.8,.2,1.2),box-shadow .2s;
}
@media(hover:hover) and (pointer:fine){
  :is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button):not(:disabled):hover{
    --button-lift:-3px;
    color:var(--button-ink);
    background:linear-gradient(160deg,var(--button-top),var(--button-bottom));
    box-shadow:0 calc(var(--button-depth) + 2px) 0 var(--button-edge),0 16px 25px #080e084d,inset 0 1px 0 #ffffff73,inset 0 -1px 0 #00000012;
    transform:perspective(650px) translateY(var(--button-lift)) rotateX(var(--button-rotate-x,0deg)) rotateY(var(--button-rotate-y,0deg));
  }
  :is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button):not(:disabled):hover::before{animation:button-sheen .7s ease-out both}
  :is(.button,.header-contact,.copy-email):hover::after{opacity:1}
  :is(.button,.header-contact):hover>span[aria-hidden]{transform:translateY(-2px) rotate(-8deg)}
  :is(.spatial-cover,.project-image,.saas-visual):hover :is(.spatial-play,.project-open){
    background:linear-gradient(150deg,#fbfaef,#e1e6cf);
    transform:perspective(500px) translateY(-4px) rotateY(-12deg) rotateZ(-5deg);
    box-shadow:0 7px 0 #8c9672,0 15px 22px #0004;
  }
}
:is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button):not(:disabled):active{
  transform:perspective(650px) translateY(calc(var(--button-depth) - 1px)) rotateX(0deg) rotateY(0deg);
  box-shadow:0 1px 0 var(--button-edge),0 3px 6px #080e0833,inset 0 2px 5px #00000017;
  transition-duration:.08s;
}
:is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button):focus-visible{outline:3px solid #d6dfac;outline-offset:8px}
.contact-section .copy-email:focus-visible{outline-color:#26311d}
:is(.spatial-cover,.project-image,.saas-visual):active :is(.spatial-play,.project-open){transform:translateY(3px);box-shadow:0 1px 0 #8c9672}
@keyframes button-sheen{to{transform:translateX(115%)}}
@media(max-width:760px){
  .hero-with-image .hero-actions{gap:12px}
  .hero-with-image .hero-actions .button{min-height:52px;padding:12px 13px;gap:11px;border-radius:13px}
  .hero-actions .button>span[aria-hidden]{width:24px;height:24px;font-size:18px;border-radius:7px}
  .hero-with-image .scene-controls{gap:7px}
  .shape-picker{gap:4px;padding:4px}
}
@media(max-width:380px){
  .hero-with-image .hero-actions{gap:10px}
  .hero-with-image .hero-actions .button{padding:11px;gap:9px}
  .hero-with-image .scene-controls{gap:5px}
  .shape-picker{gap:3px}
}
@media(prefers-reduced-motion:reduce){
  :is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button,.project-open,.spatial-play),
  :is(.button,.header-contact)>span[aria-hidden]{transition:none!important;animation:none!important;transform:none!important}
  :is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button)::before{display:none}
  :is(.button,.header-contact,.copy-email)::after{transition:none}
}