.ht-contract-scroll-area :deep([data-slot='scroll-area-viewport']) {
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  padding-top: 6px;
}

.ht-contract-scroll-area.is-dragging :deep([data-slot='scroll-area-viewport']) {
  scroll-snap-type: none;
}

.ht-contract-scroll-area :deep(.ht-sortable-ghost) {
  opacity: 0.35;
}

.ht-contract-scroll-area :deep(.ht-sortable-chosen),
.ht-contract-scroll-area :deep(.ht-sortable-drag) {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.ht-contract-card {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  isolation: isolate;
  overflow: visible;
  z-index: 0;
  transition:
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 180ms ease;
  box-shadow:
    0 1px 2px hsl(var(--foreground) / 0.04),
    0 6px 16px hsl(var(--foreground) / 0.06);
}

.ht-contract-card::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    130deg,
    hsl(var(--primary) / 0.42) 0%,
    hsl(var(--primary) / 0.22) 36%,
    hsl(var(--foreground) / 0.09) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ht-contract-card::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -30px;
  height: 52px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      hsl(var(--primary) / 0.42) 0%,
      hsl(var(--primary) / 0.24) 34%,
      hsl(var(--foreground) / 0.20) 58%,
      transparent 86%
    );
  filter: blur(18px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ht-contract-card:hover {
  transform: translate3d(0, -5px, 0);
  z-index: 14;
  box-shadow:
    0 0 0 1.5px hsl(var(--primary) / 0.62),
    0 0 28px hsl(var(--primary) / 0.34),
    0 0 56px hsl(var(--primary) / 0.22),
    0 16px 34px hsl(var(--foreground) / 0.22),
    0 32px 60px hsl(var(--foreground) / 0.18);
  border-color: hsl(var(--primary) / 0.72);
}

.ht-contract-card:hover::before {
  opacity: 1;
}

.ht-contract-card:hover::after {
  opacity: 0.95;
  transform: translateY(0);
}

.ht-contract-card:active {
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 5px 12px hsl(var(--foreground) / 0.10),
    0 10px 20px hsl(var(--foreground) / 0.10);
}

.ht-contract-card--ready {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ht-contract-card--enter {
  animation: ht-card-slide-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--ht-card-enter-delay, 0ms);
}

.ht-contract-card--selecting {
  transform-origin: 50% 100%;
  animation: ht-card-select-wave 2200ms linear infinite both;
  animation-delay: var(--ht-card-select-delay, 0ms);
}

.ht-contract-card--selecting:hover {
  animation-play-state: paused;
}

.ht-contract-card--selecting.ht-contract-card--selected {
  animation: none;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.ht-contract-card--selected {
  border-color: hsl(var(--primary));
  transform: translate3d(0, -4px, 0);
  box-shadow:
    0 0 0 1px hsl(var(--primary) / 0.34),
    0 12px 24px hsl(var(--primary) / 0.18),
    0 22px 36px hsl(var(--foreground) / 0.10);
}

.ht-contract-card--selected::before {
  opacity: 1;
}

.ht-contract-card--selected::after {
  opacity: 1;
  transform: translateY(0);
}

@keyframes ht-card-slide-in {
  from {
    opacity: 0;
    transform: translate3d(44px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ht-card-select-wave {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  11% {
    transform: translate3d(-0.4px, 0, 0) rotate(-0.7deg);
  }
  22% {
    transform: translate3d(-0.9px, 0, 0) rotate(-1.6deg);
  }
  34% {
    transform: translate3d(-1.2px, 0, 0) rotate(-2.3deg);
  }
  48% {
    transform: translate3d(-0.2px, 0, 0) rotate(-0.4deg);
  }
  62% {
    transform: translate3d(0.8px, 0, 0) rotate(1.5deg);
  }
  76% {
    transform: translate3d(1.25px, 0, 0) rotate(2.35deg);
  }
  88% {
    transform: translate3d(0.35px, 0, 0) rotate(0.65deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-contract-card--enter,
  .ht-contract-card--selecting {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ht-contract-card,
  .ht-contract-card:hover,
  .ht-contract-card:active,
  .ht-contract-card--selected {
    transition: none;
    transform: none;
  }

  .ht-contract-card::before,
  .ht-contract-card::after {
    transition: none;
  }
}
