/*
 * AIOS CONNECTION NETWORK
 * Card Artwork Preview V1
 *
 * Supports both existing artwork contracts:
 *   .connection-profile-art
 *   .connection-profile-artwork
 *
 * Only occupational artwork enlarges.
 * Text/body/link remain unchanged.
 */

.connection-profile-art,
.connection-profile-artwork {
  position: relative;
}

.connection-profile-image {
  cursor: zoom-in;
  transition: transform 160ms ease;
}

/* Desktop */
@media (hover: hover) and (pointer: fine) {

  .connection-profile-card:has(
    .connection-profile-art:hover
  ),
  .connection-profile-card:has(
    .connection-profile-artwork:hover
  ) {
    overflow: visible;
    position: relative;
    z-index: 30;
  }

  .connection-profile-art:hover,
  .connection-profile-artwork:hover {
    overflow: visible !important;
    z-index: 31;
  }

  .connection-profile-art:hover
  .connection-profile-image,
  .connection-profile-artwork:hover
  .connection-profile-image {
    position: relative;
    z-index: 32;
    transform: scale(3);
    transform-origin: center center;
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.45);
  }
}

/* Mobile / touch */
@media (hover: none), (pointer: coarse) {

  .connection-profile-card:has(
    .is-artwork-preview-open
  ) {
    overflow: visible;
    position: relative;
    z-index: 40;
  }

  .connection-profile-art.is-artwork-preview-open,
  .connection-profile-artwork.is-artwork-preview-open {
    overflow: visible !important;
    z-index: 41;
  }

  .connection-profile-art.is-artwork-preview-open
  .connection-profile-image,
  .connection-profile-artwork.is-artwork-preview-open
  .connection-profile-image {
    position: relative;
    z-index: 42;
    transform: scale(3);
    transform-origin: center center;
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .connection-profile-image {
    transition: none !important;
  }
}


/*
 * SINGLE SCREEN-CENTER PREVIEW
 *
 * Every desktop artwork uses ONE destination:
 * horizontal viewport center.
 *
 * JS supplies --preview-center-shift.
 */

@media (hover: hover) and (pointer: fine) {

  .connection-profile-art:hover
  .connection-profile-image,

  .connection-profile-artwork:hover
  .connection-profile-image {
    transform:
      translateX(var(--preview-center-shift, 0px))
      scale(3);

    transform-origin: center center;
  }
}