/* ============================================
   PORTFOLIO — ANIMATIONS
   ============================================ */

/* ---------- Fade In on Scroll ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }
.fade-in:nth-child(5) { transition-delay: 0.4s; }
.fade-in:nth-child(6) { transition-delay: 0.5s; }

/* ---------- Typing Cursor Blink ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------- Scroll Arrow Bounce ---------- */
@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(-8px);
  }
  60% {
    transform: rotate(45deg) translateY(-4px);
  }
}

/* ---------- Hero Background Gradient Shift ---------- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero {
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

/* ---------- Background Shape Floating ---------- */
@keyframes floatBg {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -25px) rotate(5deg); }
  50% { transform: translate(-15px, 15px) rotate(-3deg); }
  75% { transform: translate(10px, -10px) rotate(2deg); }
}

/* ---------- Ambient Glow Float ---------- */
@keyframes glowFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--glow-opacity);
  }
  33% {
    transform: translate(20px, -20px) scale(1.08);
    opacity: calc(var(--glow-opacity) + 0.03);
  }
  66% {
    transform: translate(-15px, 15px) scale(0.95);
    opacity: calc(var(--glow-opacity) - 0.02);
  }
}

.hero-ambient-glow.glow-1 {
  --glow-opacity: 0.06;
  animation: glowFloat 14s ease-in-out infinite;
}

.hero-ambient-glow.glow-2 {
  --glow-opacity: 0.03;
  animation: glowFloat 18s ease-in-out infinite reverse;
}

/* ---------- Ambient Glow Float ---------- */
@keyframes ambientGlowShift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--glow-opacity);
  }
  33% {
    transform: translate(25px, -15px) scale(1.05);
    opacity: calc(var(--glow-opacity) + 0.02);
  }
  66% {
    transform: translate(-15px, 20px) scale(0.95);
    opacity: calc(var(--glow-opacity) - 0.015);
  }
}

.about-ambient-glow.glow-orange {
  --glow-opacity: 0.08;
  animation: ambientGlowShift 20s ease-in-out infinite;
}

/* ---------- Projects Ambient Glow ---------- */
.projects-glow.glow-blue {
  --glow-opacity: 0.06;
  animation: ambientGlowShift 22s ease-in-out infinite;
}

/* ---------- Contact Ambient Glow ---------- */
.contact-glow.glow-blue {
  --glow-opacity: 0.05;
  animation: ambientGlowShift 24s ease-in-out infinite;
}

/* ---------- Project Card Shine ---------- */
.project-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: left 0.2s ease;
  pointer-events: none;
}

.project-card {
  position: relative;
}

.project-card:hover::after {
  left: 100%;
}

/* ---------- Contact Icon Pulse ---------- */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.3); }
  70% { box-shadow: 0 0 0 12px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.contact-icon-link:hover {
  animation: pulse 1.5s infinite;
}

/* ---------- Button Ripple ---------- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  pointer-events: none;
}

.btn:active::after {
  width: 300px;
  height: 300px;
}

/* ---------- Profile Frame Morph ---------- */
@keyframes morph {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%  { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50%  { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%  { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

.profile-frame::before {
  animation: morph 8s ease-in-out infinite;
}

.profile-placeholder {
  animation: morph 8s ease-in-out infinite;
}

/* ---------- Section Title Underline Grow ---------- */
.section-title::after {
  transform: scaleX(0);
  transition: transform 0.6s ease 0.2s;
}

.section-title.visible::after {
  transform: scaleX(1);
}

/* ---------- Tech Tag Hover ---------- */
.tech-tag {
  transition: all var(--transition);
}

.tech-tag:hover {
  background: rgba(255, 107, 53, 0.3);
  transform: scale(1.05);
}

/* ---------- Modal Animations ---------- */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}