/* ===== Section separator: layered depth seam + circuit junction =====
   Markup: .circ-sep > .cs-trace.left, .cs-trace.right,
           .cs-junction > .cs-ring + .cs-core, .cs-tap.t1, .cs-tap.t2
   =================================================================== */

.circ-sep{
  position:relative;
  height:1px;
  width:100%;
  overflow:visible;
  pointer-events:none;
  z-index:6;
}
.circ-sep.at-top{position:absolute;top:0;left:0;right:0}
.circ-sep.at-bottom{position:absolute;bottom:0;left:0;right:0}

/* ---- contact shadow: the upper plane falling onto the lower ---- */
.circ-sep::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:36px;
  transform:translateY(-100%);
  background:linear-gradient(180deg,transparent 0%,rgba(4,12,20,.26) 70%,rgba(4,12,20,.42) 100%);
}

/* ---- the light-line at the contact point ---- */
.circ-sep::after{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(42,151,120,.10) 12%,
    rgba(42,151,120,.45) 32%,
    rgba(127,231,196,.8) 50%,
    rgba(42,151,120,.45) 68%,
    rgba(42,151,120,.10) 88%,
    transparent 100%);
}

/* ---- feed traces running into the junction ---- */
.cs-trace{
  position:absolute;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(42,151,120,.65));
  opacity:.4;
}
.cs-trace.left{right:calc(50% + 14px);width:120px}
.cs-trace.right{left:calc(50% + 14px);width:120px;background:linear-gradient(90deg,rgba(42,151,120,.65),transparent)}
.js .cs-trace.left{animation:cs-feed-in 5s ease-in-out infinite}
.js .cs-trace.right{animation:cs-feed-out 5s ease-in-out infinite}
@keyframes cs-feed-in{0%,66%,100%{opacity:.22}74%{opacity:.9}84%{opacity:.3}}
@keyframes cs-feed-out{0%,72%,100%{opacity:.22}80%{opacity:.85}90%{opacity:.3}}

/* ---- the junction ---- */
.cs-junction{
  position:absolute;top:0;left:50%;
  width:22px;height:22px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
}
.cs-ring{
  position:absolute;inset:0;
  border:1px solid rgba(42,151,120,.45);
  border-radius:2px;
  transform:rotate(45deg);
  background:var(--bg);
  box-shadow:0 0 0 4px rgba(11,27,43,.85);
}
.cs-core{
  position:relative;
  width:7px;height:7px;
  background:var(--accent);
  border-radius:1px;
  transform:rotate(45deg);
  opacity:.55;
}
.js .cs-core{animation:cs-core-fire 5s ease-in-out infinite}
@keyframes cs-core-fire{
  0%,70%,100%{opacity:.4;box-shadow:none}
  78%{opacity:1;box-shadow:0 0 12px 2px rgba(42,151,120,.85)}
  88%{opacity:.55;box-shadow:0 0 3px 0 rgba(42,151,120,.25)}
}

/* ---- small taps either side, asymmetric ---- */
.cs-tap{
  position:absolute;top:0;
  width:4px;height:4px;
  background:rgba(42,151,120,.5);
  border-radius:1px;
  transform:translate(-50%,-50%) rotate(45deg);
}
.cs-tap.t1{left:26%}
.cs-tap.t2{left:71%}
.js .cs-tap.t1{animation:cs-tap-blink 5s ease-in-out infinite}
.js .cs-tap.t2{animation:cs-tap-blink 5s ease-in-out infinite .35s}
@keyframes cs-tap-blink{0%,68%,100%{opacity:.35}76%{opacity:.95}86%{opacity:.4}}

/* ---- light-ground variant ---- */
.circ-sep.on-light::before{
  background:linear-gradient(180deg,transparent 0%,rgba(15,34,52,.09) 70%,rgba(15,34,52,.15) 100%);
}
.circ-sep.on-light::after{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(42,151,120,.12) 12%,
    rgba(42,151,120,.4) 32%,
    rgba(42,151,120,.65) 50%,
    rgba(42,151,120,.4) 68%,
    rgba(42,151,120,.12) 88%,
    transparent 100%);
}
.circ-sep.on-light .cs-ring{background:var(--paper);box-shadow:0 0 0 4px rgba(255,255,255,.92);border-color:rgba(42,151,120,.4)}

