:root {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020617;
  color: #f8fafc;
}

.project-card {
  opacity: 0;
  transform: translateY(28px);
  animation: project-card-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--card-delay, 0ms);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.project-delay-0 {
  --card-delay: 0ms;
}

.project-delay-120 {
  --card-delay: 120ms;
}

.project-delay-240 {
  --card-delay: 240ms;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 24px 60px rgba(8, 145, 178, 0.16);
}

.project-progress {
  transform-origin: left;
  animation: project-progress-fill 1.1s 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.project-lock {
  animation: project-lock-float 3s ease-in-out infinite;
}

.project-action svg {
  transition: transform 250ms ease;
}

.project-action:hover svg {
  transform: translate(2px, -2px);
}

/* Only the selected screenshot is displayed inside a project gallery */
.project-gallery-image {
  display: none;
}

.project-gallery-image-active {
  display: block;
  animation: project-image-enter 300ms ease-out;
}

/* These dots show which project screenshot is currently selected */
.project-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  transition: width 200ms ease, background-color 200ms ease;
}

/* Keeps the gallery controls clickable above every screenshot and badge */
.project-gallery-previous,
.project-gallery-next,
.project-gallery-dot {
  cursor: pointer;
  touch-action: manipulation;
}

.project-gallery-dot-active {
  width: 22px;
  background: #22d3ee;
}

@keyframes project-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes project-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes project-lock-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes project-image-enter {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-progress,
  .project-lock,
  .project-gallery-image-active {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .project-card,
  .project-action svg {
    transition: none;
  }
}