/* Refined hover affordance for image-based portfolio cards. */
#panel-digital .project-media.lightbox-trigger,
#panel-brand .project-media.lightbox-trigger {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #panel-digital .project-media.lightbox-trigger::after,
  #panel-brand .project-media.lightbox-trigger::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background-color: rgba(15,18,20,.78);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-6 6'/%3E%3Cpath d='M10 19H5v-5'/%3E%3Cpath d='M5 19l6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 21px;
    box-shadow: 0 10px 24px rgba(10,14,18,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate3d(5px,-5px,0) scale(.88);
    transition:
      opacity 180ms ease,
      transform 280ms cubic-bezier(.2,.72,.2,1),
      background-color 180ms ease;
    pointer-events: none;
  }

  #panel-digital .project-media.lightbox-trigger:hover::after,
  #panel-brand .project-media.lightbox-trigger:hover::after,
  #panel-digital .project-media.lightbox-trigger:focus-visible::after,
  #panel-brand .project-media.lightbox-trigger:focus-visible::after {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    background-color: rgba(15,18,20,.88);
  }
}

@media (max-width: 720px) {
  #panel-digital .project-media.lightbox-trigger,
  #panel-brand .project-media.lightbox-trigger {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel-digital .project-media.lightbox-trigger::after,
  #panel-brand .project-media.lightbox-trigger::after {
    transition: none !important;
  }
}