/**
 * Vivid Frequency v11.2.0 — Chakra pulse animation
 * The Spiritual Agency · spiritual.agency
 *
 * Consolidates five legacy implementations from v11.1.0:
 *   .vf-chakrapulse                    (canonical, markup-driven)
 *   .sa-chakra-pulse                   (shortcode-driven, [sa_chakra_pulse])
 *   .sa-svcs .sa-chakrapulse           (deleted — migrated to Services CB)
 *   .sa-tree-hero__chakrapulse         (deleted — migrated to Tree CB)
 *   .sa-shw-hero-inner .sa-chakrapulse (deleted — migrated to Showcase CB)
 * plus the @keyframes definition that was inline-styled in functions.php.
 *
 * Two render surfaces:
 *
 *   .vf-chakrapulse     Canonical Vivid Frequency markup. Pages and Content
 *                       Blocks emit seven <span> children inside the wrapper.
 *
 *   .sa-chakra-pulse    Emitted by the [sa_chakra_pulse] PHP shortcode. Each
 *                       dot carries .sa-cp-dot--N (1..7) so colours and
 *                       animation delays come from CSS, not inline styles.
 * ============================================================================ */


/* ============================================================================
   Shared keyframe — both surfaces use the same animation
   ============================================================================ */
@keyframes vf-cp-anim {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.45); opacity: 1; }
}


/* ============================================================================
   .vf-chakrapulse — markup-driven (used inside .vf wrappers and CBs)
   Required markup:
     <div class="vf-chakrapulse">
       <span></span><span></span><span></span><span></span>
       <span></span><span></span><span></span>
     </div>
   ============================================================================ */
.vf-chakrapulse {
  display:         inline-flex;
  gap:             0.55rem;
  align-items:     center;
  justify-content: center;
  line-height:     1;
}

.vf-chakrapulse span {
  display:        block;
  width:          9px;
  height:         9px;
  border-radius:  50%;
  animation:      vf-cp-anim 2s ease-in-out infinite;
  will-change:    transform, opacity;
}

.vf-chakrapulse span:nth-child(1) { background: var(--sa-t1); animation-delay: 0s;    }
.vf-chakrapulse span:nth-child(2) { background: var(--sa-t2); animation-delay: 0.18s; }
.vf-chakrapulse span:nth-child(3) { background: var(--sa-t3); animation-delay: 0.36s; }
.vf-chakrapulse span:nth-child(4) { background: var(--sa-t4); animation-delay: 0.54s; }
.vf-chakrapulse span:nth-child(5) { background: var(--sa-t5); animation-delay: 0.72s; }
.vf-chakrapulse span:nth-child(6) { background: var(--sa-t6); animation-delay: 0.90s; }
.vf-chakrapulse span:nth-child(7) { background: var(--sa-t7); animation-delay: 1.08s; }

/* Larger variant — used by hero stages */
.vf-chakrapulse--lg span {
  width:              14px;
  height:             14px;
  animation-duration: 2.4s;
}


/* ============================================================================
   .sa-chakra-pulse — shortcode-driven (emitted by [sa_chakra_pulse])
   Markup is built in inc/shortcodes.php. The shortcode emits class hooks only
   (.sa-cp-dot--N for colour + delay, .sa-cp-dot--<size> for size). No inline
   styles on the rendered HTML.
   ============================================================================ */
.sa-chakra-pulse {
  display:     flex;
  align-items: center;
  gap:         8px;
  line-height: 1;
}

.sa-chakra-pulse--vertical {
  flex-direction: column;
  align-items:    flex-start;
}

.sa-cp-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}

.sa-cp-dot {
  display:        block;
  border-radius:  50%;
  animation:      vf-cp-anim 2s ease-in-out infinite;
  will-change:    transform, opacity;
}

/* Size variants — `size` shortcode attribute maps to one of these */
.sa-cp-dot--sm { width:  6px; height:  6px; }
.sa-cp-dot--md { width: 10px; height: 10px; }
.sa-cp-dot--lg { width: 16px; height: 16px; }

/* Colour + animation-delay per chakra position. Box-shadow gives each dot a
   soft tier-coloured halo that's visible on Dark Mode without dominating. */
.sa-cp-dot--1 { background: var(--sa-t1); animation-delay: 0s;   box-shadow: 0 0 6px var(--sa-t1); }
.sa-cp-dot--2 { background: var(--sa-t2); animation-delay: 0.2s; box-shadow: 0 0 6px var(--sa-t2); }
.sa-cp-dot--3 { background: var(--sa-t3); animation-delay: 0.4s; box-shadow: 0 0 6px var(--sa-t3); }
.sa-cp-dot--4 { background: var(--sa-t4); animation-delay: 0.6s; box-shadow: 0 0 6px var(--sa-t4); }
.sa-cp-dot--5 { background: var(--sa-t5); animation-delay: 0.8s; box-shadow: 0 0 6px var(--sa-t5); }
.sa-cp-dot--6 { background: var(--sa-t6); animation-delay: 1.0s; box-shadow: 0 0 6px var(--sa-t6); }
.sa-cp-dot--7 { background: var(--sa-t7); animation-delay: 1.2s; box-shadow: 0 0 6px var(--sa-t7); }

/* Optional label under each dot (shortcode `label="yes"` attribute) */
.sa-cp-label {
  font-family:    var(--sa-font);
  font-size:      9px;
  font-weight:    var(--sa-weight-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity:        0.8;
  white-space:    nowrap;
}
.sa-cp-item:nth-child(1) .sa-cp-label { color: var(--sa-t1); }
.sa-cp-item:nth-child(2) .sa-cp-label { color: var(--sa-t2); }
.sa-cp-item:nth-child(3) .sa-cp-label { color: var(--sa-t3); }
.sa-cp-item:nth-child(4) .sa-cp-label { color: var(--sa-t4); }
.sa-cp-item:nth-child(5) .sa-cp-label { color: var(--sa-t5); }
.sa-cp-item:nth-child(6) .sa-cp-label { color: var(--sa-t6); }
.sa-cp-item:nth-child(7) .sa-cp-label { color: var(--sa-t7); }


/* ============================================================================
   Reduced motion respect — both surfaces freeze the animation
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .vf-chakrapulse span,
  .sa-cp-dot {
    animation: none;
    opacity:   1;
    transform: none;
  }
}

/* Tighter gap on small screens — keeps the pulse compact in mobile heroes */
@media (max-width: 768px) {
  .sa-chakra-pulse,
  .vf-chakrapulse {
    gap: 6px;
  }
}

/* End chakra-pulse.css v11.2.0 */