body {
  background:
    linear-gradient(
      160deg,
      rgba(16, 185, 129, 0.12),
      rgba(79, 142, 111, 0.2) 55%,
      rgba(245, 248, 246, 1)
    ),
    radial-gradient(circle at top right, rgba(52, 211, 153, 0.15), transparent 40%),
    radial-gradient(circle at 10% 50%, rgba(79, 142, 111, 0.12), transparent 55%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-card .details {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.project-card:hover .details {
  opacity: 1;
  transform: translateY(0);
}