/* Social profile content inside the existing pointer-following CRT window. */
.magnetic-img .social-preview-caption {
  display: none;
}

.magnetic-img.is-social .magnetic-img-frame {
  background: var(--theme-surface, #141210);
}

.magnetic-img.is-social .magnetic-img-frame::before {
  content: "";
  position: absolute;
  inset: 12px 12px 46px;
  border-inline: 1px solid rgba(255, 107, 0, 0.24);
  pointer-events: none;
}

.magnetic-img.is-social .magnetic-img-el {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 39px);
  padding: 12px 30px 5px;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 60%;
}

.magnetic-img.is-social.is-visible .magnetic-img-el:not(.is-changing) {
  animation:
    social-screen-reveal 650ms cubic-bezier(0.22, 1, 0.36, 1) both,
    social-avatar-float 4.8s ease-in-out 650ms infinite;
}

.magnetic-img.is-social .social-preview-caption {
  position: absolute;
  inset: auto 16px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 107, 0, 0.3);
  color: var(--theme-text, #f5f1ed);
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.magnetic-img.is-social .social-preview-caption > :first-child {
  color: var(--theme-orange-light, #ffac69);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.magnetic-img.is-social.is-visible .social-preview-caption {
  animation: social-caption-settle 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Opacity belongs to the existing image-switch transition. */
@keyframes social-screen-reveal {
  from { clip-path: inset(46% 0 46%); }
  to { clip-path: inset(0); }
}

@keyframes social-avatar-float {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  50% { transform: translateY(-4px) rotate(0.35deg); }
}

@keyframes social-caption-settle {
  from { transform: translateY(5px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .magnetic-img.is-social.is-visible .magnetic-img-el:not(.is-changing),
  .magnetic-img.is-social.is-visible .social-preview-caption {
    animation: none;
    transform: none;
    clip-path: none;
  }
}