/* ── Kalkulator: animowane ikony (30.09.2026) ─────────────────────────────────────────────────────────────────────
   .kodz – okrągła plakietka w nagłówku (strona główna i podstrony): gradient w kolorach strony, pierścień „ping”,
           cyfry „wpisywane” klawiszami i błysk klawisza „=” (pętla 4,8 s); po najechaniu powiększa się i przechyla.
   .kik  – mały kalkulator przy słowie „kalkulator” w treści, stopce i kafelku poradnika (link .link-kalk).
   Bez identyfikatorów w SVG (gradienty i połysk w CSS) – wiele ikon na jednej stronie nie koliduje, także ukrytych.
   Animacje celowo bez warunku prefers-reduced-motion (treść – zasada strony). Na wydruku ikon nie ma. */

/* ── plakietka w nagłówku ── */
.kodz {
    position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
    width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, #86dcf4 0%, #2fa7dd 40%, #1476b3 72%, #0f5d91 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 14px rgba(31, 147, 199, .45);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.kodz::before {                                              /* pierścień „ping” – dwa razy w cyklu, pierwszy razem z „=” */
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(80, 192, 223, .9);
    opacity: 0; pointer-events: none; animation: kodz-ping 2.4s 1.35s cubic-bezier(0, 0, .2, 1) infinite;
}
.kodz > svg { display: block; width: 64%; height: 64%; overflow: visible; animation: kalk-klik 4.8s 1.35s infinite; }
.kodz-obud { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 1.6; }
.kodz-ekran { fill: #fff; }
.kodz-cyfry rect { fill: #0b5f8f; opacity: 0; animation: kalk-cyfra 4.8s infinite; }
.kodz-cyfry rect:nth-child(1) { animation-delay: .15s; }
.kodz-cyfry rect:nth-child(2) { animation-delay: .55s; }
.kodz-cyfry rect:nth-child(3) { animation-delay: .95s; }
.kodz-klaw circle { fill: #fff; opacity: .6; transform-box: fill-box; transform-origin: center; }
.kodz-klaw circle:nth-child(1) { animation: kodz-klawisz 4.8s .15s infinite; }
.kodz-klaw circle:nth-child(5) { animation: kodz-klawisz 4.8s .55s infinite; }
.kodz-klaw circle:nth-child(3) { animation: kodz-klawisz 4.8s .95s infinite; }
.kodz-klaw .kodz-rowna { animation: kodz-rowna 4.8s 1.35s infinite; }
a:hover > .kodz, a:focus-visible > .kodz {
    transform: scale(1.12) rotate(-7deg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 6px 22px rgba(47, 167, 221, .75);
}

/* ── mała ikona przy słowie „kalkulator” ── */
.link-kalk { white-space: nowrap; }
.kik {
    position: relative; display: inline-block; width: 1.05em; height: 1.35em; margin: 0 .32em 0 .06em; vertical-align: -.3em;
    border-radius: .24em; overflow: hidden;
    background: linear-gradient(150deg, #2d97d6 0%, #11629a 48%, #072a45 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 3px 6px rgba(11, 61, 98, .3);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}
.kik::after {                                                /* przesuw połysku po „=” */
    content: ""; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 38%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: skewX(-16deg); animation: kik-blask 4.8s 1.7s infinite;
}
.kik > svg { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 60%; animation: kalk-klik 4.8s 1.6s infinite; }
.kik-ekran { fill: #d9f5fd; }
.kik-cyfry rect { fill: #0b3d62; opacity: 0; animation: kalk-cyfra 4.8s infinite; }
.kik-cyfry rect:nth-child(1) { animation-delay: .15s; }
.kik-cyfry rect:nth-child(2) { animation-delay: .5s; }
.kik-cyfry rect:nth-child(3) { animation-delay: .85s; }
.kik-cyfry rect:nth-child(4) { animation-delay: 1.2s; }
.kik-klaw rect { fill: #d4f0fb; opacity: .4; }
.kik-klaw rect:nth-child(1) { animation: kalk-klawisz 4.8s .15s infinite; }
.kik-klaw rect:nth-child(5) { animation: kalk-klawisz 4.8s .5s infinite; }
.kik-klaw rect:nth-child(3) { animation: kalk-klawisz 4.8s .85s infinite; }
.kik-klaw rect:nth-child(7) { animation: kalk-klawisz 4.8s 1.2s infinite; }
.kik-klaw .kik-rowna { fill: #50c0df; opacity: 1; animation: kik-rowna 4.8s 1.6s infinite; }
.link-kalk:hover .kik, .link-kalk:focus-visible .kik, a:hover > h3 > .kik, a:focus-visible > h3 > .kik {
    transform: translateY(-3px) rotate(-8deg) scale(1.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 14px rgba(26, 127, 193, .45);
}

/* ── wspólne klatki ── */
@keyframes kalk-klawisz { 0%, 7%, 100% { opacity: .4; } 2.5% { opacity: 1; } }
@keyframes kalk-cyfra { 0% { opacity: 0; } 2.5%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes kalk-klik { 0%, 9%, 100% { transform: none; } 3% { transform: scale(.9); } }
@keyframes kodz-klawisz { 0%, 7%, 100% { opacity: .6; transform: none; } 2.5% { opacity: 1; transform: scale(1.25); } }
@keyframes kodz-rowna { 0%, 10%, 100% { opacity: .6; transform: none; } 3% { opacity: 1; transform: scale(1.5); } }
@keyframes kodz-ping { 0% { transform: scale(1); opacity: .85; } 75%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes kik-rowna { 0%, 9%, 100% { fill: #50c0df; } 3% { fill: #fff; } }
@keyframes kik-blask { 0% { transform: translateX(0) skewX(-16deg); } 18%, 100% { transform: translateX(420%) skewX(-16deg); } }

@media print { .kodz, .kik { display: none !important; } }