/* ════════════════════════════════════════════════════════════════
   PULSAR · WHITE-LABEL PULSE EFFECTS
   ════════════════════════════════════════════════════════════════
   Console-brand inspired (PS5/Xbox-style): the pulse line is the
   PULSAR signature. It should appear prominently across major
   panels, with glow + animation. White-label = uses ONLY the
   gradient (#7048E8 → #A55EFF), no semantic colors.

   USAGE:
     <div class="panel-with-pulse">
       <svg class="ambient-pulse">...</svg>
       <h2>Header</h2>
     </div>

   COMPONENTS:
     .ambient-pulse    — animated EKG line decoration
     .panel-pulse-top  — pulse strip across the top of a panel
     .panel-pulse-side — vertical pulse line on the left edge
     .glow-orb         — floating violet orb (Xbox dashboard tile vibe)
     .ambient-stage    — full-bleed background ambient layer
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. Inline ambient pulse line (decorative SVG) ─── */
.ambient-pulse {
  display: block;
  width: 100%;
  height: 28px;
  opacity: .55;
  pointer-events: none;
}
.ambient-pulse path,
.ambient-pulse polyline {
  fill: none;
  stroke: url(#pulsarPulseGrad);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  filter: drop-shadow(0 0 4px rgba(165, 94, 255, .35));
  animation: pulsar-ambient-draw 4s cubic-bezier(.25, .1, .25, 1) infinite;
}
@keyframes pulsar-ambient-draw {
  0%   { stroke-dashoffset: 240; opacity: .4; }
  50%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -240; opacity: .4; }
}

/* ─── 2. Panel-top pulse strip — full-width bar that "pulses" ─── */
.panel-pulse-top {
  position: relative;
}
.panel-pulse-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(112, 72, 232, .25) 20%,
    rgba(165, 94, 255, .9) 50%,
    rgba(112, 72, 232, .25) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: pulsar-strip-sweep 4s cubic-bezier(.25, .1, .25, 1) infinite;
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  z-index: 2;
}
@keyframes pulsar-strip-sweep {
  0%   { background-position: -100% 0; opacity: .8; }
  50%  { background-position:   50% 0; opacity: 1; }
  100% { background-position:  200% 0; opacity: .8; }
}

/* ─── 3. Side rail pulse — vertical glowing line on left edge ─── */
.panel-pulse-side {
  position: relative;
}
.panel-pulse-side::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(112, 72, 232, .6) 30%,
    rgba(165, 94, 255, .9) 50%,
    rgba(112, 72, 232, .6) 70%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: pulsar-rail-flow 5s cubic-bezier(.25, .1, .25, 1) infinite;
  border-radius: 0 2px 2px 0;
  filter: drop-shadow(0 0 4px rgba(165, 94, 255, .4));
  pointer-events: none;
}
@keyframes pulsar-rail-flow {
  0%   { background-position: 0 -100%; opacity: .7; }
  50%  { background-position: 0    0%; opacity: 1; }
  100% { background-position: 0  100%; opacity: .7; }
}

/* ─── 4. Floating glow orb — Xbox dashboard-tile vibe ─── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(165, 94, 255, .18) 0%,
    rgba(112, 72, 232, .07) 40%,
    transparent 70%
  );
  filter: blur(40px);
  animation: pulsar-orb-float 8s cubic-bezier(.4, 0, .2, 1) infinite;
}
.glow-orb.sm { width: 120px; height: 120px; }
.glow-orb.md { width: 220px; height: 220px; }
.glow-orb.lg { width: 360px; height: 360px; }
.glow-orb.violet { background: radial-gradient(circle, rgba(112,72,232,.18) 0%, rgba(112,72,232,.06) 40%, transparent 70%); }
.glow-orb.lilac  { background: radial-gradient(circle, rgba(165,94,255,.18) 0%, rgba(165,94,255,.06) 40%, transparent 70%); }
@keyframes pulsar-orb-float {
  0%, 100% { transform: translate(0, 0)      scale(1);    opacity: .9; }
  33%      { transform: translate(8px, -6px) scale(1.04); opacity: 1; }
  66%      { transform: translate(-6px, 8px) scale(.96);  opacity: .85; }
}

/* ─── 5. Ambient stage — full-bleed bg layer for hero panels ─── */
.ambient-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}
.ambient-stage > .glow-orb-1 { top: -40px; right: -40px; }
.ambient-stage > .glow-orb-2 { bottom: -60px; left: -60px; animation-delay: -2s; }
.ambient-stage > .glow-orb-3 { top: 40%; right: 20%; animation-delay: -4s; opacity: .6; }
.ambient-stage > .pulse-strip {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 36px;
  transform: translateY(-50%);
  opacity: .25;
}

/* ─── 6. Heart-beat micro-indicator (status dot replacement) ─── */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pulsar-primary);
  box-shadow: 0 0 8px rgba(165, 94, 255, .6);
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulsar-dot-ring 2s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes pulsar-dot-ring {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(3.5); opacity: 0; }
}
.pulse-dot.live { background: var(--state-good); box-shadow: 0 0 8px rgba(8,193,106,.5); }
.pulse-dot.live::before { background: var(--state-good); }

/* ─── 7. Content-area parents need this to host pulse elements ─── */
.has-pulse {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.has-pulse > :not(.ambient-stage):not(.glow-orb):not(.ambient-pulse) {
  position: relative;
  z-index: 1;
}

/* ─── 8. Reduced motion respect ─── */
@media (prefers-reduced-motion: reduce) {
  .ambient-pulse path,
  .ambient-pulse polyline,
  .panel-pulse-top::before,
  .panel-pulse-side::before,
  .glow-orb,
  .pulse-dot::before {
    animation: none !important;
  }
  .ambient-pulse path,
  .ambient-pulse polyline { stroke-dashoffset: 0; opacity: 1; }
}