/* Mikroanimacije u jeziku nacrta: tanke linije, registracione oznake i
   kratki pomaci. Dodatak postojećem Drvex dizajnu; bez novih biblioteka. */
:root { --ease-detalj: cubic-bezier(.22, 1, .36, 1); }

/* Pomak natpisa u maski. Druga kopija je samo vizuelna. */
.detalj-natpis {
  position: relative; display: inline-block; overflow: hidden;
  vertical-align: middle; line-height: 1.4; padding-block: .08em; margin-block: -.08em;
}
.detalj-natpis > span { display: block; transition: transform .48s var(--ease-detalj); }
.detalj-natpis > span[aria-hidden] { position: absolute; inset: .08em 0 auto; transform: translateY(125%); }
[data-detalj-dugme]:focus-visible .detalj-natpis > span:first-child { transform: translateY(-125%); }
[data-detalj-dugme]:focus-visible .detalj-natpis > span[aria-hidden] { transform: translateY(0); }
.eh__veza > span[aria-hidden], .alat__dugme > span[aria-hidden], .dekori2__cta > span[aria-hidden] {
  display: inline-block; transition: transform .45s var(--ease-detalj);
}
.eh__veza:focus-visible > span[aria-hidden], .alat:focus-visible .alat__dugme > span[aria-hidden] { transform: translate(4px, -2px); }

/* Podvlačenje u navigaciji se kratko otvori od lijevog ruba. */
.topbar__nav a { position: relative; border-bottom-color: transparent !important; }
.topbar__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-detalj);
}
.topbar__nav a[aria-current="page"]::after, .topbar__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.detalj-napredak {
  position: absolute; bottom: -1px; inset-inline: 0; height: 1px;
  background: var(--smeda); opacity: .7; transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* Uglovi rastu u hoveru; okviri imaju isti jezik kao kote na nacrtima. */
.alat.detalj-okvir, .dk__ploca.detalj-okvir, .vz__slika.detalj-okvir { position: relative; }
.detalj-uglovi {
  position: absolute; inset: 9px; z-index: 3; pointer-events: none;
  opacity: 0; color: var(--smeda); font-style: normal; transition: opacity .3s ease;
}
.detalj-uglovi i {
  position: absolute; width: 7px; height: 7px; border: solid currentColor;
  transition: width .45s var(--ease-detalj), height .45s var(--ease-detalj);
}
.detalj-uglovi i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.detalj-uglovi i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.detalj-uglovi i:nth-child(3) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.detalj-uglovi i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.dekori2__mreza .detalj-uglovi { margin: 0; opacity: 0; line-height: 1; }
.dekori2__pregled .detalj-uglovi, .vz__slika .detalj-uglovi { inset: 12px; color: var(--krem); }
.detalj-okvir:focus-visible > .detalj-uglovi,
a:focus-visible .dk__ploca > .detalj-uglovi,
.dekori2__mreza a.je-aktivan .detalj-uglovi { opacity: 1; }
.detalj-okvir:focus-visible > .detalj-uglovi i,
a:focus-visible .dk__ploca > .detalj-uglovi i,
.dekori2__mreza a.je-aktivan .detalj-uglovi i { width: 16px; height: 16px; }

/* Linija se iscrta tek kad njena sekcija uđe u kadar. */
.detalj-linija { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .detalj-linija { border-top-color: transparent !important; }
  .detalj-linija::after {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: currentColor; opacity: .22; transform: scaleX(0); transform-origin: left;
    transition: transform 1s var(--ease-detalj);
  }
  .detalj-linija.detalj-u-kadru::after { transform: scaleX(1); }
  .alat__crtez.detalj-u-kadru .detalj-potez {
    stroke-dasharray: var(--duzina); animation: detalj-iscrtaj .95s var(--ease-detalj) both;
    animation-delay: calc(var(--red-crteza, 0) * 55ms);
  }
}
@keyframes detalj-iscrtaj { from { stroke-dashoffset: var(--duzina); } to { stroke-dashoffset: 0; } }

/* Svjetlo na alatima je ograničeno na karticu, pomaci na nekoliko piksela. */
.alat { isolation: isolate; }
.alat::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(280px circle at var(--svjetlo-x, 50%) var(--svjetlo-y, 30%), rgb(255 255 255 / .65), transparent 75%);
  opacity: 0; transition: opacity .45s ease;
}
.alat__crtez .c-komad, .alat__crtez .c-ostatak { transition: transform .6s var(--ease-detalj), fill .4s ease; }
.alat:focus-visible::before { opacity: 1; }
.alat:focus-visible .c-komad:nth-of-type(even) { transform: translateY(-3px); }

/* Lokalni mjeriteljski križić. Ništa se ne prikazuje na dodirnim ekranima. */
.detalj-nisan {
  position: absolute; top: 0; left: 0; z-index: 4; width: 0; height: 0;
  color: var(--smeda); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.detalj-nisan::before, .detalj-nisan::after { content: ''; position: absolute; background: currentColor; }
.detalj-nisan::before { width: 23px; height: 1px; left: -11px; top: 0; }
.detalj-nisan::after { height: 23px; width: 1px; top: -11px; left: 0; }
.detalj-koordinate {
  position: absolute; z-index: 4; right: var(--rub, 24px); top: calc(var(--topbar-h) + 48px);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em; color: var(--smeda); opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.detalj-mis .detalj-nisan { opacity: .7; }
.detalj-mis .detalj-koordinate { opacity: .8; }

/* Urednički ulaz ostaje kratak i čist, bez zamagljivanja sitnog teksta. */
.js .urednik-tekst { filter: none; transition-duration: .65s, .8s, 0s; }
.rijec > span { transition-duration: .85s; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-detalj-dugme]:hover .detalj-natpis > span:first-child { transform: translateY(-125%); }
  [data-detalj-dugme]:hover .detalj-natpis > span[aria-hidden] { transform: translateY(0); }
  .topbar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .eh__veza:hover > span[aria-hidden], .alat:hover .alat__dugme > span[aria-hidden],
  .dekori2__pregled:hover .dekori2__cta > span[aria-hidden] { transform: translate(4px, -2px); }
  .detalj-okvir:hover > .detalj-uglovi, a:hover .dk__ploca > .detalj-uglovi { opacity: 1; }
  .detalj-okvir:hover > .detalj-uglovi i, a:hover .dk__ploca > .detalj-uglovi i { width: 16px; height: 16px; }
  .alat:hover::before { opacity: 1; }
  .alat:hover .c-komad:nth-of-type(even) { transform: translateY(-3px); }
  .alat:hover .c-ostatak, .alat:focus-visible .c-ostatak { transform: translateX(-4px); }
  .indeks__lista a { transition: background-color .4s ease; }
  .indeks__lista a:hover { background-color: rgb(148 73 33 / .035); }
}

@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .detalj-nisan, .detalj-koordinate { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .detalj-natpis > span, .detalj-uglovi, .detalj-uglovi i,
  .topbar__nav a::after, .alat::before, .alat__crtez .c-komad,
  .alat__crtez .c-ostatak, .eh__veza > span[aria-hidden],
  .alat__dugme > span[aria-hidden], .dekori2__cta > span[aria-hidden] { transition: none; }
  [data-detalj-dugme] .detalj-natpis > span:first-child { transform: none !important; }
  .detalj-natpis > span[aria-hidden] { display: none; }
  .detalj-nisan, .detalj-koordinate { display: none; }
  .alat__crtez .detalj-potez { animation: none; stroke-dasharray: none; }
  .alat { transform: none !important; }
}