/* ============================================
   HEADER LOGO ANIMATION - Part 2
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Wrapper */
.header-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  text-decoration: none;
}

/* Header Logo */
.header-logo {
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease;
}

.header-logo-wrapper:hover .header-logo {
  transform: scale(1.1);
}

/* Logo circle - starts colorful */
.header-circle {
  transition: stroke 0.4s ease-out 1.2s; /* Delay until animation ends */
}

/* Waves animation (stream flow effect) */
.header-wave {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  opacity: 0;
}

/* Wave flow animation timing */
.header-wave-1 {
  animation: headerWaveFlow 0.6s ease-out 0.2s forwards;
}

.header-wave-2 {
  animation: headerWaveFlow 0.6s ease-out 0.4s forwards;
}

.header-wave-3 {
  animation: headerWaveFlow 0.6s ease-out 0.6s forwards;
}

@keyframes headerWaveFlow {
  0% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Particles appear and float */
.header-particle {
  opacity: 0;
  animation: particleAppear 0.8s ease-out 0.3s forwards;
}

.header-particle:nth-child(1) { animation-delay: 0.3s; }
.header-particle:nth-child(2) { animation-delay: 0.5s; }
.header-particle:nth-child(3) { animation-delay: 0.7s; }

@keyframes particleAppear {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translateY(-5px);
  }
  100% {
    opacity: 0.7;
    transform: scale(1) translateY(0);
  }
}

/* Flow effect (the shine that passes through) */
.header-flow {
  opacity: 0;
  animation: flowReveal 0.6s ease-out 0.1s forwards;
}

@keyframes flowReveal {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Logo text */
.header-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: textFadeIn 0.5s ease-out 0.8s forwards;
  transition: all 0.3s ease;
}

@keyframes textFadeIn {
  to {
    opacity: 1;
  }
}

/* Animation completed state */
.header-logo.animation-complete .gradient-start,
.header-logo.animation-complete .gradient-mid,
.header-logo.animation-complete .gradient-end {
  transition: stop-color 0.4s ease-out;
  stop-color: #1a1a1a;
}

.header-logo.animation-complete .header-circle {
  stroke: #1a1a1a;
}

.header-logo.animation-complete .header-wave {
  stroke: #1a1a1a;
}

.header-logo.animation-complete .header-particle {
  fill: #1a1a1a;
}

.header-logo.animation-complete + .header-logo-text {
  background: #1a1a1a;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Skip animation class */
.header-logo.skip-animation {
  animation: none;
}

.header-logo.skip-animation .gradient-start,
.header-logo.skip-animation .gradient-mid,
.header-logo.skip-animation .gradient-end {
  stop-color: #1a1a1a;
}

.header-logo.skip-animation .header-circle {
  stroke: #1a1a1a;
}

.header-logo.skip-animation .header-wave {
  stroke: #1a1a1a;
  opacity: 1;
  stroke-dashoffset: 0;
}

.header-logo.skip-animation .header-particle {
  opacity: 0.7;
}

.header-logo.skip-animation + .header-logo-text {
  opacity: 1;
  background: #1a1a1a;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Reduced motion - instant black logo */
@media (prefers-reduced-motion: reduce) {
  .header-logo,
  .header-wave,
  .header-particle,
  .header-flow,
  .header-logo-text {
    animation: none !important;
    transition: none !important;
  }

  .header-logo .gradient-start,
  .header-logo .gradient-mid,
  .header-logo .gradient-end {
    stop-color: #1a1a1a;
  }

  .header-circle {
    stroke: #1a1a1a;
  }

  .header-wave {
    stroke: #1a1a1a;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .header-particle {
    opacity: 0.7;
  }

  .header-logo-text {
    opacity: 1;
    background: #1a1a1a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .header-logo {
    width: 40px;
    height: 40px;
  }

  .header-logo-text {
    font-size: 1.25rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(26, 26, 26, 0.95);
  }

  .header-logo.animation-complete .gradient-start,
  .header-logo.animation-complete .gradient-mid,
  .header-logo.animation-complete .gradient-end {
    stop-color: #ffffff;
  }

  .header-logo.animation-complete .header-circle,
  .header-logo.animation-complete .header-wave {
    stroke: #ffffff;
  }

  .header-logo.animation-complete .header-particle {
    fill: #ffffff;
  }

  .header-logo.animation-complete + .header-logo-text {
    background: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}