/* ============================================================
   BUILD 055 — VERDANTIS AUDIO SYSTEM
   The Pulse control. Placement only; does not change destination nav.
   ============================================================ */

.site-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.1rem;
  padding: 1.15rem 0 0;
  min-height: 2.75rem;
  flex-shrink: 0;
  align-self: flex-start;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  opacity: 0.8;
  transition: color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}

.site-pulse-sigil {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  overflow: visible;
}

.site-pulse-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 64 36;
  stroke-dashoffset: -10;
}

.site-pulse-core {
  opacity: 0;
}

.site-pulse-bar {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.site-pulse-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-pulse:hover,
.site-pulse:focus-visible {
  color: var(--ink);
  opacity: 1;
}

.site-pulse.is-on {
  color: var(--interior);
  opacity: 1;
}

.site-pulse.is-on .site-pulse-ring {
  stroke-dasharray: 100 0;
  stroke-dashoffset: 0;
}

.site-pulse.is-on .site-pulse-core {
  opacity: 0.92;
}

.site-pulse.is-on:hover,
.site-pulse.is-on:focus-visible {
  color: #f3e6cc;
}

.site-header:not(.is-scrolled) .site-pulse {
  color: #efe4d2;
  opacity: 0.7;
  text-shadow: 0 1px 14px rgba(8, 10, 12, 0.65);
}

.site-header:not(.is-scrolled) .site-pulse.is-on {
  color: var(--interior);
  opacity: 1;
}

.site-pulse.is-on .site-pulse-bar:nth-child(1) {
  animation: verdantis-pulse-wave-outer 2.25s 0.18s ease-in-out infinite alternate;
}

.site-pulse.is-on .site-pulse-bar:nth-child(2) {
  animation: verdantis-pulse-wave-inner 1.7s 0.42s ease-in-out infinite alternate;
}

.site-pulse.is-on .site-pulse-bar:nth-child(3) {
  animation: verdantis-pulse-wave-centre 1.45s ease-in-out infinite alternate;
}

.site-pulse.is-on .site-pulse-bar:nth-child(4) {
  animation: verdantis-pulse-wave-inner 2.05s 0.58s ease-in-out infinite alternate-reverse;
}

.site-pulse.is-on .site-pulse-bar:nth-child(5) {
  animation: verdantis-pulse-wave-outer 1.85s 0.28s ease-in-out infinite alternate-reverse;
}

@keyframes verdantis-pulse-wave-centre {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(1); }
}

@keyframes verdantis-pulse-wave-inner {
  from { transform: scaleY(0.52); }
  to { transform: scaleY(1); }
}

@keyframes verdantis-pulse-wave-outer {
  from { transform: scaleY(0.65); }
  to { transform: scaleY(1); }
}

@media (orientation: landscape) and (max-height: 499px),
       (max-width: 860px) and (orientation: landscape) {
  html.is-nav-open .site-pulse {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    min-height: 2.35rem;
  }
}

html.is-phone-landscape-nav .site-pulse {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  min-height: 2.35rem;
}

@media (min-width: 861px) and (min-height: 500px) {
  .site-header .site-nav,
  .site-header .site-nav:not(.is-open),
  .site-header .site-nav.is-open {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .site-pulse {
    gap: 0.65rem;
    margin-top: 0;
    margin-left: 1.15rem;
    padding: 0.4rem 0 0.4rem 1.15rem;
    min-height: 0;
    border-top: 0;
    border-left: 1px solid rgba(198, 184, 150, 0.28);
  }

  .site-pulse-sigil {
    width: 1.48rem;
    height: 1.48rem;
  }

  .site-pulse-label {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-pulse.is-on .site-pulse-bar,
  html.reduce-motion .site-pulse.is-on .site-pulse-bar {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

html.reduce-motion .site-pulse.is-on .site-pulse-bar {
  animation: none !important;
  opacity: 1;
  transform: none;
}
