@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes backgroundZoom {
  0%,100% { background-size: 800% 800%; }
  50% { background-size: 820% 820%; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes textGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  padding-bottom: 40px;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #333;
  transition: background 0.5s, color 0.5s;
  background: linear-gradient(270deg, #e0f2ff, #f8e1ff, #e0f7e9, #fff5e6);
  background-size: 800% 800%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  animation: gradientMove 18s ease infinite, backgroundZoom 30s ease-in-out infinite;
}
body.dark-mode {
  color: #e5e5e5;
  background: linear-gradient(270deg, #0f2027, #203a43, #2c5364);
  background-size: 800% 800%;
  background-attachment: fixed;
  animation: gradientMove 20s ease infinite, backgroundZoom 35s ease-in-out infinite;
}
body.high-contrast {
  background: #000 !important;
  color: #fff !important;
  animation: none !important;
}

.hero-content {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.2s ease-out forwards;
  animation-delay: 0.5s;
}
.hero h1 {
  background: linear-gradient(90deg, #0077ff, #8a2be2, #ff4081);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: textGradient 8s ease-in-out infinite;
}

.project-card {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
}
.project-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}
.project-card:hover::before { opacity: 1; }
.project-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 25px rgba(0,0,0,0.15); filter: brightness(1.05); z-index: 2; }
.project-card img { max-width: 100px; max-height: 100px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; transition: transform 0.3s ease, filter 0.3s ease; }
.project-card img:hover { transform: scale(1.05); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); }

.projects-grid .col { opacity: 0; transform: translateY(20px); }

.footer {
  background-color: rgba(0,0,0,0.85);
  color: #fff;
  padding: 20px 0;
  font-size: 0.9rem;
}
.footer a { color: #fff; text-decoration: none; transition: color 0.3s ease; }
.footer a:hover { color: #ffd700; }
.footer small { display: block; margin-top: 5px; color: #ccc; }