/**
 * Signal Institute — Wavelength mark component
 * Reusable animated wavelength SVG. Use class .signal-wavelength on a container
 * that has the inline SVG inside, or use .signal-wavelength--standalone for icon-only use.
 */

.signal-wavelength {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
  border: none;
  outline: none;
}

.signal-wavelength svg {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

/* Fill follows currentColor so parent can set color */
.signal-wavelength path {
  fill: currentColor;
}

/* Reveal animation on load */
.signal-wavelength[data-animate="reveal"] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: wavelengthReveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes wavelengthReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

/* Subtle breathing / glow pulse (optional, add data-breathe="true") */
.signal-wavelength[data-breathe="true"] path {
  animation: wavelengthBreathe 3s ease-in-out infinite;
}

@keyframes wavelengthBreathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: 0.92; filter: drop-shadow(0 0 4px currentColor); }
}

/* Reduce motion: disable animations */
@media (prefers-reduced-motion: reduce) {
  .signal-wavelength[data-animate="reveal"] {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
  .signal-wavelength[data-breathe="true"] path {
    animation: none;
  }
}

/* When document has reduced-motion preference from settings */
[data-reduce-motion="true"] .signal-wavelength[data-animate="reveal"] {
  animation: none;
  opacity: 1;
  clip-path: none;
}
[data-reduce-motion="true"] .signal-wavelength[data-breathe="true"] path {
  animation: none;
}

/* Full logo: wavelength + wordmark */
.signal-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.signal-logo .signal-wavelength {
  flex-shrink: 0;
}

.signal-logo .signal-wordmark {
  height: 30px;
  width: 160px;
  display: block;
  opacity: 0;
  animation: signalWordmarkReveal 0.6s ease forwards 0.4s;
}

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

[data-reduce-motion="true"] .signal-logo .signal-wordmark {
  animation: none;
  opacity: 1;
}