:root {
  --brand-charcoal: #020617;
  --brand-accent: #3e8b5f;
  --brand-accent-glow: rgba(134, 239, 172, 0.3);
  --brand-text-dim: #94a3b8;
  --brand-orange: #ef9164;
  --brand-rose: #f3bcb4;
  --brand-darkgreen: #1b4445;
  --brand-blue: #609dab;
  --brand-light: #e7e3e2;
}

body {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  color: var(--brand-charcoal);
}

/* Dynamic Background */
.hero-gradient {
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(134, 239, 172, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(134, 239, 172, 0.05) 0%,
      transparent 50%
    );
  background-attachment: fixed;
}

/* Subtle Fade In */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navigation */
.nav-link {
  transition: color 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--brand-accent);
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--brand-accent);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Text Scramble */
.scramble-text {
  color: var(--brand-accent);
  text-shadow: 0 0 15px var(--brand-accent-glow);
}

/* Button */
.btn-primary:hover {
  color: var(--brand-accent);
  box-shadow: 0 10px 20px -5px var(--brand-accent-glow);
}

/* Photo Section */
.profile-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 320px;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(19, 121, 57, 0.15);
  border-radius: 50%;
  animation: rotate 20s linear infinite;
  -webkit-animation: rotate 20s linear infinite;
}

.orbit-1 {
  width: 100%;
  height: 100%;
  border-style: dashed;
  animation-duration: 35s;
}
.orbit-2 {
  width: 85%;
  height: 85%;
  border-color: rgba(66, 87, 30, 0.1);
  animation-direction: reverse;
  animation-duration: 25s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.profile-image-container {
  position: relative;
  width: 240px;
  height: 240px;
  overflow: hidden;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transform: scale(1.1);
}

/* Particles.js Container */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* Screen sizes */
@media (min-width: 1024px) {
  .profile-wrapper {
    width: 400px;
    height: 400px;
  }
  .profile-image-container {
    width: 300px;
    height: 300px;
  }
}