/* Srida Infotech - /services/engineering/ page layout only. Shared components live in components.css and fig.css. */

.engineering-body > .chapter-section:first-child { padding-top: 0; }
.engineering-body > .chapter-section:first-child > .rule-dots { margin-bottom: var(--s-10); }
.engineering-body > .chapter-section > .rule-dots { margin-bottom: var(--s-12); }
.engineering-body > .chapter-section:last-child { padding-bottom: var(--s-8); }

.engineering-sub { display: block; margin-bottom: var(--s-4); color: var(--text-2); }
.engineering-chips { margin-top: var(--s-8); }
.engineering-more { margin-top: var(--s-8); font-weight: 500; }
.engineering-more .u { color: var(--text); }

#react .chapter, #mobile .chapter, #ecommerce .chapter, #how-we-build .chapter { margin-bottom: var(--s-4); }

/* Fig. 01: one packet loops Event to Store, CSS only (the route's d is on the packet's offset-path).
   It appears once the figure is live (draw, then light, then flow) and pauses out of view or in a
   hidden tab (fig.js drops .is-inview). fig.css hides g.packets under reduced motion, in .is-static
   and where offset-path is unsupported; the rules at the end repeat that for this packet. */
.engineering-fig .eng-packet { offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.engineering-fig.is-live .eng-packet { animation: eng-loop 5.6s linear infinite; animation-play-state: paused; }
.engineering-fig.is-live.is-inview:not(.is-paused) .eng-packet { animation-play-state: running; }
@keyframes eng-loop {
  0% { offset-distance: 0%; opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  4% { opacity: 1; }
  14% { offset-distance: 20%; animation-timing-function: linear; }
  66% { offset-distance: 100%; opacity: 1; }
  72% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Fig. 01 glyphs: a function mark in each Lambda, three queued messages in the Queue (the Store keeps its lines) */
.engineering-fig .eng-glyph { fill: none; stroke: var(--fig-node-stroke); stroke-width: var(--fig-stroke-w); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke var(--dur-m) var(--ease-out); }
.engineering-fig [data-node].is-lit .eng-glyph, html[data-motion="reduce"] .engineering-fig .eng-glyph { stroke: var(--fig-node-lit); }

html[data-motion="reduce"] .engineering-fig .eng-packet { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { :root .engineering-fig .eng-packet { animation: none; display: none; } }