/*
 * Ikonene som hadde gradient bak, i samme stil som på /sikkerhet/: en lys,
 * flat flate med ikonet i en sterkere farge, lilla som standard og grønn, blå
 * og oransje annenhver gang i rutenettene. Ikonet tegner seg selv når kortet
 * kommer på skjermen, og gjør en liten bevegelse av og til
 * (assets/topp/ikoner.js setter ik-synlig). Med redusert bevegelse står de
 * stille. Ingen gradienter og ingen skygger.
 *
 * Lista over flisene står også i ikoner.js, og de må være like.
 */

:is(.int-gjor-ikon, .kt-kanal-ikon, .oo-punkt-ikon, .pf-kraft-ikon, .pr-ikon--fylt, .rs-kat-ikon, .svc-icon, .svc-strip-icon, .kalk-addon-ic, .skv-knapp-ikon, .om-kort-ikon, .om-prinsipp-ikon, .om-whw-ikon, .bg-gradient-brand[aria-hidden="true"]:has(> svg)) {
	background: #f1ebff !important;
	background-image: none !important;
	color: #6d28d9 !important;
}

/* Annenhver farge i rutenettene, som i Kort fortalt på /sikkerhet/ */
:nth-child(4n+2) > :is(.int-gjor-ikon, .kt-kanal-ikon, .oo-punkt-ikon, .pf-kraft-ikon, .pr-ikon--fylt, .rs-kat-ikon, .svc-icon, .svc-strip-icon, .kalk-addon-ic, .skv-knapp-ikon, .om-kort-ikon, .om-prinsipp-ikon, .om-whw-ikon, .bg-gradient-brand[aria-hidden="true"]:has(> svg)) { background: #ecfdf5 !important; color: #059669 !important; }
:nth-child(4n+3) > :is(.int-gjor-ikon, .kt-kanal-ikon, .oo-punkt-ikon, .pf-kraft-ikon, .pr-ikon--fylt, .rs-kat-ikon, .svc-icon, .svc-strip-icon, .kalk-addon-ic, .skv-knapp-ikon, .om-kort-ikon, .om-prinsipp-ikon, .om-whw-ikon, .bg-gradient-brand[aria-hidden="true"]:has(> svg)) { background: #e0f4ff !important; color: #0369a1 !important; }
:nth-child(4n+4) > :is(.int-gjor-ikon, .kt-kanal-ikon, .oo-punkt-ikon, .pf-kraft-ikon, .pr-ikon--fylt, .rs-kat-ikon, .svc-icon, .svc-strip-icon, .kalk-addon-ic, .skv-knapp-ikon, .om-kort-ikon, .om-prinsipp-ikon, .om-whw-ikon, .bg-gradient-brand[aria-hidden="true"]:has(> svg)) { background: #fff4e5 !important; color: #c2410c !important; }

@media (prefers-reduced-motion: no-preference) {
	/* Strekene tegnes når flisen kommer på skjermen */
	.ik-flis svg :is(path, line, polyline, polygon, circle, rect, ellipse) { stroke-dasharray: 160; stroke-dashoffset: 160; }
	.ik-flis.ik-synlig svg :is(path, line, polyline, polygon, circle, rect, ellipse) { animation: ik-tegn 1.2s cubic-bezier(.4, 0, .2, 1) var(--ik-d, 0s) forwards; }

	/* Og så en liten bevegelse av og til, ikke alle på en gang */
	.ik-flis.ik-synlig svg { animation: ik-dytt 7s ease-in-out calc(var(--ik-d, 0s) + 1.6s) infinite; transform-origin: center; }
}

@keyframes ik-tegn { to { stroke-dashoffset: 0; } }
@keyframes ik-dytt { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-9deg) scale(1.08); } 94% { transform: rotate(6deg) scale(1.04); } 97% { transform: none; } }