/* GM Matrix – prehod skozi kodo (GM Studio). Barve in pisave iz teme. */
.gm-matrix__oder { position: relative; width: 100%; aspect-ratio: var(--gm-razmerje, 1586 / 992); overflow: hidden; }
.gm-matrix__oder picture, .gm-matrix__slika { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gm-matrix__slika { object-fit: fill; opacity: 0; }
.gm-matrix__slika.is-aktivna { opacity: 1; }
.gm-matrix__platno { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; } /* velikost in matrix3d nastavi JS */
.gm-matrix__platno.is-vidno { opacity: 1; }

.gm-matrix__hud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9eb6c7; }
.gm-matrix__stevec { color: #9ef8ff; }
.gm-matrix__ime { color: #fff; min-width: 12ch; }
.gm-matrix__ime::after { content: "_"; color: #9ef8ff; animation: gm-kurzor 1s steps(1) infinite; }
.gm-matrix__povezava { color: #9ef8ff; text-decoration: none; margin-left: auto; }
.gm-matrix__povezava:hover, .gm-matrix__povezava:focus-visible { text-decoration: underline; }
.gm-matrix__nazaj, .gm-matrix__naprej { background: none; border: 1px solid rgba(158, 248, 255, .35); color: #9ef8ff;
  width: 34px; height: 34px; border-radius: 50%; font: inherit; cursor: pointer; }
.gm-matrix__nazaj:hover, .gm-matrix__naprej:hover, .gm-matrix__nazaj:focus-visible, .gm-matrix__naprej:focus-visible { border-color: #9ef8ff; }
@keyframes gm-kurzor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-matrix__ime::after { animation: none; } }
@media (max-width: 699px) {
  .gm-matrix__hud { gap: 10px; font-size: 12px; }
  .gm-matrix__povezava { margin-left: 0; width: 100%; order: 5; }
}

/* Integration with the existing Grafika laptop section. */
.gm-matrix--laptop .gm-matrix__oder{--gm-razmerje:2060 / 763}
@media(max-width:699px){.gm-matrix--laptop .gm-matrix__oder{--gm-razmerje:900 / 763}}
.graphic-page .gm-matrix__slika{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.graphic-page .gm-matrix__oder picture{position:absolute;inset:0}
/* The theme's global image glow must not override Matrix slide visibility. */
html[data-motion=on] body .gm-motion-site .gm-matrix__slika.gm-media.gm-active{animation:none!important}