/* Fade Scroll Animation Styles */

/* Base styles for fade animation */
.fade-in-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* When section is visible */
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Different animation delays for staggered effect */
.fade-in-section.delay-1 {
  transition-delay: 0.1s;
}

.fade-in-section.delay-2 {
  transition-delay: 0.2s;
}

.fade-in-section.delay-3 {
  transition-delay: 0.3s;
}

.fade-in-section.delay-4 {
  transition-delay: 0.4s;
}

/* Animation variants for different effects */

/* Slide from left */
.fade-slide-left {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-slide-left.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from right */
.fade-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up animation */
.fade-scale-up {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-scale-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Rotate and fade */
.fade-rotate {
  opacity: 0;
  transform: rotate(-5deg) translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-rotate.is-visible {
  opacity: 1;
  transform: rotate(0deg) translateY(0);
}

/* Specific section animations */

/* Home section - no animation to prevent layout shift */
#home .fade-in-section {
  opacity: 1 !important;
  transform: none !important;
}

#home .fade-in-section.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Experience section - slide from left */
#experience .fade-in-section {
  transform: translateX(-40px) translateY(20px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

#experience .fade-in-section.is-visible {
  transform: translateX(0) translateY(0);
}

/* Projects section - various animations for different elements */
#projects .tech-stack-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#projects .tech-stack-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#projects .projects-container {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  /* transition-delay: 0.2s; */
}

#projects .projects-container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#projects .videos-container {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  /* transition-delay: 0.4s; */
}

#projects .videos-container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#projects .fun-area-container {
  opacity: 0;
  transform: scale(0.9) rotate(-2deg);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: 0.6s;
}

#projects .fun-area-container.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Contact section - slide up with bounce */
#contact .fade-in-section {
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#contact .fade-in-section.is-visible {
  transform: translateY(0);
}

/* Animation for individual project cards - preserve hover effects */
.project-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.project-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Match exact transition from projects.css */
  transition: all 0.3s ease;
}

/* Exact hover effects from projects.css */
.project-card.is-visible:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: #ccc;
}

.project-card:nth-child(1).is-visible {
  transition-delay: 0.1s;
}

.project-card:nth-child(2).is-visible {
  transition-delay: 0.2s;
}

.project-card:nth-child(3).is-visible {
  transition-delay: 0.3s;
}

/* Animation for video cards - preserve hover effects */
.video-card {
  opacity: 0;
  transform: translateY(20px) rotateY(10deg);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.video-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotateY(0deg);
  transition: all 0.3s ease;
}


/* Video card hover effects - only card movement, no video zoom */
.video-card.is-visible:hover {
  transform: translateY(-8px) rotateY(0deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: #ccc;
}

/* Dark mode hover effects for project cards */
body.dark .project-card.is-visible:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
  border-color: #555;
}

/* Dark mode hover effects for video cards */
body.dark .video-card.is-visible:hover {
  transform: translateY(-8px) rotateY(0deg);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
  border-color: #555;
}

/* Image hover effects for project cards */
.project-card.is-visible:hover .project-image img,
.project-card.is-visible:hover .project-placeholder img {
  transform: scale(1.05);
}

/* Video hover effects - removed zoom effect */

.video-card:nth-child(1).is-visible {
  transition-delay: 0.1s;
}

.video-card:nth-child(2).is-visible {
  transition-delay: 0.3s;
}

/* Timeline items animation */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-item:nth-child(1).is-visible {
  transition-delay: 0.1s;
}

.timeline-item:nth-child(2).is-visible {
  transition-delay: 0.2s;
}

.timeline-item:nth-child(3).is-visible {
  transition-delay: 0.3s;
}

.timeline-item:nth-child(4).is-visible {
  transition-delay: 0.4s;
}

/* Tech stack icons animation */
.tech-flexbox img {
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.tech-flexbox img.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered animation for tech icons - counting only img elements */
.tech-flexbox img:nth-of-type(1).is-visible { transition-delay: 0.1s; } /* HTML5 */
.tech-flexbox img:nth-of-type(2).is-visible { transition-delay: 0.2s; } /* CSS3 */
.tech-flexbox img:nth-of-type(3).is-visible { transition-delay: 0.3s; } /* Tailwind */
.tech-flexbox img:nth-of-type(4).is-visible { transition-delay: 0.4s; } /* JavaScript */
.tech-flexbox img:nth-of-type(5).is-visible { transition-delay: 0.5s; } /* React */
.tech-flexbox img:nth-of-type(6).is-visible { transition-delay: 0.6s; } /* Python */
.tech-flexbox img:nth-of-type(7).is-visible { transition-delay: 0.7s; } /* DaVinci Resolve */
.tech-flexbox img:nth-of-type(8).is-visible { transition-delay: 0.8s; } /* Spline */
.tech-flexbox img:nth-of-type(9).is-visible { transition-delay: 0.9s; } /* Figma */

/* Form elements animation */
.form-group {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.form-group:nth-child(1).is-visible { transition-delay: 0.1s; }
.form-group:nth-child(2).is-visible { transition-delay: 0.2s; }
.form-group:nth-child(3).is-visible { transition-delay: 0.3s; }

.submit-btn {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: 0.4s;
}

.submit-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section,
  .fade-slide-left,
  .fade-slide-right,
  .fade-scale-up,
  .fade-rotate,
  .project-card,
  .video-card,
  .timeline-item,
  .tech-flexbox img,
  .form-group,
  .submit-btn {
    transition: opacity 0.3s ease-out;
    transform: none !important;
  }
  
  .fade-in-section.is-visible,
  .fade-slide-left.is-visible,
  .fade-slide-right.is-visible,
  .fade-scale-up.is-visible,
  .fade-rotate.is-visible,
  .project-card.is-visible,
  .video-card.is-visible,
  .timeline-item.is-visible,
  .tech-flexbox img.is-visible,
  .form-group.is-visible,
  .submit-btn.is-visible {
    transform: none !important;
  }
}

.videos-grid .video-card:nth-child(1).is-visible {
  transition-delay: 0.1s;
}

.videos-grid .video-card:nth-child(2).is-visible {
  transition-delay: 0.2s;
}

.videos-grid .video-card:nth-child(3).is-visible {
  transition-delay: 0.3s;
}

.videos-grid .video-card:nth-child(4).is-visible {
  transition-delay: 0.4s;
}