/*
 * A horizontal scroll container always clips transformed children on its
 * cross-axis. Keep a real safety area inside it instead of pulling that area
 * back out with negative margins.
 */
.asset-layer {
  position: relative;
  overflow: visible;
}

.asset-layer .shelf {
  position: relative;
  padding-top: 50px;
  padding-bottom: 58px;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  overflow-x: auto;
  overflow-y: hidden;
}

.asset-layer .shelf-track {
  align-items: flex-start;
  transform-style: preserve-3d;
  perspective: 1400px;
}

.asset-layer .vault-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  transform-style: preserve-3d;
  transform-origin: center 42%;
  will-change: transform;
  backface-visibility: hidden;
}

.asset-layer .vault-card:hover {
  z-index: 20;
  transform: translate3d(0, -9px, 54px) rotateX(-0.7deg);
  border-color: #ffffff73;
  background: #ffffff0b;
  box-shadow: 0 24px 44px #0009, 0 0 0 1px #c9f44b2e;
}

.asset-layer .vault-card:hover .vault-image {
  transform: translateZ(8px);
}

.asset-layer .vault-card:hover .vault-info {
  transform: translateZ(5px);
}

.asset-layer .vault-image,
.asset-layer .vault-info {
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

/* Long local filenames stay on one line without widening the card. */
.asset-layer .vault-info h3 {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-layer .vault-card:hover .drag-frame {
  inset: -6px;
  filter: drop-shadow(0 0 7px #c9f44b3d);
}

.asset-layer .vault-card.drop-target {
  z-index: 22;
}

@media (max-width: 700px) {
  .asset-layer .shelf {
    padding-top: 24px;
    padding-bottom: 34px;
    perspective: none;
  }

  .asset-layer .vault-card:hover {
    transform: none;
    box-shadow: none;
  }

  .asset-layer .vault-card:hover .vault-image,
  .asset-layer .vault-card:hover .vault-info {
    transform: none;
  }
}