/* Shared profile cards: the emblem rolls right as the copy moves left. */
.brand-logo {
  width: 36px;
  height: 36px;
  fill: currentColor;
  flex: none;
}
.social-link {
  --social-inset: 20px;
  --social-emblem-size: 52px;
  --social-icon-size: 36px;
  --social-copy-gap: 16px;
  --social-engaged: 0;
  --social-roll: var(--social-engaged);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: calc(var(--social-inset) * 2 + var(--social-emblem-size));
  padding: var(--social-inset);
  border: 1px solid var(--line);
  background: #304355;
  color: var(--text, var(--paper));
  border-radius: 12px;
  transition:
    transform 0.2s var(--ease),
    color 0.35s,
    border-color 0.35s;
}
.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--social-color);
  transform-origin: left center;
  transform: scaleX(var(--social-engaged));
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.22, 1);
  pointer-events: none;
}
/* The invisible track spans the travel distance; its own 100% is the right endpoint. */
.social-emblem {
  display: block;
  position: absolute;
  left: var(--social-inset);
  top: 50%;
  width: calc(100% - var(--social-inset) * 2 - var(--social-emblem-size));
  height: var(--social-emblem-size);
  transform: translate(calc(100% * var(--social-roll)), -50%);
  transition: transform 0.68s cubic-bezier(0.3, 0.75, 0.2, 1.04);
  pointer-events: none;
}
.social-emblem::before {
  content: "";
  position: absolute;
  width: var(--social-emblem-size);
  height: 100%;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  background: #ffffff0a;
  opacity: calc(0.5 + var(--social-engaged) * 0.5);
  transition: opacity 0.4s;
}
.social-emblem .brand-logo {
  position: absolute;
  top: 50%;
  left: calc((var(--social-emblem-size) - var(--social-icon-size)) / 2);
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  transform: translateY(-50%) rotate(calc(1turn * var(--social-roll)));
  transition: transform 0.68s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.social-copy {
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--social-emblem-size) + var(--social-copy-gap));
  transform: translateX(
    calc(
      (var(--social-emblem-size) + var(--social-copy-gap)) * -1 *
        var(--social-roll)
    )
  );
  transition: transform 0.46s var(--ease);
}
.social-copy small {
  transform: translateY(calc(-1px * var(--social-roll)));
  transition:
    transform 0.54s var(--ease),
    opacity 0.35s;
}
.social-link[data-social="linkedin"] {
  --social-color: #0a66c2;
}
.social-link[data-social="github"] {
  --social-color: #7044a8;
}
.social-link[data-social="instagram"] {
  --social-color: #b62e71;
}
.social-link[data-social]:focus-visible {
  --social-engaged: 1;
  color: #fff;
  border-color: var(--social-color);
}
@media (hover: hover) and (pointer: fine) {
  .social-link[data-social]:hover {
    --social-engaged: 1;
    color: #fff;
    border-color: var(--social-color);
  }
}
.social-link:active {
  transform: scale(0.985);
}
.social-link strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.social-link small {
  display: block;
  font-size: 10px;
  margin-top: 3px;
  opacity: calc(0.75 + var(--social-engaged) * 0.25);
}
.social-arrow {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: none;
  opacity: calc(1 - var(--social-roll));
  transform: translate(
    calc(16px * var(--social-roll)),
    calc(-16px * var(--social-roll))
  );
  transition:
    transform 0.4s var(--ease),
    opacity 0.25s;
}
.social-arrow .icon {
  width: 100%;
  height: 100%;
}
.social-inline {
  --social-inset: 13px;
  --social-emblem-size: 32px;
  --social-icon-size: 24px;
  --social-copy-gap: 10px;
  font-size: 11px;
  margin-top: auto;
  width: 100%;
}
.social-inline .social-arrow {
  width: 14px;
  height: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .social-link {
    --social-roll: 0;
  }
}
html[data-motion="off"] .social-link {
  --social-roll: 0;
}
html[data-page-hidden="true"] .social-link,
html[data-page-hidden="true"] .social-link *,
html[data-page-hidden="true"] .social-link::before,
html[data-page-hidden="true"] .social-emblem::before {
  transition: none;
}