/* Soft moving highlights and gently floating icon tiles. */
.link-button{position:relative;isolation:isolate;overflow:hidden;--motion-delay:0s;transition:box-shadow .25s ease,background-color .25s ease}
.link-button:nth-child(2){--motion-delay:.35s}.link-button:nth-child(3){--motion-delay:.7s}.link-button:nth-child(4){--motion-delay:1.05s}.link-button:nth-child(5){--motion-delay:1.4s}.link-button:nth-child(6){--motion-delay:1.75s}
.link-button::after{content:"";position:absolute;inset:-55% -30%;pointer-events:none;z-index:2;background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.06) 42%,rgba(255,255,255,.48) 49%,rgba(255,255,255,.12) 55%,transparent 63%);transform:translateX(-110%);animation:bely-reflection 6.5s ease-in-out infinite;animation-delay:var(--motion-delay)}
.link-button-featured::after{background:linear-gradient(110deg,transparent 36%,rgba(255,239,211,.04) 42%,rgba(255,239,211,.24) 49%,rgba(255,239,211,.07) 55%,transparent 63%)}
.link-icon{animation:bely-icon-float 4.5s ease-in-out infinite;animation-delay:var(--motion-delay);transform-origin:center}
@keyframes bely-reflection{0%,12%{transform:translateX(-110%)}40%,100%{transform:translateX(110%)}}
@keyframes bely-icon-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@media(hover:hover){.link-button:hover{box-shadow:0 10px 26px rgba(92,53,36,.19)}.link-button:hover .link-icon{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.link-button::after{animation:none;display:none}.link-icon{animation:none;transform:none}.link-button{transition:none}}
/* Keep the cream/brown palette on touch and hover; move the whole card gently. */
.link-button{animation:bely-card-float 5.2s ease-in-out infinite;animation-delay:var(--motion-delay);-webkit-tap-highlight-color:transparent;transition:box-shadow .25s ease,translate .25s ease}
.link-button-standard,.link-button-standard:hover,.link-button-standard:active,.link-button-standard:focus-visible{background-color:rgba(255,255,255,.5);color:var(--color-card-foreground)}
.link-button-featured,.link-button-featured:hover,.link-button-featured:active,.link-button-featured:focus-visible{background-color:var(--color-primary);color:var(--color-primary-foreground)}
.link-icon{transition:translate .3s ease,rotate .3s ease}
@keyframes bely-card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(hover:hover){.link-button:hover{translate:2px 0}.link-button:hover .link-icon{translate:4px 0;rotate:-5deg}}
.link-button:active .link-icon,.link-button:focus-visible .link-icon{translate:4px 0;rotate:-5deg;animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.link-button,.link-icon{animation:none;transition:none;translate:none;rotate:none}.link-button:hover,.link-button:hover .link-icon,.link-button:active .link-icon,.link-button:focus-visible .link-icon{translate:none;rotate:none}}