/* animations.css */
/* Global Animation Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

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

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slide {
  0% {
    left: -40px;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    left: 140px;
    opacity: 0;
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 4px #e63946);
  }
  100% {
    filter: drop-shadow(0 0 14px #e63946);
  }
}

@keyframes glowing-slide {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes hover-slide {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ===== Nav entrance ===== */
@keyframes navSlideFade {
  from {
    opacity: 0;
    transform: translateY(-8px) translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}
@keyframes navFadeOnly {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prep state: keep things invisible until we trigger */
.nav.nav-seq .nav-logo img,
.nav.nav-seq #contact-me,
.nav.nav-seq nav li {
  opacity: 0;
}

/* Animate state */
.nav.nav-animate .nav-logo img {
  animation: navFadeOnly 1s ease forwards 0.12s; /* fade only */
}

/* Links slide+fade in RIGHT→LEFT using nth-last-child */
.nav.nav-animate nav li {
  animation: navSlideFade 1s ease forwards; /* was 0.6s */
}
.nav.nav-animate nav li:nth-last-child(1) {
  animation-delay: 0.2s; /* Organizations */
}
.nav.nav-animate nav li:nth-last-child(2) {
  animation-delay: 0.4s; /* Awards */
}
.nav.nav-animate nav li:nth-last-child(3) {
  animation-delay: 0.6s; /* Skills */
}
.nav.nav-animate nav li:nth-last-child(4) {
  animation-delay: 0.8s; /* Projects */
}
.nav.nav-animate nav li:nth-last-child(5) {
  animation-delay: 1s; /* Home */
}

/* Contact button after the links */
.nav.nav-animate #contact-me {
  animation: navSlideFade 1s ease forwards 1.3s; /* was 0.6s and 0.68s delay */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav.nav-animate nav li,
  .nav.nav-animate #contact-me,
  .nav.nav-animate .nav-logo img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Hey i am */
.intro-text {
  animation: fadeInUp 0.8s ease forwards;
}

/* APIRING */
.right-intro {
  animation: fadeInUp 0.8s ease forwards;
  display: block; /* Ensure it's visible when animated in */
}

/* Animation wrappers (initial hidden state) */
.animate-left,
.animate-right,
.animate-center,
.animate-left-child,
.animate-right-child {
  opacity: 0;
  transform: translateY(40px);
}

/* When ready to animate (triggered by JS after preloader) */
.animate-start.animate-left {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.3s;
}

.animate-start.animate-left-child:nth-child(2) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

.animate-start.animate-left-child:nth-child(3) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.9s;
}

.animate-start.animate-left-child:nth-child(4) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1.2s;
}

.animate-start.animate-left-child:nth-child(5) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1.5s;
}

.animate-start.animate-center {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.1s;
}

.animate-start.animate-right {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.4s;
}

.animate-start.animate-right-child:nth-child(2) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.7s;
}

.animate-start.animate-right-child:nth-child(3) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1s;
}

.animate-start.animate-right-child:nth-child(4) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1.3s;
}

.animate-start.animate-right-child:nth-child(5) {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1.6s;
}

/* Preloader animations */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10000;
  animation: fadeOut 1s ease 3s forwards;
}

.loader {
  text-align: center;
  animation: fadeIn 1s ease;
}

.loader .logo {
  width: 40px;
  animation: pulse 2s ease-in-out infinite;
}

.loader .name {
  font-size: 24px; /* tweak to taste (22–26 works well) */
  line-height: 1.2;
  margin: 6px 0 2px;
  letter-spacing: 0.3px;
}

.loader .subtitle {
  padding-top: 5px;
  font-size: 16px; /* tweak to taste (22–26 works well) */
  letter-spacing: 0.3px;
}

.underline .bar {
  position: absolute;
  width: 40px;
  height: 100%;
  background-color: #e63946;
  animation: slide 1.4s ease-in-out infinite;
  border-radius: 2px;
  opacity: 0.9;
  box-shadow: 0 0 8px #e63946, 0 0 16px #e63946;
}

/* Button animations */
.btn-download-cv::before {
  animation: glowing-slide 6s ease infinite;
}

.btn-download-cv:hover::before {
  animation: hover-slide 7s ease infinite;
}

/* Logo glow animation */
.nav-logo img:hover {
  animation: glow 1.5s infinite alternate;
}

/* ===== Projects slide-in on scroll ===== */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* section titles animations */

/* Initial hidden state for children */
.projects .project-item.proj-prep .project-slideshow,
.projects .project-item.proj-prep .project-details {
  opacity: 0;
  transform: translateX(0); /* no shift until we animate */
}

/* Animate LEFT */
.projects .project-item.proj-animate.from-left .project-slideshow {
  animation: slideInLeft 0.9s ease forwards;
}
.projects .project-item.proj-animate.from-left .project-details {
  animation: slideInLeft 0.9s ease forwards 0.12s; /* slight stagger */
}

/* Animate RIGHT */
.projects .project-item.proj-animate.from-right .project-slideshow {
  animation: slideInRight 0.9s ease forwards;
}
.projects .project-item.proj-animate.from-right .project-details {
  animation: slideInRight 0.9s ease forwards 0.12s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .projects .project-item.proj-prep .project-slideshow,
  .projects .project-item.proj-prep .project-details,
  .projects .project-item.proj-animate.from-left .project-slideshow,
  .projects .project-item.proj-animate.from-left .project-details,
  .projects .project-item.proj-animate.from-right .project-slideshow,
  .projects .project-item.proj-animate.from-right .project-details {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}