/* Сеть совместных действий. Масса людей объединена в SVG-пути; камера,
   передачи и ответы используют общие CSS-часы паузы и скрытой вкладки. */
.jr-stage--network {
  --copy-top: 14;
  --copy-w: 29;
  --body-w: 27;
  --title-size: 4.5;
  --title-weight: 450;
  --accent-scale: .84;
}
.jr-stage--network .jr-visual { translate: none; }
.jr-stage--network .jr-copy__accent { animation: jr-rise 1.2s ease .4s backwards; background-position: 55% 0; }
.jr-stage--network .jr-copy__body { font-size: max(12px, calc(1.24 * var(--su))); line-height: 1.55; }
.jr-network { inset: 0; --net-unit: calc(1s * var(--jr-dwell, 1)); }
.jr-network__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr-network__atmosphere {
  position: absolute; left: 33%; right: -4%; top: 10%; bottom: 2%;
  background: radial-gradient(ellipse at 50% 47%, #c099ed19, transparent 57%), radial-gradient(ellipse at 78% 56%, #86e3cb10, transparent 46%);
  animation: jr-net-breathe 8s ease-in-out infinite;
}
.jr-network__camera {
  transform-origin: 657px 253px;
  animation: jr-net-camera calc(11 * var(--net-unit)) cubic-bezier(.45, 0, .2, 1) both;
}
@keyframes jr-net-camera {
  0%, 22% { transform: scale(5.1); }
  46% { transform: scale(2.35); }
  83%, 100% { transform: scale(1); }
}
.jr-network__group { --net-color: #e9c27a; color: var(--net-color); }
.jr-network__group[data-tint="lavender"] { --net-color: #b9a6f5; }
.jr-network__group[data-tint="mint"] { --net-color: #86e3cb; }
.jr-network__field {
  fill: url(#jr-net-field); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: jr-net-field calc(7.8 * var(--net-unit)) ease-in-out
    calc((var(--group-born) + var(--group-phase)) * var(--jr-dwell, 1)) infinite;
}
@keyframes jr-net-field {
  0%, 100% { opacity: .2; scale: .88; }
  48% { opacity: .8; scale: 1.12; }
}
.jr-network__island {
  fill: currentColor; fill-opacity: .035;
  stroke: currentColor; stroke-opacity: .24; stroke-width: .6;
  animation: jr-net-island calc(1.6 * var(--net-unit)) ease calc(var(--born) * var(--jr-dwell, 1)) backwards;
}
@keyframes jr-net-island { from { opacity: 0; } }
.jr-network__batch {
  animation: jr-net-emerge calc(.85 * var(--net-unit)) cubic-bezier(.2, .8, .2, 1) calc(var(--born) * var(--jr-dwell, 1)) backwards;
}
@keyframes jr-net-emerge { from { opacity: 0; translate: 0 7px; } }
.jr-network__glass { fill: url(#jr-net-glass); stroke: currentColor; stroke-width: .65; stroke-opacity: .75; }
.jr-network__silhouette { fill: currentColor; fill-opacity: .84; }
.jr-network__local { fill: none; stroke: currentColor; stroke-width: .55; stroke-opacity: .26; }
/* По связям идут огни, по ромбам — запаздывающая волна принятия работы.
   Масса участников остаётся объединённой в пути по волнам появления. */
.jr-network__local-flow {
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: .025 .175; opacity: .62;
  animation: jr-run calc(7.4 * var(--net-unit)) linear
    calc(var(--ripple) * var(--jr-dwell, 1)) infinite;
}
.jr-network__node-light {
  fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: 1.2;
  opacity: 0;
  animation: jr-net-node-light calc(6.8 * var(--net-unit)) ease-in-out
    calc(var(--ripple) * var(--jr-dwell, 1)) infinite;
}
@keyframes jr-net-node-light {
  0%, 48%, 100% { opacity: 0; }
  18% { opacity: .82; }
  31% { opacity: .2; }
}
.jr-network__traffic {
  animation: jr-fade calc(.7 * var(--net-unit)) ease calc(var(--born) * var(--jr-dwell, 1)) backwards;
}
.jr-network__lane-light {
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: .18 .82; opacity: .85;
  animation: jr-net-lane calc(var(--period) * var(--jr-dwell, 1)) ease-in-out
    calc(var(--born) * var(--jr-dwell, 1)) infinite both;
}
@keyframes jr-net-lane {
  0% { stroke-dashoffset: .18; opacity: 0; }
  12%, 32% { opacity: .85; }
  46%, 52% { stroke-dashoffset: -1; opacity: 0; }
  64%, 84% { opacity: .5; }
  96%, 100% { stroke-dashoffset: .18; opacity: 0; }
}
.jr-network__courier {
  fill: currentColor; offset-rotate: 0deg; opacity: 0;
  animation: jr-net-courier calc(var(--period) * var(--jr-dwell, 1)) ease-in-out
    calc(var(--born) * var(--jr-dwell, 1)) infinite both;
}
.jr-network__courier-core { fill: #fff4da; }
@keyframes jr-net-courier {
  0% { offset-distance: 0%; opacity: 0; }
  8%, 38% { opacity: 1; }
  46%, 52% { offset-distance: 100%; opacity: .15; }
  62%, 88% { opacity: .85; }
  96%, 100% { offset-distance: 0%; opacity: 0; }
}
.jr-network__receipt {
  fill: none; stroke: currentColor; stroke-width: 1;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: jr-net-receipt calc(var(--period) * var(--jr-dwell, 1)) ease-out
    calc(var(--born) * var(--jr-dwell, 1)) infinite both;
}
@keyframes jr-net-receipt {
  0%, 37% { opacity: 0; scale: .65; }
  48% { opacity: .8; }
  72%, 100% { opacity: 0; scale: 1.55; }
}
.jr-network__person { color: #f2d08c; }
.jr-network__person[data-pair="1"] { color: #a5f2db; }
.jr-network__person .jr-network__glass { stroke-opacity: 1; stroke-width: .8; }
.jr-network__bevel { fill: none; stroke: currentColor; stroke-opacity: .24; stroke-width: 1.6; }
.jr-network__response {
  fill: none; stroke: currentColor; stroke-width: .55;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: jr-net-receive calc(1.4 * var(--net-unit)) ease-out calc(2.05 * var(--net-unit));
}
.jr-network__person[data-pair="0"] .jr-network__response { animation-delay: calc(3.2 * var(--net-unit)); }
@keyframes jr-net-receive { 0% { opacity: 0; scale: .7; } 25% { opacity: .9; } 100% { opacity: 0; scale: 1.65; } }
.jr-network__pair-wire {
  fill: none; stroke: #f8e2b0; stroke-width: .55; stroke-dasharray: 1;
  animation: jr-draw calc(1.25 * var(--net-unit)) ease calc(.7 * var(--net-unit)) backwards;
}
.jr-network__dispatch-trail {
  fill: none; stroke: #ffedc7; stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: .24 .76; opacity: 0;
  animation: jr-net-dispatch-trail calc(2.8 * var(--net-unit)) ease-in-out calc(.5 * var(--net-unit));
}
@keyframes jr-net-dispatch-trail {
  0% { stroke-dashoffset: .24; opacity: 0; }
  10%, 40% { opacity: .85; }
  50%, 63% { stroke-dashoffset: -1; opacity: 0; stroke: #ffedc7; }
  64% { stroke: #a5f2db; }
  70%, 85% { opacity: .75; }
  95%, 100% { stroke-dashoffset: .24; opacity: 0; stroke: #a5f2db; }
}
.jr-network__dispatch {
  offset-rotate: 0deg; offset-distance: 100%; opacity: 0;
  color: #ffedc7; fill: #17162c; stroke: currentColor; stroke-width: .5;
  animation: jr-net-dispatch calc(2.8 * var(--net-unit)) ease-in-out calc(.5 * var(--net-unit));
}
@keyframes jr-net-dispatch {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  50%, 63% { offset-distance: 100%; opacity: 1; color: #ffedc7; }
  64% { color: #a5f2db; }
  90% { offset-distance: 0%; opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; color: #a5f2db; }
}
.jr-network__packet-halo { fill: url(#jr-net-halo); stroke: none; }
.jr-network__bridge { color: #f8e2b0; }
.jr-network__bridge:nth-child(even) { color: #98efd5; }
.jr-network__bridge-glow, .jr-network__bridge-line {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1;
  animation: jr-draw calc(1.3 * var(--net-unit)) ease calc(var(--born) * var(--jr-dwell, 1)) backwards;
}
.jr-network__bridge-glow { stroke-width: 4; opacity: .1; }
.jr-network__bridge-line { stroke-width: .85; opacity: .78; }
.jr-network__stream {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: .13 .87; opacity: 0;
  animation: jr-net-stream calc(var(--period) * var(--jr-dwell, 1)) linear
    calc(var(--born) * var(--jr-dwell, 1)) infinite both;
}
@keyframes jr-net-stream {
  0% { stroke-dashoffset: .13; opacity: 0; }
  8%, 48% { opacity: .9; }
  64%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
.jr-network__packet {
  fill: currentColor; offset-rotate: 0deg;
  animation: jr-net-travel calc(var(--period) * var(--jr-dwell, 1)) linear calc(var(--born) * var(--jr-dwell, 1)) infinite both;
}
@keyframes jr-net-travel {
  0% { offset-distance: 0%; opacity: 0; }
  5%, 55% { opacity: 1; }
  64% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
.jr-network__packet--reply, .jr-network__stream--reply {
  color: #a5f2db;
  animation-direction: reverse;
  animation-delay: calc((var(--born) + var(--period) * .43) * var(--jr-dwell, 1));
}
.jr-network__stream--reply { stroke-width: 1.2; }
.jr-network__arrival {
  fill: none; stroke: currentColor; stroke-width: 1;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: jr-net-arrive calc(var(--period) * var(--jr-dwell, 1)) ease-out calc(var(--born) * var(--jr-dwell, 1)) infinite;
}
@keyframes jr-net-arrive {
  0%, 55% { scale: .6; opacity: 0; }
  64% { opacity: .7; }
  90%, 100% { scale: 1.65; opacity: 0; }
}
.jr-network__names { position: absolute; inset: 0; opacity: 0; animation: jr-net-names calc(4.6 * var(--net-unit)) both; }
.jr-network__names span {
  position: absolute; top: 37.8%; width: 17%; text-align: center;
  padding-top: calc(11 * var(--su));
  font: 500 max(11px, calc(1.05 * var(--su)))/1.35 var(--font); color: #eee9df;
}
.jr-network__names span:first-child { left: 42.9%; }
.jr-network__names span:last-child { left: 71.4%; }
@keyframes jr-net-names { 0% { opacity: 0; } 18%, 57% { opacity: 1; } 85%, 100% { opacity: 0; } }
.jr-network__labels { position: absolute; inset: 0; animation: jr-fade calc(1.2 * var(--net-unit)) ease calc(9.2 * var(--net-unit)) backwards; }
.jr-network__labels span {
  position: absolute; left: calc(var(--x) * var(--su)); top: calc(var(--y) * var(--su)); translate: -50% -50%;
  font: 500 max(11px, calc(.88 * var(--su)))/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: #d9d5eb; padding: .3em .55em; background: #090b20d9; border-radius: 4px; white-space: nowrap;
}
/* Центральная подпись — снизу, чтобы не перекрывать диагональную передачу. */
.jr-network__labels [data-label="0"] { top: calc(35.4 * var(--su)); }
/* Нижняя подпись вынесена вправо от группы, над пультом ведущего. */
.jr-network__labels [data-label="4"] { left: calc(77 * var(--su)); top: calc(48 * var(--su)); }
.jr-network__task, .jr-network__result {
  position: absolute; left: 43%; top: 74%; width: 43%; display: flex; justify-content: center; align-items: center;
  gap: .7em; color: #f5e6c8; font: 450 max(12px, calc(1.1 * var(--su)))/1.4 var(--font);
}
.jr-network__task { opacity: 0; animation: jr-net-task calc(6 * var(--net-unit)) both; }
.jr-network__task > span { width: .45em; height: .45em; background: #e9c27a; rotate: 45deg; box-shadow: 0 0 12px #f2c77a99; }
@keyframes jr-net-task { 0% { opacity: 0; } 15%, 68% { opacity: 1; } 95%, 100% { opacity: 0; } }
.jr-network__result {
  left: 5%; top: 81%; width: 27%; justify-content: flex-start;
  font-size: max(11px, calc(.98 * var(--su))); color: #a5f2db;
  animation: jr-fade calc(.9 * var(--net-unit)) ease calc(10.5 * var(--net-unit)) backwards;
}
.jr-network__result > span { display: grid; place-items: center; width: 1.6em; height: 1.6em; border: 1px solid #86e3cb66; border-radius: 50%; }
.jr-network__narrative { position: relative; margin-top: calc(3.1 * var(--su)); min-height: calc(6 * var(--su)); --net-unit: calc(1s * var(--jr-dwell, 1)); }
.jr-network__narrative p { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-start; gap: .8em; color: #dedced; opacity: 0; font-size: max(12px, calc(1.12 * var(--su))); line-height: 1.45; }
.jr-network__step { color: #e9c27a; font: 400 .85em/1.7 var(--mono); border-top: 1px solid #e9c27a55; flex: none; }
.jr-network__narrative [data-moment="request"] { animation: jr-net-phrase-a calc(16 * var(--net-unit)) both; }
.jr-network__narrative [data-moment="accept"] { animation: jr-net-phrase-b calc(16 * var(--net-unit)) both; }
.jr-network__narrative [data-moment="groups"] { animation: jr-net-phrase-c calc(16 * var(--net-unit)) both; }
.jr-network__narrative [data-moment="shared"] { opacity: 1; animation: jr-net-phrase-d calc(16 * var(--net-unit)) both; }
@keyframes jr-net-phrase-a { 0%, 2% { opacity: 0; } 5%, 15% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes jr-net-phrase-b { 0%, 18% { opacity: 0; } 21%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes jr-net-phrase-c { 0%, 39% { opacity: 0; } 42%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes jr-net-phrase-d { 0%, 62% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes jr-net-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.jr-network__exit { position: absolute; left: 54%; top: 29%; width: 25%; height: 40%; border-radius: 50%; opacity: 0; background: radial-gradient(ellipse, #fff0cc, #edcfae66 24%, transparent 70%); }
.jr-stage--network.stage--leaving .jr-network__exit { animation: jr-net-exit 350ms ease-in forwards; }
@keyframes jr-net-exit { to { opacity: .9; scale: 2.6; } }

/* Монтаж доска → сеть сохраняет глубину и свет на правой стороне кадра. */
.journey[data-transition="weave"][data-phase="leaving"] .pres-veil { animation: jr-net-veil-out 350ms ease-in both; }
.journey[data-transition="weave"][data-phase="entering"] .pres-veil { animation: jr-net-veil-in 900ms ease-out both; }
.journey[data-transition="weave"] .pres-veil { background: radial-gradient(ellipse at 66% 47%, #d2b4e544, #090b2022 40%, transparent 72%); }
.journey[data-transition="weave"] .stage--leaving .jr-board { animation: jr-net-board-out 350ms ease-in both; }
@keyframes jr-net-veil-out { from { opacity: 0; } to { opacity: 1; } }
@keyframes jr-net-veil-in { from { opacity: 1; } to { opacity: 0; } }
@keyframes jr-net-board-out { to { opacity: 0; transform: translateX(calc(-1 * var(--su))) scale(1.1); } }

/* Законченный общий план для reduced motion и перехода на паузе. */
.journey[data-reduced="true"] .jr-stage--network *,
.journey .jr-stage--network[data-settled="true"] * { animation: none !important; }
.journey[data-reduced="true"] .jr-network__packet,
.journey[data-reduced="true"] .jr-network__traffic,
.journey[data-reduced="true"] .jr-network__local-flow,
.journey .jr-stage--network[data-settled="true"] .jr-network__packet,
.journey .jr-stage--network[data-settled="true"] .jr-network__traffic,
.journey .jr-stage--network[data-settled="true"] .jr-network__local-flow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jr-stage--network * { animation: none !important; }
  .jr-network__packet, .jr-network__traffic, .jr-network__local-flow { display: none; }
}
@media (max-width: 1120px) and (min-width: 761px) {
  .jr-stage--network { --copy-top: 13; --title-size: 4.15; }
  .jr-network__narrative { margin-top: calc(2.2 * var(--su)); }
  .jr-network__labels span { letter-spacing: .02em; font-size: max(11px, calc(.85 * var(--su))); }
}
@media (max-width: 760px) {
  /* Сохраняем пропорции SVG: общий план занимает ширину телефона,
     а текст начинается ниже всех шести групп. */
  .jr-network { left: -50%; width: 150%; top: calc(-2 * var(--su)); height: 150%; }
  .jr-stage--network .jr-copy { top: calc(80 * var(--su) + 18px); }
  .jr-network__labels span { font-size: 11px; letter-spacing: 0; }
  .jr-network__names span { font-size: 11px; padding-top: calc(16.5 * var(--su)); }
  .jr-network__labels span { left: calc(var(--x) * 1.5 * var(--su)); top: calc(var(--y) * 1.5 * var(--su)); }
  .jr-network__labels [data-label="0"] { top: calc(35.4 * 1.5 * var(--su)); }
  .jr-network__labels [data-label="4"] { left: calc(77 * 1.5 * var(--su)); top: calc(48 * 1.5 * var(--su)); }
  .jr-network__task { top: 71%; font-size: 11px; }
  .jr-network__result { display: none; }
  .jr-stage--network .jr-copy__body { font-size: 14px; }
  .jr-network__narrative { margin-top: 20px; min-height: 90px; }
  .jr-network__narrative p { font-size: 14px; padding-bottom: 28px; }
}