/* ---- slim ---- */
.circ-sep.slim::before{height:24px}

/* ---- bottom-anchored: flip the shadow ---- */
.circ-sep.at-bottom::before{top:auto;bottom:0;transform:translateY(100%) scaleY(-1)}
.circ-sep.at-bottom::after{top:auto;bottom:0}
.circ-sep.at-bottom .cs-junction,
.circ-sep.at-bottom .cs-tap,
.circ-sep.at-bottom .cs-trace{top:auto;bottom:0}
.circ-sep.at-bottom .cs-junction{transform:translate(-50%,50%)}
.circ-sep.at-bottom .cs-tap{transform:translate(-50%,50%) rotate(45deg)}

/* ---- stacking ---- */
.v2band,.section{position:relative;z-index:1}

@media(max-width:768px){
  .circ-sep::before{height:24px}
  .cs-trace.left,.cs-trace.right{width:64px}
  .cs-junction{width:18px;height:18px}
  .cs-core{width:6px;height:6px}
  .cs-tap.t1{left:18%}
  .cs-tap.t2{left:79%}
}

@media(prefers-reduced-motion:reduce){
  .js .cs-core,.js .cs-trace,.js .cs-tap{animation:none}
  .cs-core{opacity:.7}
  .cs-trace{opacity:.35}
  .cs-tap{opacity:.5}
}

/* scroll-draw entrance: seam builds itself as it enters view */
.js .circ-sep::after{transform:scaleX(0);transform-origin:center;transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.js .circ-sep::before{opacity:0;transition:opacity .9s ease .35s}
.js .circ-sep .cs-junction{opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.js .circ-sep.at-bottom .cs-junction{transform:translate(-50%,50%) scale(.5)}
.js .circ-sep .cs-trace{opacity:0;transition:opacity .7s ease}
.js .circ-sep .cs-tap{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4);transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.js .circ-sep.at-bottom .cs-tap{transform:translate(-50%,50%) rotate(45deg) scale(.4)}
.js .circ-sep:not(.drawn) .cs-core,
.js .circ-sep:not(.drawn) .cs-trace,
.js .circ-sep:not(.drawn) .cs-tap{animation:none!important}
.js .circ-sep.drawn::after{transform:scaleX(1)}
.js .circ-sep.drawn::before{opacity:1}
.js .circ-sep.drawn .cs-junction{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.55s}
.js .circ-sep.drawn.at-bottom .cs-junction{transform:translate(-50%,50%) scale(1)}
.js .circ-sep.drawn .cs-trace{opacity:.4;transition-delay:.8s}
.js .circ-sep.drawn .cs-tap{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.js .circ-sep.drawn.at-bottom .cs-tap{transform:translate(-50%,50%) rotate(45deg) scale(1)}
.js .circ-sep.drawn .cs-tap.t1{transition-delay:.72s}
.js .circ-sep.drawn .cs-tap.t2{transition-delay:.86s}
.js .circ-sep.drawn .cs-core{animation:cs-arrive .9s ease .6s 1,cs-core-fire 5s ease-in-out 1.6s infinite}
@keyframes cs-arrive{0%{opacity:.3;box-shadow:none}45%{opacity:1;box-shadow:0 0 16px 3px rgba(42,151,120,.95)}100%{opacity:.55;box-shadow:none}}
.js .circ-sep.drawn .cs-trace.left{animation:cs-feed-in 5s ease-in-out 1.6s infinite}
.js .circ-sep.drawn .cs-trace.right{animation:cs-feed-out 5s ease-in-out 1.6s infinite}
.js .circ-sep.drawn .cs-tap.t1{animation:cs-tap-blink 5s ease-in-out 1.6s infinite}
.js .circ-sep.drawn .cs-tap.t2{animation:cs-tap-blink 5s ease-in-out 1.95s infinite}
@media(prefers-reduced-motion:reduce){
  .js .circ-sep::after{transform:scaleX(1);transition:none}
  .js .circ-sep::before{opacity:1;transition:none}
  .js .circ-sep .cs-junction{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none}
  .js .circ-sep .cs-trace{opacity:.35;transition:none}
  .js .circ-sep .cs-tap{opacity:.5;transform:translate(-50%,-50%) rotate(45deg) scale(1);transition:none}
}