/* ─── Extra animations that load after main CSS ─── */

/* Particle canvas background shimmer */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Tilt card shine */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.3s;
}

.project-card:hover::after { opacity: 1; }

/* Nav link glitch hover effect */
.nav-link::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-purple);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.3s var(--ease);
  white-space: nowrap;
}

.nav-link:hover::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Floating particles overlay */
.particles-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleDrift linear infinite;
  opacity: 0;
}

@keyframes particleDrift {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(-100px) translateX(var(--drift, 0px)) scale(1.5);
    opacity: 0;
  }
}

/* Form success state */
.form-success {
  text-align: center;
  padding: 40px;
  animation: successPop 0.5s var(--ease);
}

@keyframes successPop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.form-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--c-purple), var(--c-cyan));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

/* ── About 3D canvas gradient overlay ── */
.about-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(168,85,247,0.05), transparent 70%);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 1;
}

/* ── Contact form success animation ── */
#submitBtn.success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 8px 32px rgba(34,197,94,0.3) !important;
}

/* ── Section entrance animations ── */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up:nth-child(1) { transition-delay: 0.1s; }
.fade-up:nth-child(2) { transition-delay: 0.2s; }
.fade-up:nth-child(3) { transition-delay: 0.3s; }
.fade-up:nth-child(4) { transition-delay: 0.4s; }