/* Exact brand paths in two depth planes; named destinations replace pictograms. */
.application-network {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 640 / 510;
  max-width: 720px;
  margin-inline: auto;
}
.application-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.application-route-base,
.application-route-flow {
  fill: none;
  stroke-linecap: round;
}
.application-route-base { stroke: #ad7cde38; stroke-width: 1.15; }
.application-route-flow {
  stroke: url(#application-route-ink);
  stroke-width: 1.8;
  stroke-dasharray: 9 91;
}
.application-route-flow path {
  animation: application-route-flow 5.8s linear infinite;
  animation-delay: var(--application-delay);
  animation-play-state: paused;
}
.application-route-ends { fill: #c795eb; }
.application-destination {
  position: absolute;
  width: 47%;
  text-align: center;
  color: #e0d5ee;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .01em;
  pointer-events: none;
}
.application-destination span {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid #b187e433;
  border-radius: 7px;
  background: #6d38900b;
  box-shadow: 0 0 18px #b76ae810, inset 0 0 12px #9b62d207;
  white-space: nowrap;
}
.application-destination span::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(125deg, #c49bf09c, #935ac72b 47%, #eaa0db87);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.destination-1, .destination-3 { left: 1%; }
.destination-2, .destination-4 { right: 1%; }
/* Anchor frames to the existing route endpoints, leaving the same small gap
   regardless of viewport size or the rendered label height. */
.destination-1, .destination-2 { bottom: calc(76.862745% + 10px); }
.destination-3, .destination-4 { top: calc(76.078431% + 10px); }
.application-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.application-brand::before {
  content: '';
  position: absolute;
  inset: -65%;
  background: radial-gradient(ellipse, #9650df17 0%, #9650df08 32%, transparent 69%);
  pointer-events: none;
}
.application-brand-space {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.application-brand-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.applications-editorial.is-visible .application-route-flow path { animation-play-state: running; }
.scene-application-mark{aspect-ratio:1;max-width:none;height:100%}
.scene-application-mark .scene-poster{inset:8%;width:84%;height:84%}
@keyframes application-route-flow {
  from { stroke-dashoffset: 8; }
  to { stroke-dashoffset: -92; }
}
@media (max-width: 760px) {
  .application-network { max-width: 540px; }
  .application-destination { font-size: clamp(12px, 3vw, 14px); }
  .application-destination span { padding: 8px 9px; border-radius: 6px; }
  .destination-1, .destination-2 { bottom: calc(76.862745% + 8px); }
  .destination-3, .destination-4 { top: calc(76.078431% + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .application-brand-layer, .application-route-flow path { animation: none; }
  .application-brand-layer { transform: none; }
  .application-route-flow path { stroke-dashoffset: -45; }
}