/* =========================================================================
   components.css — generisani omoti projekata, dijagram, sitni delovi
   ========================================================================= */

/* ---------------------------------------------- generisani omot projekta */
.cover { position: absolute; inset: 0; }
.cover__t {
  font-family: var(--ff);
  font-weight: 800;
  letter-spacing: -.03em;
  fill: #fff;
}
.cover__s {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, .72);
}
.cover__line { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; fill: none; }
.cover__chip { fill: rgba(255, 255, 255, .16); }
.cover__chipline { fill: rgba(255, 255, 255, .38); }

/* --------------------------------------------------------------- pipeline */
.pp-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; rx: 10; }
.pp-box.is-key { stroke: var(--teal); }
.pp-label { font-family: var(--ff); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; fill: var(--ink); }
.pp-sub { font-family: var(--ff); font-size: 9.5px; font-weight: 500; fill: var(--muted); }
.pp-wire { stroke: var(--line); stroke-width: 2; stroke-linecap: round; fill: none; }
.pp-dash { stroke: var(--teal); stroke-width: 2; stroke-linecap: round; fill: none; opacity: .35; stroke-dasharray: 4 8; }
.pp-packet { fill: var(--teal); opacity: 0; }
.pipe__svg.is-run .pp-packet { opacity: 1; animation: packet 4.6s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes packet { 0% { transform: translateX(0); } 100% { transform: translateX(792px); } }
@media (prefers-reduced-motion: reduce) {
  .pipe__svg .pp-packet { opacity: 1; animation: none; transform: translateX(792px); }
}

/* --------------------------------------------------------------- ikonice */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------- prebacivanje jezika --- */
main.swapping [data-i18n], main.swapping [data-dyn] { opacity: 0; transition: opacity 130ms linear; }
main [data-i18n], main [data-dyn] { transition: opacity 200ms linear; }
@media (prefers-reduced-motion: reduce) {
  main.swapping [data-i18n], main.swapping [data-dyn] { opacity: 1; transition: none; }
}

/* ------------------------------------------------------------ skip link -- */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 300;
  background: var(--teal-dark); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r-sm);
}
.skip:focus { left: 16px; }