/* Optymalizacja tła cząsteczek - ograniczony tylko do pierwszej sekcji */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.3; /* Zmniejszona widoczność dla lepszej wydajności */
}

/* Optymalizacja animacji pisania */
.cursor {
  display: inline-block;
  width: 3px;
  background-color: #00a896;
  margin-left: 0.1rem;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Animacja dla elementów hero sekcji */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animacja floating shapes */
@keyframes floatAnimation {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

/* Nowe animacje dla sekcji Start */
@keyframes floatSlow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, 20px);
  }
  100% {
    transform: translate(20px, -20px);
  }
}

/* Animacja dla strzałki przewijania */
@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-5px, -5px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(5px, 5px);
  }
}

/* Usunięcie animacji przewijania dla lepszej wydajności */
.scroll-down {
  display: none;
}

/* Zoptymalizowane animowane statystyki */
.stat-number {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.stat-number.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Zoptymalizowany pasek postępu umiejętności - użycie transform zamiast width */
.skill-progress {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease-out;
}

.skill-item.visible .skill-progress {
  transform: scaleX(1);
}

/* Przycisk powrotu do góry - minimalistyczna animacja */
#back-to-top {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optymalizacja animacji sekcji - tylko przezroczystość */
section {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  transform: translateY(30px);
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animacja elementów z klasą animate-item */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Uproszczone efekty hovera dla kart projektów */
.project-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Animacja dla obrazu profilu */
.profile-img {
  transition: all 0.5s ease;
}

.about-image:hover .profile-img {
  transform: scale(1.03);
}

/* Animacja dla kart umiejętności */
.highlight {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.highlight:hover {
  transform: translateY(-5px);
}

/* Wskazówka dla przeglądarki o zmianach elementów dla optymalizacji */
.animate-in,
.stat-number,
#back-to-top,
.skill-progress,
.hero-shape,
.animate-item {
  will-change: transform, opacity;
}

/* Animacje przejścia dla przełącznika sekcji */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.fade-in {
  animation: fadeInSlideUp 0.5s forwards;
}

.fade-out {
  animation: fadeOutSlideDown 0.3s forwards;
}

.content-section {
  position: relative;
  transition: all 0.5s ease;
}

/* Animacje dla filtrów umiejętności - działają również na urządzeniach mobilnych */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animacja dla aktywnych przycisków kategorii */
.skills-category.active {
  animation: pulseButton 0.3s forwards;
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Animacja dla pojawiających się umiejętności */
.skill-item:not(.hidden) {
  animation: fadeInScale 0.4s forwards;
}

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

/* Dostosowane animacje dla urządzeń mobilnych */
@media (max-width: 768px) {
  /* Usunięcie lub uproszczenie problematycznych animacji */
  .fade-in,
  .fade-out,
  .fadeInLeft,
  .fadeInRight,
  .fadeInScale {
    animation-duration: 0.2s !important; /* Skrócenie czasu animacji */
  }

  /* Wyłączenie animacji dla filtrowania na urządzeniach mobilnych */
  .skill-item {
    animation: none !important; /* Wyłączenie wszystkich animacji */
    transition: none !important; /* Wyłączenie wszystkich przejść */
  }

  /* Uproszczona animacja dla aktywnej kategorii */
  .skills-category.active {
    animation: none; /* Usunięcie animacji pulsu */
  }

  /* Usunięcie animacji hovera */
  .highlight:hover {
    transform: none !important;
  }

  /* Wyłączenie will-change na urządzeniach mobilnych */
  .animate-in,
  .stat-number,
  #back-to-top,
  .skill-progress,
  .hero-shape,
  .animate-item {
    will-change: auto;
  }

  /* Włączenie hardware acceleration dla zawartości umiejętności */
  .skills-container {
    transform: translateZ(0);
  }
}

/* Global animations for use across the site */

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in down animation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in left animation */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in right animation */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Bounce animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Rotate animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shimmer effect for elements */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Shine effect for images */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

/* Float animation for elements */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Pop animation */
@keyframes pop {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Shake animation */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Blinking cursor animation */
@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}

/* Wave animation */
@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Background color wave animation */
@keyframes backgroundWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Flip animation */
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateY(180deg);
  }
}

/* Glow animation */
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(0, 209, 178, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 209, 178, 0.8), 0 0 30px rgba(0, 209, 178, 0.5);
  }
}

/* Utility classes for animations */
.animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate-fade-in {
  animation: fadeIn 1s forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 1s forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 1s forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 1s forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 1s forwards;
}

.animate-scale-in {
  animation: scaleIn 1s forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-rotate {
  animation: rotate 2s infinite linear;
}

.animate-float {
  animation: float 3s infinite ease-in-out;
}

.animate-pop {
  animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-wave {
  animation: wave 2s infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

.animate-glow {
  animation: glow 2s infinite;
}

/* Animation delay utility classes */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-600 {
  animation-delay: 0.6s;
}

.delay-700 {
  animation-delay: 0.7s;
}

.delay-800 {
  animation-delay: 0.8s;
}

.delay-900 {
  animation-delay: 0.9s;
}

.delay-1000 {
  animation-delay: 1s;
}

/* Animation duration utility classes */
.duration-300 {
  animation-duration: 0.3s;
}

.duration-500 {
  animation-duration: 0.5s;
}

.duration-1000 {
  animation-duration: 1s;
}

.duration-1500 {
  animation-duration: 1.5s;
}

.duration-2000 {
  animation-duration: 2s;
}

/* Add shimmer effect to elements with this class */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Add shine effect to images with this class */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%) rotate(45deg);
  animation: shine 3s infinite;
}

/* Add animated gradient background */
.gradient-bg {
  background: linear-gradient(-45deg, #00d1b2, #4facfe, #00d1b2, #7a43f5);
  background-size: 400% 400%;
  animation: backgroundWave 15s ease infinite;
}

/* Optimize animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate,
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-scale-in,
  .animate-pulse,
  .animate-bounce,
  .animate-rotate,
  .animate-float,
  .animate-pop,
  .animate-shake,
  .animate-wave,
  .animate-glow {
    animation: none !important;
    transform: none !important;
  }
}