/* =========================================================
   Layer 3 · Binding-Anchored Bridge — Ray Burst
   Vanilla CSS · No dependencies · 7s loop
   Two ring sets drift together, sunburst ignites at overlap
   ========================================================= */

.layer3-stage {
  --layer3-bg: transparent;
  --layer3-ink: #036c4d;

  width: 100%;
  aspect-ratio: 683 / 476;
  background: var(--layer3-bg);
  position: relative;
  overflow: hidden;
}

.layer3-stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.layer3-set-l {
  transform-origin: center;
  animation: layer3-approach-l 7s ease-in-out infinite;
}
.layer3-set-r {
  transform-origin: center;
  animation: layer3-approach-r 7s ease-in-out infinite;
}

.layer3-ring {
  fill: none;
  stroke: var(--layer3-ink);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  opacity: 0.3;
}

.layer3-core {
  fill: var(--layer3-ink);
  opacity: 0.85;
}

.layer3-side-dot {
  fill: var(--layer3-ink);
  opacity: 0.55;
}

.layer3-burst {
  stroke: var(--layer3-ink);
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  opacity: 0;
  animation: layer3-burst 7s ease-in-out infinite;
}

.layer3-center {
  fill: var(--layer3-ink);
  opacity: 0;
  transform-origin: 341.5px 238px;
  animation: layer3-center 7s ease-in-out infinite;
}

@keyframes layer3-approach-l {
  0%, 100% { transform: translateX(-50px); }
  50%, 65% { transform: translateX(0); }
}

@keyframes layer3-approach-r {
  0%, 100% { transform: translateX(50px); }
  50%, 65% { transform: translateX(0); }
}

@keyframes layer3-burst {
  0%, 45%   { stroke-dashoffset: 60; opacity: 0; }
  58%       { stroke-dashoffset: 0; opacity: 0.7; }
  72%       { stroke-dashoffset: 0; opacity: 0.7; }
  85%, 100% { stroke-dashoffset: -60; opacity: 0; }
}

@keyframes layer3-center {
  0%, 50%   { opacity: 0; transform: scale(0.3); }
  62%       { opacity: 1; transform: scale(1.5); }
  78%       { opacity: 0.9; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .layer3-set-l,
  .layer3-set-r,
  .layer3-burst,
  .layer3-center {
    animation: none;
  }
  .layer3-set-l { transform: translateX(0); }
  .layer3-set-r { transform: translateX(0); }
  .layer3-burst {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  .layer3-center {
    opacity: 1;
    transform: scale(1);
  }
}