/* ================================ АНИМАЦИЯ НАВИГАЦИИ ================================ */
nav a {
  position: relative;
  text-decoration: none;
  font-size: 16px;
  color: #ccc;
  transition: color 0.4s ease;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #cc86dd;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

nav a:hover {
  color: #fff;
}
nav a:hover::after {
  transform: scaleX(1);
}

nav a.active {
  color: #fff;
}
nav a.active::after {
  transform: scaleX(1);
}

/* ================================ АНИМАЦИЯ ЛОГОТИПА ================================ */
.logo-center {
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  position: relative;
  opacity: 0;
  animation: logoFadeIn 1.5s ease forwards;
}
@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub-center {
  font-size: 36px;
  font-weight: normal;
  font-family: 'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
  color: #cc86dd;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  opacity: 0;
  animation: subLogoFadeIn 1.5s ease forwards;
  animation-delay: 0.6s;
}
@keyframes subLogoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================ АНИМАЦИЯ (ABOUT ME) ================================ */
.subt {
  font-size: 20px;
  color: #ddd;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  opacity: 0;
  animation: subtitleFadeIn 1.5s ease forwards;
  animation-delay: 1.2s;
}
@keyframes subtitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================ АНИМАЦИЯ HERO-SUBTITLE ================================ */
.hero-subtitle {
  opacity: 0;
  transform: translateY(15px);
  animation: heroSubtitleFadeIn 1.5s ease forwards;
  animation-delay: 1.8s;
}
@keyframes heroSubtitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================ АНИМАЦИЯ КНОПОК ССЫЛОК ================================ */
.button {
  opacity: 0;
  transform: translateY(20px);
  animation: buttonFadeInLinks 1.5s ease forwards;
  animation-delay: 2.3s;
}
@keyframes buttonFadeInLinks {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================ SCROLL-TRIGGERED ANIMATIONS ================================ */
.section-about, .section-skills, .section-projects, .section-pricing {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-about.visible, .section-skills.visible, .section-projects.visible, .section-pricing.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Varied Card Animations */
.skill-card, .project-card, .pricing-card, .stat-card {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.visible .skill-card:nth-child(odd), .visible .project-card:nth-child(odd), .visible .pricing-card:nth-child(odd), .visible .stat-card:nth-child(odd) {
    opacity: 1;
    transform: translateX(0);
}

.visible .skill-card:nth-child(even), .visible .project-card:nth-child(even), .visible .pricing-card:nth-child(even), .visible .stat-card:nth-child(even) {
    opacity: 1;
    transform: translateX(0);
}

.skill-card:nth-child(odd), .project-card:nth-child(odd), .pricing-card:nth-child(odd), .stat-card:nth-child(odd) {
    transform: translateX(-50px);
}

.skill-card:nth-child(even), .project-card:nth-child(even), .pricing-card:nth-child(even), .stat-card:nth-child(even) {
    transform: translateX(50px);
}