/*
 * Angular cards (projects, Discord, contact) in the style of the dialogs, without
 * the glow. The card is clipped to a chamfered shape (top left and bottom right
 * cut); ::after draws the 1px edge, the two chamfer diagonals and brighter corner
 * brackets on the square corners. Colours follow the card's --accent-rgb.
 */
.home-project,
.home-contact__card,
.home-launch,
.home-app,
.home-frame {
  --cut: 26px;
  --edge: rgba(var(--accent-rgb), .3);
  --shape: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--shape);
}

.home-contact__card {
  --accent-rgb: 255, 46, 136;
  --edge: rgba(var(--accent-rgb), .24);
}

.home-project::after,
.home-contact__card::after,
.home-launch::after,
.home-app::after,
.home-frame::after {
  --bracket: linear-gradient(rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .9));
  content: '';
  position: absolute;
  /* Cover the transparent border so the frame sits exactly on the card edge. */
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--edge);
  clip-path: var(--shape);
  background:
    linear-gradient(135deg, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)) top left / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(315deg, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)) bottom right / var(--cut) var(--cut) no-repeat border-box,
    var(--bracket) top right / 64px 2px no-repeat border-box,
    var(--bracket) top right / 2px 64px no-repeat border-box,
    var(--bracket) bottom left / 64px 2px no-repeat border-box,
    var(--bracket) bottom left / 2px 64px no-repeat border-box;
}

/* Workspace app cards: same frame, smaller cut. */
.home-app { --cut: 14px; }
.home-app::after { --bracket: linear-gradient(rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .9)); }

@media (max-width: 760px) {
  .home-project,
  .home-contact__card,
  .home-launch,
  .home-frame { --cut: 18px; border-radius: 0; }
}