/* CODE tema: animacije treperenja i sken linija. */
/* ===== CRT SLOJ ===== */
#crtSloj {
    position: fixed;
    inset: 0;
    z-index: 399;
    pointer-events: none;
    background: #000;
    opacity: 0;
    display: none;
    will-change: opacity;
}

body.code-tema[data-code-treperenje="1"] #crtSloj {
    display: block;
    animation: crt-treperenje calc(4s / var(--code-jacina, 0.5)) infinite;
}

@keyframes crt-treperenje {
    0%, 100% { opacity: 0; }
    12% { opacity: 0.005; }
    22% { opacity: 0; }
    36% { opacity: 0.01; }
    48% { opacity: 0.002; }
    62% { opacity: 0.005; }
    78% { opacity: 0; }
    90% { opacity: 0.02; }
}

/* ===== KARTICE U CODE TEMI ===== */
body.code-tema .kartica,
body.code-tema .raspored-kontejner {
    position: relative;
    background: var(--bg-kartica);
    border: 1px solid var(--ivica);
    border-radius: 4px;
    box-shadow: inset 0 0 24px rgba(var(--gx-rgb), 0.05), 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.code-tema .kartica::before,
body.code-tema .kartica::after,
body.code-tema .raspored-kontejner::before,
body.code-tema .raspored-kontejner::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.75;
}

body.code-tema .kartica::before,
body.code-tema .raspored-kontejner::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--primarna);
    border-left: 2px solid var(--primarna);
}

body.code-tema .kartica::after,
body.code-tema .raspored-kontejner::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--primarna);
    border-right: 2px solid var(--primarna);
}

body.code-tema .kartica-zaglavlje {
    border-bottom: 1px solid var(--ivica-svetla);
}

body.code-tema .raspored-zaglavlje {
    border-bottom: 1px solid var(--ivica-svetla);
}

body.code-tema .kartica-zaglavlje h3,
body.code-tema .raspored-zaglavlje h2,
body.code-tema .beleske-zaglavlje h2,
body.code-tema .kalendar-naslov {
    color: var(--tekst-primarni);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.code-tema .kartica-zaglavlje h3::before,
body.code-tema .raspored-zaglavlje h2::before,
body.code-tema .beleske-zaglavlje h2::before {
    content: '> ';
    color: var(--primarna);
    text-shadow: 0 0 8px rgba(var(--gx-rgb), 0.5);
}

body.code-tema .kartica-zaglavlje p,
body.code-tema .raspored-zaglavlje p {
    color: var(--tekst-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}

body.code-tema #appKoren.code-prasak {
    animation: code-prasak-anim var(--prasak-trajanje, 380ms) steps(4, end) both;
}

@keyframes code-prasak-anim {
    0%   { transform: translate(0, 0) skewX(0deg); }
    22%  { transform: translate(var(--gx, 6px), calc(var(--gx, 6px) * -0.4)) skewX(var(--gskew, 1deg)); }
    48%  { transform: translate(calc(var(--gx, 6px) * -0.6), 0) skewX(0deg); }
    74%  { transform: translate(calc(var(--gx, 6px) * 0.4), calc(var(--gx, 6px) * 0.3)) skewX(calc(var(--gskew, 1deg) * -1)); }
    100% { transform: translate(0, 0) skewX(0deg); }
}

body.code-tema .code-pucket {
    animation: pucket-anim var(--pucket-trajanje, 300ms) steps(2, end) both;
}

@keyframes pucket-anim {
    0%   { text-shadow: none; transform: translate(0, 0); }
    20%  { text-shadow: 2px 0 #ff3860, -2px 0 #00fff0; transform: translate(2px, -1px); }
    45%  { text-shadow: -2px 0 #ff3860, 2px 0 #00fff0; transform: translate(-2px, 1px); }
    70%  { text-shadow: 1px 0 #ff3860, -1px 0 #00fff0; transform: translate(1px, 0); }
    100% { text-shadow: none; transform: translate(0, 0); }
}

body.code-tema #appKoren.code-static::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 280px 280px;
    background-repeat: repeat;
    opacity: 0.18;
    animation: static-prasak 130ms steps(2, end) infinite;
}

@keyframes static-prasak {
    0%   { opacity: 0.18; background-position: 0 0; }
    50%  { opacity: 0.1; background-position: -60px 40px; }
    100% { opacity: 0.22; background-position: 50px -30px; }
}

body.code-tema #appKoren.code-slice {
    animation: code-slice-anim var(--slice-trajanje, 420ms) steps(1, end) both;
}

@keyframes code-slice-anim {
    0%   { clip-path: inset(0 0 0 0); transform: translateX(0); }
    18%  { clip-path: inset(14% 0 66% 0); transform: translateX(6px); }
    36%  { clip-path: inset(0 0 0 0); transform: translateX(0); }
    54%  { clip-path: inset(56% 0 12% 0); transform: translateX(-6px); }
    72%  { clip-path: inset(0 0 0 0); transform: translateX(0); }
    88%  { clip-path: inset(32% 0 47% 0); transform: translateX(4px); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

body.code-tema #appKoren.invert-flash {
    filter: invert(1) hue-rotate(180deg);
}


body.code-tema .code-korumpiran {
    color: var(--opasna);
    text-shadow: 1px 0 rgba(255, 56, 96, 0.7), -1px 0 rgba(0, 255, 240, 0.5), 0 0 8px rgba(255, 56, 96, 0.6);
}