:is(.hero-slide .hero-copy a.hero-metallic,button.hero-metallic){position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;border-radius:100px;border:0;background:linear-gradient(120deg,#aaa,#fff 20%,#333 40%,#ddd 70%,#666);color:#fff;text-decoration:none;box-shadow:0 0 0 1px #0005,0 20px 12px #0001,0 9px 9px #0002,0 2px 5px #0003;transition:box-shadow .15s,transform .3s}
.hero-metallic>canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:-2;opacity:0}
.hero-metallic::before{content:"";position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(#202020,#000);z-index:-1;pointer-events:none}
.hero-metallic>.metal-label{position:relative;color:white;text-shadow:0 1px 2px #0008}
:is(.hero-slide .hero-copy a.hero-metallic,button.hero-metallic):hover{color:#fff;box-shadow:0 0 0 1px #0006,0 8px 5px #0002,0 4px 4px #0002,0 1px 2px #0003}
:is(.hero-slide .hero-copy a.hero-metallic,button.hero-metallic):active,:is(.hero-slide .hero-copy a.hero-metallic,button.hero-metallic)[data-pressed]{transform:translateY(1px) scale(.98);box-shadow:0 0 0 1px #0008,0 1px 2px #0005}
.hero-metallic:focus-visible{outline:2px solid white;outline-offset:5px}
.metal-ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff6,transparent 70%);pointer-events:none;animation:metallic-ripple .6s ease-out forwards}
@keyframes metallic-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.6}to{transform:translate(-50%,-50%) scale(4);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-metallic{transition:none!important}.metal-ripple{display:none}}