@keyframes fade-up {
  from {
    transform: translateY(10px);
  }

  to {
    transform: translateY(0);
  }
}

.reveal {
  animation: fade-up 420ms ease both;
}

.product-card,
.repo-card,
.news-card,
.panel,
.screen-frame {
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.product-card:hover,
.repo-card:hover,
.news-card:hover {
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-panel), 0 0 28px rgba(71, 180, 255, 0.12);
  transform: translateY(-2px);
}

.showcase-image {
  transition: opacity 240ms ease, transform 240ms ease;
}

.showcase-image.is-changing {
  opacity: 0.24;
  transform: scale(0.992);
}