/**
 * Vivid Frequency v11.2.0 — Animated chakra spectrum bar
 * The Spiritual Agency · spiritual.agency
 *
 * Renders a 3px animated rainbow strip under Blocksy's middle header row,
 * sweeping the seven chakra tier colours left to right. Brand signature.
 *
 * DEFAULT: ON for all pages.
 * OPT-OUT: add `no-vf-spectrum` to the body class on a page-by-page basis
 *          (e.g. via Blocksy's Page Settings → Custom Body Classes, or via
 *          a body_class filter for whole templates).
 *
 * !important justified: Blocksy header [data-row="middle"] sets position
 * inline; our ::after pseudo-element inherits that stacking context.
 * ============================================================================ */

body:not(.no-vf-spectrum) header.ct-header [data-row="middle"] {
  position: relative !important;
}

body:not(.no-vf-spectrum) header.ct-header [data-row="middle"]::after {
  content:           '';
  position:          absolute;
  bottom:            0;
  left:              0;
  right:             0;
  height:            3px;
  background-image:  var(--vf-grad-spectrum);
  background-size:   200% 100%;
  background-repeat: repeat-x;
  animation:         vf-spectrum-flow 15s linear infinite;
  box-shadow:        0 0 6px rgba(255, 0, 139, 0.35),
                     0 0 14px rgba(8, 150, 242, 0.20);
  z-index:           100;
  pointer-events:    none;
  opacity:           0.85;
}

@keyframes vf-spectrum-flow {
  from { background-position: 0%   50%; }
  to   { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.no-vf-spectrum) header.ct-header [data-row="middle"]::after {
    animation: none;
  }
}

/* End spectrum-bar.css v11.2.0 */