html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.14), transparent 28rem),
    linear-gradient(135deg, #090d16 0%, #111827 48%, #0f172a 100%);
  padding-top: var(--navbar-height, 0px);
}

#navbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 70;
}

.page-shell {
  animation: page-enter 420ms ease-out both;
}

.motion-card {
  animation: card-enter 520ms ease-out both;
}

.motion-card:nth-child(2n) {
  animation-delay: 45ms;
}

.motion-card:nth-child(3n) {
  animation-delay: 90ms;
}

.soft-panel {
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.35);
}

.popup-panel {
  animation: popup-enter 220ms ease-out both;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@keyframes popup-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}