/* ═══════════════════════════════════════════════════════════════════
   MAGNA BOLT — the platform's play mark
   Play triangle whose three edges are jagged lightning polylines.
   One edge "strikes" bright (~3/sec), interior verts re-jitter at 8Hz.
   Anchored corners keep the silhouette readable.
   Themed via currentColor (gold) + --magna-bolt-accent (teal/card-accent)
                              + --magna-bolt-idle (electric blue undertone).
   Sizes: sm 24 / md 36 / lg 48 / xl 96.
   ═══════════════════════════════════════════════════════════════════ */

.magna-bolt {
  --magna-bolt-accent: var(--card-accent, var(--th-color-signal, var(--teal, #30D5C8)));
  --magna-bolt-field: rgba(212, 175, 55, 0.16);
  --magna-bolt-idle: #4d8bff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gold, #d4af37);
  cursor: inherit;
  isolation: isolate;
}

.magna-bolt-sm { width: 24px; height: 24px; }
.magna-bolt-md { width: 36px; height: 36px; }
.magna-bolt-lg { width: 48px; height: 48px; }
.magna-bolt-xl { width: 96px; height: 96px; }

/* Breathing magnetic field — pseudo-element so SVG stays clean.
   Toned down from the original (less pronounced base state). */
.magna-bolt::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--magna-bolt-field), transparent 65%);
  opacity: 0.45;
  transform: scale(1);
  pointer-events: none;
  z-index: 0;
  animation: mb-breathe 4.5s ease-in-out infinite;
  transition: background 0.4s ease;
}

/* Electric-blue undertone — sits on top of the gold field with its own slower
   cycle, slightly out-of-phase. */
.magna-bolt::after {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--magna-bolt-idle) 42%, transparent) 0%,
    transparent 62%);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  animation: mb-idle-blue 5.1s ease-in-out infinite;
  transition: opacity 0.35s ease, background 0.35s ease, transform 0.3s ease;
}

.magna-bolt:hover::before,
.magna-bolt[data-hover="1"]::before,
[data-magna-hover] .magna-bolt::before {
  animation-duration: 1.6s;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--magna-bolt-accent) 28%, transparent),
    transparent 65%);
}

.magna-bolt:hover::after,
.magna-bolt[data-hover="1"]::after,
[data-magna-hover] .magna-bolt::after {
  animation-duration: 2.4s;
  opacity: 0.62;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--magna-bolt-idle) 60%, transparent) 0%,
    transparent 65%);
}

.is-playing .magna-bolt::before,
.magna-bolt.is-playing::before,
.is-playing > .magna-bolt::before {
  animation: mb-pulse-aurora 2.2s ease-in-out infinite;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--magna-bolt-accent) 40%, transparent),
    transparent 65%);
}

.is-playing .magna-bolt::after,
.magna-bolt.is-playing::after,
.is-playing > .magna-bolt::after {
  opacity: 0.16;
  animation-duration: 4.2s;
}

.is-paused .magna-bolt::before,
.magna-bolt.is-paused::before {
  animation: none;
  opacity: 0.4;
}

.is-paused .magna-bolt::after,
.magna-bolt.is-paused::after {
  animation: none;
  opacity: 0.18;
}

@keyframes mb-breathe {
  0%, 100% { opacity: 0.32; transform: scale(0.97); }
  50%      { opacity: 0.62; transform: scale(1.04); }
}

@keyframes mb-idle-blue {
  0%, 100% { opacity: 0.20; transform: scale(0.94); }
  50%      { opacity: 0.50; transform: scale(1.10); }
}

@keyframes mb-pulse-aurora {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* SVG container */
.magna-bolt > svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
  transition: filter 0.3s ease, transform 0.2s ease;
}

.magna-bolt:hover > svg,
.magna-bolt[data-hover="1"] > svg,
[data-magna-hover] .magna-bolt > svg {
  filter: drop-shadow(0 0 8px var(--magna-bolt-accent))
          drop-shadow(0 0 14px rgba(212, 175, 55, 0.4));
  transform: scale(1.06);
}

.magna-bolt:active > svg { transform: scale(0.94); }

.is-playing .magna-bolt > svg,
.magna-bolt.is-playing > svg,
.is-playing > .magna-bolt > svg {
  filter: drop-shadow(0 0 10px var(--magna-bolt-accent))
          drop-shadow(0 0 18px rgba(212, 175, 55, 0.3));
}

/* Edges — three polylines drawn by JS */
.mb-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: miter;
  opacity: 0.55;
  transition: opacity 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
}

.mb-edge.mb-strike {
  opacity: 1;
  stroke-width: 2.4;
  stroke: var(--magna-bolt-accent);
  filter: drop-shadow(0 0 3px var(--magna-bolt-accent));
}

