/* Interactive animated SASE architecture diagram.
   Three zones: Users/Devices → Cloudflare global network (SASE services) → Resources.
   Packets flow left→right along paths; reveal fragments light up each service node. */

.arch {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.arch svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Zone labels */
.zone-label { fill: var(--cf-dimmer); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Endpoint tiles (devices + resources) */
.endpoint rect { fill: var(--cf-panel); stroke: var(--cf-line); stroke-width: 1.5; }
.endpoint .ep-ic { stroke: var(--cf-blue); fill: none; stroke-width: 2; }
.endpoint text { fill: var(--cf-dim); font-size: 14px; font-weight: 600; }

/* Cloudflare cloud container */
.cf-cloud {
  fill: rgba(246, 130, 31, 0.05);
  stroke: rgba(246, 130, 31, 0.35);
  stroke-width: 2;
}
.cf-cloud-glow { fill: url(#cloudGlow); opacity: 0.6; }
.cf-cloud-title { fill: var(--cf-orange); font-size: 16px; font-weight: 800; letter-spacing: 0.04em; }
.cf-cloud-sub { fill: var(--cf-dimmer); font-size: 12px; font-weight: 600; }

/* Service nodes inside the cloud */
.svc rect {
  fill: var(--cf-ink-2);
  stroke: var(--cf-line);
  stroke-width: 1.5;
  transition: stroke 0.35s ease, fill 0.35s ease, filter 0.35s ease;
}
.svc text { fill: var(--cf-dim); font-size: 13.5px; font-weight: 700; transition: fill 0.35s ease; }
.svc .svc-ic { stroke: var(--cf-dimmer); fill: none; stroke-width: 1.8; transition: stroke 0.35s ease; }

/* Active (fragment-highlighted) service node */
.svc.active rect {
  fill: rgba(246, 130, 31, 0.14);
  stroke: var(--cf-orange);
  filter: drop-shadow(0 0 10px rgba(246, 130, 31, 0.4));
}
.svc.active text { fill: #fff; }
.svc.active .svc-ic { stroke: var(--cf-orange-2); }

/* Connection paths */
.link { fill: none; stroke: var(--cf-line); stroke-width: 2; }
.link.lit { stroke: rgba(246, 130, 31, 0.55); }

/* Flowing packets (dashes traveling along the wire) */
.flow {
  fill: none;
  stroke: var(--cf-orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  animation: flowmove 1.4s linear infinite;
  opacity: 0.9;
}
.flow.blue { stroke: var(--cf-blue); animation-duration: 1.8s; }
.flow.teal { stroke: var(--cf-teal); animation-duration: 1.6s; }
@keyframes flowmove { to { stroke-dashoffset: -180; } }

@media (prefers-reduced-motion: reduce) {
  .flow { animation: none; opacity: 0.5; }
  .pill .dot { animation: none; }
}

/* Moving dot packets via offset path (extra life) */
.packet { fill: var(--cf-orange-2); }

/* Legend under the diagram */
.arch-legend { display: flex; gap: 26px; justify-content: center; margin-top: 8px; font-size: 13px; color: var(--cf-dimmer); }
.arch-legend span { display: inline-flex; align-items: center; gap: 7px; }
.arch-legend i { width: 20px; height: 3px; border-radius: 2px; display: inline-block; }