/* 
===================
SVG Animations
===================
1. General SVG Styles
2. Logo SVGs
3. Hero SVG
4. Content SVGs
5. Animation Keyframes
===================
*/

/* =============== 1. General SVG Styles =============== */
.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.svg-responsive {
  display: block;
  width: 100%;
  height: 100%;
}

.svg-animated {
  transition: all 0.5s ease;
}

.svg-animated:hover {
  transform: scale(1.05);
}

.svg-animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.svg-animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============== 2. Logo SVGs =============== */
.logo-svg {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-svg circle {
  fill: var(--primary-color);
  transition: all 0.5s ease;
}

.logo-svg path {
  fill: white;
  transition: all 0.5s ease;
}

.logo:hover .logo-svg circle {
  fill: var(--primary-dark);
}

.footer-logo .logo-svg circle {
  fill: white;
}

.footer-logo .logo-svg path {
  fill: var(--primary-color);
}

/* =============== 3. Hero SVG =============== */
.hero-svg-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-wave {
  transform-origin: center;
  transition: all 1s ease;
}

.hero-svg-background .hero-parallax-element {
  transition: transform 0.5s ease;
}

@keyframes float-wave {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* =============== 4. Content SVGs =============== */
.about-svg {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: var(--border-radius);
}

.portfolio-svg {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
}

.portfolio-item:hover .portfolio-svg rect,
.portfolio-item:hover .portfolio-svg circle {
  animation: moveElements 2s infinite alternate;
}

.testimonial-avatar-svg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 1.5rem;
}

.team-avatar-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

/* =============== 5. Animation Keyframes =============== */
@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes moveElements {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, 5px);
  }
}

@keyframes rotateElement {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animation Classes */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

.rotate-animation {
  animation: rotateElement 10s linear infinite;
}

.pulse-animation {
  animation: pulse 4s infinite alternate;
}

.wave-animation {
  animation: wave 20s ease-in-out infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.8);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

@keyframes shimmer {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}