.magna-bolt-sm .mb-edge { stroke-width: 1.2; }
.magna-bolt-sm .mb-edge.mb-strike { stroke-width: 1.8; }
.magna-bolt-md .mb-edge { stroke-width: 1.6; }
.magna-bolt-md .mb-edge.mb-strike { stroke-width: 2.4; }
.magna-bolt-lg .mb-edge { stroke-width: 2; }
.magna-bolt-lg .mb-edge.mb-strike { stroke-width: 3; }
.magna-bolt-xl .mb-edge { stroke-width: 2.5; }
.magna-bolt-xl .mb-edge.mb-strike { stroke-width: 3.6; }

/* Centroid dot — the anchor / signal source */
.mb-centroid {
  fill: currentColor;
  opacity: 0.85;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

.is-playing .mb-centroid,
.magna-bolt.is-playing .mb-centroid {
  fill: var(--magna-bolt-accent);
  opacity: 1;
}

/* Sparks — branching strikes (lg/xl only) */
.mb-spark {
  fill: none;
  stroke: var(--magna-bolt-accent);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
}

.mb-spark.mb-spark-active {
  animation: mb-spark-fade 240ms ease-out forwards;
}

@keyframes mb-spark-fade {
  0%   { opacity: 1; stroke-width: 1.2; }
  100% { opacity: 0; stroke-width: 0.6; }
}

/* Click pulse — one-shot expanding ring */
.mb-pulse-ring {
  fill: none;
  stroke: var(--magna-bolt-accent);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50px 50px;
}

.mb-pulse-ring.mb-pulse-active {
  animation: mb-pulse-burst 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mb-pulse-burst {
  0%   { opacity: 0.9; r: 8; stroke-width: 2; }
  100% { opacity: 0;   r: 48; stroke-width: 0.4; }
}

/* ─── Legacy .sig-play compat ───────────────────────────────────────── */
.sig-play.magna-bolt {
  border: 0;
  background: transparent;
  animation: none;
  box-shadow: none;
}
.sig-play.magna-bolt > svg {
  width: 100%;
  height: 100%;
  opacity: 1;
  margin: 0;
  fill: none;
}
.is-playing .sig-play.magna-bolt,
.sig-play.magna-bolt:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  transform: none;
}
.sig-play.magna-bolt:hover {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVATION CHOREOGRAPHY
   .mb-igniting on a container runs a ~1200ms cinematic sequence:
   burst → cohere → laser beam → micro particle burst → text-split →
   extended electric-blue irradiation pulse.
   Triggered by MagnaBolt.activate(containerEl).
   ═══════════════════════════════════════════════════════════════════ */

.mb-igniting .magna-bolt::before {
  animation: mb-burst 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mb-igniting .magna-bolt::after {
  animation: mb-cohere 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mb-igniting .magna-bolt .mb-centroid {
  animation: mb-centroid-flash 240ms ease-out forwards;
}
.mb-igniting .magna-bolt .mb-edge {
  animation: mb-edge-cofire 320ms ease-out forwards;
}

@keyframes mb-burst {
  0%   { opacity: 0.45; transform: scale(1); }
  35%  { opacity: 1;    transform: scale(0.6);
         background: radial-gradient(circle at center,
           color-mix(in srgb, var(--magna-bolt-idle) 90%, white) 0%,
           color-mix(in srgb, var(--magna-bolt-idle) 55%, transparent) 35%,
           transparent 65%); }
  100% { opacity: 0;    transform: scale(0.3); }
}

@keyframes mb-cohere {
  0%   { opacity: 0.3; transform: scale(1) translateX(0); }
  55%  { opacity: 1; transform: scale(0.7) translateX(14%);
         background: radial-gradient(circle at 78% 50%,
           white 0%,
           color-mix(in srgb, var(--magna-bolt-idle) 85%, transparent) 28%,
           transparent 58%); }
  100% { opacity: 0; transform: scale(0.5) translateX(32%); }
}

@keyframes mb-centroid-flash {
  0%   { fill: currentColor; opacity: 0.85; }
  35%  { fill: white; opacity: 1; }
  100% { fill: var(--magna-bolt-accent); opacity: 1; }
}

@keyframes mb-edge-cofire {
  0%   { opacity: 0.55; stroke: currentColor; stroke-width: 1.8; filter: none; }
  30%  { opacity: 1;
         stroke: color-mix(in srgb, var(--magna-bolt-idle) 65%, white);
         stroke-width: 2.6;
         filter: drop-shadow(0 0 4px var(--magna-bolt-idle)); }
  100% { opacity: 0.9;
         stroke: var(--magna-bolt-accent);
         stroke-width: 2;
         filter: none; }
}

/* ─── Laser beam — thin micro filament ──────────────────────────────── */
.mb-beam {
  position: absolute;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 80%, white) 14%,
    white 50%,
    color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 80%, white) 86%,
    transparent 100%);
  border-radius: 1px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    0 0 4px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 75%, transparent),
    0 0 10px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 35%, transparent);
}

.mb-igniting .mb-beam {
  animation: mb-beam-launch 300ms cubic-bezier(0.16, 1, 0.3, 1) 130ms forwards;
}

