/* Styles for effects.js (React Bits effects, ported). Shared by the homepage, setup steps and My Veldo. */

/* Star Border */
.star-border-fx { position: relative; isolation: isolate; }
.star-border__light { position: absolute; top: -48px; left: -48px; z-index: -1; width: calc(100% + 96px); height: calc(100% + 96px); pointer-events: none; }

/* Glare Hover */
.glare-fx { position: relative; overflow: hidden; isolation: isolate; }
.glare-hover__glare { position: absolute; inset: 0; z-index: 2; border-radius: inherit; opacity: 0; mix-blend-mode: var(--gh-blend); pointer-events: none; }
.glare-hover__band { position: absolute; top: 50%; left: 50%; background: var(--gh-glare); will-change: transform; }
.glare-hover__rim { position: absolute; inset: 0; padding: 1px; border-radius: inherit; -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-clip: content-box, border-box; mask-composite: exclude; }
.glare-hover__band--rim { background: var(--gh-rim); }

/* Spotlight Card (the card keeps its own background, padding and corners) */
.spotlight-fx { position: relative; isolation: isolate; overflow: hidden; }
.spotlight-card__light, .spotlight-card__grain, .spotlight-card__border, .spotlight-card__edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.spotlight-card__light, .spotlight-card__grain { z-index: -1; opacity: 0; }
.spotlight-card__grain { background-size: 160px 160px; mix-blend-mode: overlay; }
.spotlight-card__border, .spotlight-card__edge { z-index: 1; padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spotlight-card__border { background: var(--spotlight-card-border); }
.spotlight-card__edge { opacity: 0; }