/* =============================================================================
   SYSTEM NODE — SOVEREIGN VISUAL MODULE
   - Fully independent
   - Theme-aware (uses currentColor)
   - Rail-aligned
   - Premium motion-ready
============================================================================= */

.system-node{
  position:relative;
  width:100%;
  padding:8rem 0 6rem 0;
  color: var(--text-color);
}

/* -----------------------------------------------------------------------------
   01) RAIL ALIGNMENT (MATCHES HOME RAIL)
----------------------------------------------------------------------------- */

.system-node{
  width: calc(100% - (var(--site-gutter) * 2));
  max-width: var(--site-rail-width);
  margin-inline-start: var(--site-gutter);
  margin-inline-end: auto;
}

/* -----------------------------------------------------------------------------
   02) VISUAL LAYER
----------------------------------------------------------------------------- */

.system-node-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:3.2rem;
}

.system-node-svg{
  width: clamp(280px, 40vw, 520px);
  height:auto;
  color: var(--text-color);
  transition: transform 2.2s cubic-bezier(0.22,1,0.36,1);
}

/* Subtle breathing loop */
.system-node-core{
  transform-origin:center;
  animation: systemNodeBreath 6s ease-in-out infinite;
}

@keyframes systemNodeBreath{
  0%   { transform: scale(0.94); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(0.94); }
}

.system-node-ring{
  animation: systemNodeRotate 40s linear infinite;
  transform-origin:center;
}

.system-node-ring--inner{
  animation-duration: 26s;
}

@keyframes systemNodeRotate{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   03) CAPTION LAYER
----------------------------------------------------------------------------- */

.system-node-caption{
  text-align:start;
  max-width:620px;
}

.system-node-title{
  font-size:1.6rem;
  font-weight:600;
  margin-bottom:1rem;
}

.system-node-text{
  font-size:1rem;
  opacity:0.75;
  line-height:1.6;
}

/* -----------------------------------------------------------------------------
   04) RESPONSIVE
----------------------------------------------------------------------------- */

@media (max-width:900px){
  .system-node{
    padding:6rem 0 4rem 0;
  }

  .system-node-svg{
    width: min(85vw, 420px);
  }
}

@media (max-width:600px){
  .system-node-title{
    font-size:1.4rem;
  }

  .system-node-text{
    font-size:0.95rem;
  }
}