@keyframes mb-beam-launch {
  0%   { width: 0; opacity: 0; height: 1px; }
  18%  { opacity: 1; height: 1.5px; }
  70%  { width: var(--mb-beam-distance, 80px); opacity: 1; height: 1.5px; }
  100% { width: var(--mb-beam-distance, 80px); opacity: 0; height: 0.5px; }
}

/* ─── Micro particle burst ──────────────────────────────────────────── */
.mb-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    white 0%,
    color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 90%, white) 35%,
    color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 70%, transparent) 75%,
    transparent 100%);
  box-shadow:
    0 0 2px white,
    0 0 4px var(--magna-bolt-idle, #4d8bff),
    0 0 7px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 55%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) translate(0px, 0px) scale(0);
  z-index: 4;
  will-change: transform, opacity;
}

.mb-igniting .mb-particle {
  animation: mb-particle-fly 680ms cubic-bezier(0.16, 1, 0.3, 1) 240ms forwards;
}

@keyframes mb-particle-fly {
  0%   { opacity: 0;
         transform: translate(-50%, -50%) translate(0px, 0px) scale(0.3); }
  14%  { opacity: 1;
         transform: translate(-50%, -50%) translate(0px, 0px) scale(1.3); }
  55%  { opacity: 0.9;
         transform: translate(-50%, -50%)
                    translate(calc(var(--p-dx, 0px) * 0.55), calc(var(--p-dy, 0px) * 0.55))
                    scale(0.9); }
  100% { opacity: 0;
         transform: translate(-50%, -50%)
                    translate(var(--p-dx, 0px), var(--p-dy, 0px))
                    scale(0.4); }
}

/* ─── Text split + extended irradiation pulse ───────────────────────── */
.mb-igniting .play-signal-text,
.mb-igniting [data-magna-label] {
  animation: mb-text-fade 950ms ease-out 220ms forwards;
  position: relative;
}

.mb-igniting .play-signal-text::before,
.mb-igniting .play-signal-text::after,
.mb-igniting [data-magna-label]::before,
.mb-igniting [data-magna-label]::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 60%, white);
  text-shadow:
    0 0 10px var(--magna-bolt-idle, #4d8bff),
    0 0 22px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 55%, transparent);
  pointer-events: none;
  opacity: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.mb-igniting .play-signal-text::before,
.mb-igniting [data-magna-label]::before {
  clip-path: inset(0 0 50% 0);
  animation: mb-text-split-top 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 220ms forwards;
}

.mb-igniting .play-signal-text::after,
.mb-igniting [data-magna-label]::after {
  clip-path: inset(50% 0 0 0);
  animation: mb-text-split-bottom 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 220ms forwards;
}

@keyframes mb-text-fade {
  0%   { color: var(--gold, #d4af37); text-shadow: none; }
  6%   { color: transparent;          text-shadow: none; }
  42%  { color: transparent;          text-shadow: none; }
  52%  { color: color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 30%, white);
         text-shadow:
           0 0 22px var(--magna-bolt-idle, #4d8bff),
           0 0 36px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 60%, transparent),
           0 0 8px white; }
  68%  { color: color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 50%, white);
         text-shadow:
           0 0 12px var(--magna-bolt-idle, #4d8bff),
           0 0 22px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 40%, transparent); }
  82%  { color: color-mix(in srgb, var(--gold, #d4af37) 35%, white);
         text-shadow:
           0 0 18px var(--magna-bolt-idle, #4d8bff),
           0 0 30px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 50%, transparent),
           0 0 10px color-mix(in srgb, var(--gold, #d4af37) 70%, transparent); }
  100% { color: var(--gold, #d4af37);
         text-shadow:
           0 0 14px color-mix(in srgb, var(--magna-bolt-idle, #4d8bff) 45%, transparent),
           0 0 4px var(--magna-bolt-idle, #4d8bff); }
}

@keyframes mb-text-split-top {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: 1; transform: translateY(-7px); }
  55%  { opacity: 1; transform: translateY(-9px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes mb-text-split-bottom {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: 1; transform: translateY(7px); }
  55%  { opacity: 1; transform: translateY(9px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Accessibility — no motion */
@media (prefers-reduced-motion: reduce) {
  .magna-bolt::before { animation: none; opacity: 0.5; transform: scale(1); }
  .magna-bolt::after  { animation: none; opacity: 0.25; transform: scale(1); }
  .magna-bolt:hover > svg { transform: none; }
  .mb-edge { transition: none; }
  .mb-spark, .mb-pulse-ring, .mb-beam, .mb-particle { display: none; }
  .mb-igniting .magna-bolt::before,
  .mb-igniting .magna-bolt::after,
  .mb-igniting .magna-bolt .mb-centroid,
  .mb-igniting .magna-bolt .mb-edge,
  .mb-igniting .play-signal-text,
  .mb-igniting [data-magna-label] { animation: none !important; }
  .mb-igniting .play-signal-text::before,
  .mb-igniting .play-signal-text::after,
  .mb-igniting [data-magna-label]::before,
  .mb-igniting [data-magna-label]::after { display: none; }
}