/* Adapted from the supplied React Bits JavaScript + CSS variant. */
.specular-button{
 position:relative;display:inline-flex;align-items:center;justify-content:center;gap:20px;
 margin:0;padding:18px 40px;border:0;border-radius:60px;font-family:inherit;font-size:1.15rem;
 font-weight:500;letter-spacing:.01em;line-height:1.2;color:#f5f5f5;background:transparent;
 box-shadow:inset 0 0 0 1px #525252,inset 0 1px 0 #ffffff0a,0 8px 24px #0004;
 cursor:pointer;transition:transform .15s ease,background .25s ease,color .25s ease;white-space:normal;text-align:center;
}
.specular-button.specular-ready{box-shadow:inset 0 1px 0 #ffffff0a,0 8px 24px #0004}
.specular-button:hover{background:var(--paper);color:var(--ink)}
.specular-button:active{transform:scale(.97)}
.specular-button:focus-visible{outline:2px solid #f5f5f599;outline-offset:4px}
.specular-button__fx{position:absolute;inset:-20px;pointer-events:none;z-index:1}
.specular-button__fx canvas{display:block;width:100%;height:100%}
.specular-button__label{position:relative;z-index:2}
@media(max-width:760px){.specular-button{padding:18px 28px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.specular-button{transition:none}.specular-button:active{transform:none}}

.intro-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;align-items:center}
@media(max-width:480px){.intro-actions{gap:14px}}

/* Continuous label loop, with a second faster row on hover. */
.button-ticker{display:block;overflow:hidden;line-height:1.35}
.button-ticker__size{display:block;visibility:hidden;white-space:nowrap}
.button-ticker__motion{position:absolute;inset:0;transition:transform .3s ease}
.button-ticker__row{display:block;height:100%;white-space:nowrap}
.button-ticker__track{display:flex;width:max-content;height:100%;animation:button-label-loop 8s linear infinite}
.button-ticker__unit{display:block;flex:none;padding-right:24px}
.button-ticker__unit>span{margin-left:8px}
.button-ticker__row:nth-child(2) .button-ticker__track{animation-duration:4s}
.intro-action:is(:hover,:focus-visible) .button-ticker__motion{transform:translateY(-100%)}
@keyframes button-label-loop{to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){
 .button-ticker__motion{display:none}
 .button-ticker__size{visibility:visible}
}

/* Compact introduction links; keep the shared surface and motion. */
.intro-actions .intro-action{padding:14px 28px;font-size:16px}
@media(max-width:480px){.intro-actions .intro-action{padding:13px 24px;font-size:15px}}