/* shiny.css: pink "fancy" round social buttons (port of the 21st.dev "shiny-button"), for Hasan's socials in the space section.
   Round dark glass, pink edge; hover lifts, tilts and sweeps a pink shine across. Labels stay for screen readers. */
.socials { display: flex; flex-wrap: wrap; gap: 14px; }
.social {
  position: relative; overflow: hidden; isolation: isolate;
  width: 62px; height: 62px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--pink);
  border: 1px solid rgb(229 131 170 / .28);
  background: linear-gradient(to top right, rgb(43 43 46 / .62), rgb(43 43 46 / .38));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgb(0 0 0 / .22);
  transition: transform .3s ease-out, box-shadow .3s ease-out, border-color .3s ease-out, background .3s ease-out;
}
.social::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, transparent, rgb(229 131 170 / .38), transparent);
  translate: -100% 0; transition: translate .7s ease-out;
}
.social svg { width: 26px; height: 26px; fill: currentColor; }
.social > span:not(.sr-only) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (hover: hover) {
  .social:hover {
    transform: scale(1.1) rotate(2deg);
    border-color: rgb(229 131 170 / .6);
    background: linear-gradient(to top right, rgb(229 131 170 / .16), rgb(43 43 46 / .4));
    box-shadow: 0 16px 36px rgb(229 131 170 / .32);
  }
  .social:hover::before { translate: 100% 0; }
}
.social:active { transform: scale(.95) rotate(0deg); }
.social:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .social, .social::before { transition: none; } }