/* извор: /home/dc/AI/dc-avtentikator/komplet/ikoni/ikoni.css — не менувај тука, промената оди во изворот */
/* ДЦ икони — заедничкото за иконите на најавата (комплет/ikoni, README.md).
   Иконите се вградуваат како inline SVG: линиите се во currentColor (ја следат бојата на текстот и темата),
   акцентите се во променливите подолу. Бара color-scheme на :root (light dark, или light/dark по изборот на темата). */
:root{
  --dc-ik-a:light-dark(#118ec6,#40aee4);   /* сината на брендот (акцент во иконите) */
  --dc-ik-z:#fff200;                       /* жолтата: само со раб (знакот за внимание) */
  --dc-ik-na-z:#1f2d3a;                    /* знакот врз жолтото — темен во двете теми */
  /* четирите бои за совпаѓање — истите токени како рамката на QR кодот (dcpanel 82-najava-qr.css) */
  --dc-b-sina:#0f7cad;
  --dc-b-zelena:light-dark(#18845a,#45cf8f);
  --dc-b-portokalova:light-dark(#b05207,#f2a35c);
  --dc-b-violetova:light-dark(#7b3fd4,#bd9eff);
  --dc-na-boja:light-dark(#fff,#0f1923);   /* обликот во обоеното копче: бел на светлата, темен на темната */
  --dc-ok:light-dark(#18845a,#45cf8f);
  --dc-ne:light-dark(#bd3328,#ff7466);
  --dc-na-ne:light-dark(#fff,#2a0d0a);
}
.dc-ik{display:inline-block;width:24px;height:24px;flex:none;vertical-align:middle;overflow:visible}
/* Бојата секогаш од родителот — и кога производот има глобално `body *{color:…}` (beauty 07.11: иначе потегот е црн). */
.dc-ik,.dc-ik *{color:inherit}
/* Акцентите во SVG — КЛАСИ, не style= (строг CSP style-src 'self' без unsafe-inline го блокира inline style; dcpanel 07.11).
   Атрибутот fill/stroke во SVG-то е резервната боја кога ikoni.css го нема. */
.dc-ik .dc-ik-f-boja{fill:var(--dc-ik-boja,#118ec6)}
.dc-ik .dc-ik-f-z{fill:var(--dc-ik-z,#fff200)}
.dc-ik .dc-ik-s-a{stroke:var(--dc-ik-a,#118ec6)}
.dc-ik .dc-ik-s-na-z{stroke:var(--dc-ik-na-z,#1f2d3a)}
.dc-ik-48{width:48px;height:48px}
.dc-ik-96{width:96px;height:96px}

/* бојата за совпаѓање по индекс (Dcn1::BOI: 0 сина ●, 1 зелена ■, 2 портокалова ▲, 3 виолетова ◆) */
[data-boja="0"]{--dc-ik-boja:var(--dc-b-sina)}
[data-boja="1"]{--dc-ik-boja:var(--dc-b-zelena)}
[data-boja="2"]{--dc-ik-boja:var(--dc-b-portokalova)}
[data-boja="3"]{--dc-ik-boja:var(--dc-b-violetova)}

/* ── анимации (само CSS, без движење кога човекот така сакал):
   .dc-ziv (на иконата или родителот) ги пали деловите во неа — отпечатокот трепка, линијата скенира;
   .dc-tatne ја поместува цела икона нагоре-надолу („погледни таму, чекам“). ── */
@keyframes dc-puls{0%,100%{opacity:1}50%{opacity:.3}}
.dc-ziv .dc-ik-puls{animation:dc-puls 1.6s ease-in-out infinite}
@keyframes dc-linija{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.dc-ziv .dc-ik-linija{animation:dc-linija 2.4s ease-in-out infinite}
@keyframes dc-tatne{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.dc-tatne{animation:dc-tatne 1.6s ease-in-out infinite}

/* „твојот телефон покажува боја“: врз telefon-boja.svg четирите облика се менуваат (ниеден не е предлог);
   местото е кругот на екранот (cx 12, cy 11, r 4.2 во мрежата 24) */
.dc-vrtelezka{position:relative;display:inline-block;line-height:0}
.dc-vrtelezka>.dc-ik{width:100%;height:100%}
.dc-vrtelezka .dc-ik-boja{display:none}
.dc-vrtelezka>i{position:absolute;left:32.5%;top:28.33%;width:35%;height:35%;opacity:0;
  animation:dc-vrtelezka 6s linear infinite}
.dc-vrtelezka>i>svg{display:block;width:100%;height:100%}
.dc-vrtelezka>i:nth-of-type(1){color:var(--dc-b-sina)}
.dc-vrtelezka>i:nth-of-type(2){color:var(--dc-b-zelena);animation-delay:1.5s}
.dc-vrtelezka>i:nth-of-type(3){color:var(--dc-b-portokalova);animation-delay:3s}
.dc-vrtelezka>i:nth-of-type(4){color:var(--dc-b-violetova);animation-delay:4.5s}
@keyframes dc-vrtelezka{0%,24%{opacity:1}25%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .dc-ziv .dc-ik-puls,.dc-ziv .dc-ik-linija,.dc-tatne{animation:none}
  /* без движење: сите четири облика одеднаш, ситни, 2×2 на екранот („која било од овие“) */
  .dc-vrtelezka>i{animation:none;opacity:1;width:17.5%;height:17.5%}
  .dc-vrtelezka>i:nth-of-type(2),.dc-vrtelezka>i:nth-of-type(4){left:50%}
  .dc-vrtelezka>i:nth-of-type(3),.dc-vrtelezka>i:nth-of-type(4){top:45.83%}
}