/* =====================================================================
   ARXO software — logotip (crta ga js/arxo-logo.js u <arxo-logo>)
   Veličina: --arxo-w = širina riječi ARXO. Inačice (klase na elementu):
     .arxo--tamno   opisnik „software" svjetliji (tamna podloga)
     .arxo--mini    bez opisnika (data-desc="0"; gornje trake programa)
     .arxo--anim    dolazna animacija (data-var="anim"), vremena kao u predlošku
     .arxo--znak    samo znak X s vrpcom (data-var="mark"), kvadrat
   ===================================================================== */
.arxo {
  --arxo-w: 140px;
  --arxo-desc: #7771ae;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: var(--arxo-w);
  flex: none;
  line-height: 1;
  vertical-align: middle;
  container-type: inline-size;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.arxo .arxo__svg { display: block; width: 100%; height: auto; overflow: hidden; } /* visible → tanke crte na rubu maske u Chromeu */
/* opisnik: razmjeri iz predloška (69 / 1804 širine riječi, razmak slova 16/69),
   ali nikad sitniji od 8,5 px da ostane čitljiv u malim zaglavljima */
.arxo .arxo__desc {
  display: block;
  margin-top: max(3px, 4.1cqi);
  padding-left: .232em;
  transform: translateX(.7cqi);
  color: var(--arxo-desc);
  font: 400 max(8.5px, 3.82cqi)/1 Arial, Helvetica, "Liberation Sans", sans-serif;
  letter-spacing: .232em;
  white-space: nowrap;
  text-transform: lowercase;
}
.arxo .ax-descriptor { font: 400 69px Arial, Helvetica, "Liberation Sans", sans-serif; letter-spacing: 16px; fill: var(--arxo-desc); }
.arxo--tamno { --arxo-desc: #b3aee8; }
.arxo--mini .arxo__desc { display: none; }
.arxo--znak { --arxo-w: 32px; }
a .arxo, a.arxo { text-decoration: none; }

/* odsjaj svjetla: jednom nakon učitavanja i ponovo pri prelasku mišem */
.arxo .ax-sheen { opacity: 0; transform: translateX(-500px); animation: ax-sheen .9s cubic-bezier(.4,0,.2,1) .6s both; }
a:hover .arxo:not(.arxo--anim) .ax-sheen, .arxo:not(.arxo--anim):hover .ax-sheen { animation-name: ax-sheen-2; animation-delay: 0s; }

/* dolazna animacija — iste krivulje i vremena kao predložak */
.arxo--anim .ax-foundation { opacity: 0; animation: ax-foundation .36s cubic-bezier(.2,.7,.3,1) .06s forwards; }
.arxo--anim .ax-ribbon { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ax-ribbon 1.45s cubic-bezier(.45,0,.2,1) .27s forwards; }
.arxo--anim .ax-detail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ax-ribbon .32s ease-out forwards; }
.arxo--anim .ax-crossbar { animation-delay: .61s; }
.arxo--anim .ax-x-up { animation-delay: 1.02s; }
.arxo--anim .ax-x-down { animation-delay: 1.1s; }
.arxo--anim .ax-descriptor { opacity: 0; animation: ax-caption .45s ease 1.65s forwards; }
.arxo--anim .ax-sheen { animation: ax-sheen .9s cubic-bezier(.4,0,.2,1) 1.75s forwards; }
/* data-hold: stoji na prvoj sličici dok je uvod ne pokrene (.ax-go) */
.arxo--anim[data-hold]:not(.ax-go) .ax-a { animation-play-state: paused; }

@keyframes ax-foundation { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ax-ribbon { to { stroke-dashoffset: 0; } }
@keyframes ax-caption { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ax-sheen { 0% { opacity: 0; transform: translateX(-500px); } 22% { opacity: .36; } 75% { opacity: .26; } 100% { opacity: 0; transform: translateX(2200px); } }
@keyframes ax-sheen-2 { 0% { opacity: 0; transform: translateX(-500px); } 22% { opacity: .36; } 75% { opacity: .26; } 100% { opacity: 0; transform: translateX(2200px); } }

@media (prefers-reduced-motion: reduce) {
  .arxo .ax-foundation, .arxo .ax-descriptor { opacity: 1; animation: none; transform: none; }
  .arxo .ax-ribbon, .arxo .ax-detail { stroke-dashoffset: 0; animation: none; }
  .arxo .ax-sheen { display: none; animation: none; }
}
@media print {
  .arxo .ax-foundation, .arxo .ax-descriptor { opacity: 1; animation: none; transform: none; }
  .arxo .ax-ribbon, .arxo .ax-detail { stroke-dashoffset: 0; animation: none; }
  .arxo .ax-sheen { display: none; }
}