/*
 * /sikkerhet/ (template-parts/sections/sikkerhet/). Bygger på plattform.css,
 * heltside.css og nettside.css (inc/plattform.php). Animasjonen i toppen
 * styres av sikkerhet.js. Etter endringer kjøres scripts/mork/lag_mork.py.
 *
 *   .sk-topp        H1 og knappene, og forslaget som går gjennom sjekkene
 *   .sk-prinsipper  fire kort med reglene
 *   .sk-sjekkene    de fem sjekkene i rekkefølge
 *   .sk-grenser     hva heltene gjør selv, med ditt ja og aldri
 *   .sk-koblinger   tilkoblingene og hva de har tilgang til
 *   .sk-omrader     data, AI, innlogging og logg, og det som er på vei
 *   .sk-kontakt     meld fra og avtalene
 */

.sk-ikon {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #f1ebff;
	color: #6d28d9;
	font-size: 21px;
}

/* ---------- Toppen ---------- */

.sk-topp {
	padding-block: clamp(116px, 11vw, 160px) clamp(72px, 8vw, 112px);
	background:
		radial-gradient(50% 55% at 86% 20%, #ecfdf5 0%, rgba(236, 253, 245, 0) 70%),
		radial-gradient(40% 45% at 0% 0%, #f4edff 0%, rgba(244, 237, 255, 0) 70%),
		#fff;
}

.sk-topp-rad { display: grid; gap: 48px; align-items: center; }
.sk-topp-tekst { min-width: 0; max-width: 620px; }
.sk-topp .ns-smuler { margin-bottom: 22px; }
.sk-ingress { max-width: 34rem; margin: 22px 0 0; }

.sk-port { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }

/* Seglet i hjørnet, med radarringer, og merkene som svever ved kortet */
.sk-segl { position: absolute; z-index: 2; top: -30px; right: -22px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #6712fb; color: #fff; }
.sk-segl .sk-a { width: 42px; height: 42px; }
.sk-segl .sk-a-ring { display: none; }
.sk-segl-ring { position: absolute; inset: 0; border: 2px solid #6712fb; border-radius: 50%; opacity: 0; }
.sk-svev { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid #e7e3f1; border-radius: 999px; background: #fff; color: var(--pf-blekk); font-size: 13px; font-weight: 700; }
.sk-svev > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f1ebff; color: #6d28d9; }
.sk-svev .sk-a { width: 20px; height: 20px; }
.sk-svev--1 { top: 34%; left: -48px; }
.sk-svev--2 { right: -30px; bottom: 16%; }
.sk-svev--2 > span { background: #ecfdf5; color: #059669; }

@media (prefers-reduced-motion: no-preference) {
	.er-synlig .sk-segl-ring { animation: sk-radar 2.8s ease-out infinite; }
	.er-synlig .sk-segl-ring--2 { animation-delay: 1.4s; }
	.er-synlig .sk-svev--1 { animation: sk-svev 5s ease-in-out infinite; }
	.er-synlig .sk-svev--2 { animation: sk-svev 5s ease-in-out 2.5s infinite; }
}

@keyframes sk-radar { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sk-svev { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }

@media (max-width: 1099px) {
	.sk-svev--1 { left: -16px; }
	.sk-svev--2 { right: -10px; }
}

@media (max-width: 599px) {
	.sk-segl { top: -22px; right: -6px; width: 64px; height: 64px; }
	.sk-segl .sk-a { width: 32px; height: 32px; }
	.sk-svev { display: none; }
}

.sk-port-kort {
	display: grid;
	gap: 14px;
	padding: 22px;
	border: 1px solid #e7e3f1;
	border-radius: 28px;
	background: #fff;
}

.sk-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--flate, #f1eef8);
}

.sk-avatar img { width: 86%; height: auto; }
.sk-avatar--liten { width: 30px; height: 30px; margin-left: auto; }

.sk-forslag { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #faf9fd; color: var(--pf-gra); font-size: 15px; line-height: 1.4; }
.sk-forslag b { display: block; color: var(--pf-blekk); font-weight: 700; }

.sk-ja { display: flex; justify-content: flex-end; }

.sk-ja-knapp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid #7c3aed;
	border-radius: 10px;
	background: var(--knapp);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: background-color .3s, color .3s, transform .3s var(--pf-myk);
}

.sk-sjekker { display: grid; gap: 6px; }

.sk-sjekk {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 12px;
	color: var(--pf-tekst);
	font-size: 14.5px;
	line-height: 1.35;
	transition: background-color .3s;
}

.sk-hake {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #dcfce7;
	color: #15803d;
	font-size: 13px;
	transition: background-color .3s, color .3s, transform .3s var(--pf-myk);
}

.sk-hake svg { stroke-width: 3; }
.sk-sjekk-tekst { transition: color .3s; }

.sk-ferdig {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border-radius: 14px;
	background: #ecfdf5;
	color: #047857;
	font-size: 14.5px;
	font-weight: 700;
	transition: opacity .4s, transform .4s var(--pf-myk);
}

/* Mens animasjonen spiller (sikkerhet.js), er stegene tomme til de er nådd */
.sk-port.spiller .sk-ja:not(.er-trykket) .sk-ja-knapp { border-color: #e7e3f1; background: #fff; color: var(--pf-gra); }
.sk-port.spiller .sk-ja.er-trykket .sk-ja-knapp { transform: scale(.97); }
.sk-port.spiller .sk-sjekk:not(.er-sjekket) .sk-hake { background: #f1f1f5; color: transparent; transform: scale(.85); }
.sk-port.spiller .sk-sjekk:not(.er-sjekket) .sk-sjekk-tekst { color: #a1a1b3; }
.sk-port.spiller .sk-sjekk.er-aktiv { background: #f5f3ff; }
.sk-port.spiller .sk-ferdig:not(.er-ferdig) { opacity: 0; transform: translateY(8px); }

@media (min-width: 1000px) {
	.sk-topp-rad { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
}

/* ---------- Prinsippene ---------- */

.sk-prinsipper { background: #fff; }
.sk-prinsipp-liste { display: grid; gap: 16px; }

.sk-prinsipp {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: 26px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
}

.sk-prinsipp h3 { color: var(--pf-blekk); }
.sk-prinsipp p { color: var(--pf-gra); font-size: 16px; line-height: 1.55; }

@media (min-width: 700px) {
	.sk-prinsipp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.sk-prinsipp-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- De fem sjekkene ---------- */

.sk-sjekkene { background: var(--pf-flate); }
.sk-steg-liste { display: grid; gap: 12px; max-width: 880px; counter-reset: steg; }

.sk-steg {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 18px;
	padding: 22px 24px;
	border: 1px solid var(--pf-linje);
	border-radius: 22px;
	background: #fff;
}

.sk-steg-nr {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #0a0f1f;
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sk-steg-tekst h3 { color: var(--pf-blekk); }
.sk-steg-tekst p { margin-top: 6px; color: var(--pf-gra); font-size: 16px; line-height: 1.55; }

.sk-steg-helt {
	display: inline-flex;
	grid-column: 2;
	align-items: center;
	gap: 8px;
	justify-self: start;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	background: var(--flate);
	color: var(--pf-blekk);
	font-size: 13px;
}

.sk-steg-helt img { width: 26px; height: 26px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; }

.sk-steg-fot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
	color: var(--pf-tekst);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.sk-steg-fot svg { flex: none; color: #059669; }

@media (min-width: 760px) {
	.sk-steg { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
	.sk-steg-helt { grid-column: auto; justify-self: end; }
}

/* ---------- Hva heltene kan gjøre ---------- */

.sk-grenser { background: #fff; }
.sk-grense-rad { display: grid; gap: 16px; }

.sk-grense {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
}

.sk-grense h3 { color: var(--pf-blekk); }
.sk-grense-punkter { display: grid; gap: 10px; }
.sk-grense-punkter li { display: flex; gap: 10px; color: var(--pf-tekst); font-size: 16px; line-height: 1.45; }
.sk-grense-punkter svg { flex: none; margin-top: 4px; }
.sk-grense-merknad { padding-top: 14px; border-top: 1px solid var(--pf-linje); color: var(--pf-gra); font-size: 14.5px; line-height: 1.5; }

.sk-grense--av .sk-ikon { background: #ecfdf5; color: #059669; }
.sk-grense--av .sk-grense-punkter svg { color: #059669; }
.sk-grense--ja .sk-ikon { background: #f1ebff; color: #6d28d9; }
.sk-grense--ja .sk-grense-punkter svg { color: #7c3aed; }

/* Fast farge, så kortet blir mørkt også i mørk modus */
.sk-grense--aldri { border-color: #0a0f1f; background: #0a0f1f; }
.sk-grense--aldri .sk-ikon { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.sk-grense--aldri h3 { color: #fff; }
.sk-grense--aldri .sk-grense-punkter li { color: rgba(255, 255, 255, .88); }
.sk-grense--aldri .sk-grense-punkter svg { color: #fca5a5; }
.sk-grense--aldri .sk-grense-merknad { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .66); }

.sk-grense-fot { max-width: 52rem; margin-top: 28px; color: var(--pf-gra); font-size: 15px; line-height: 1.6; text-align: center; }

@media (min-width: 1000px) {
	.sk-grense-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tilkoblingene ---------- */

.sk-koblinger { background: var(--pf-flate); }
.sk-kobling-liste { display: grid; gap: 14px; }

.sk-kobling {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--pf-linje);
	border-radius: 22px;
	background: #fff;
}

.sk-kobling-hode { display: flex; align-items: center; gap: 12px; }
.sk-kobling-logo { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
:root body .sk-koblinger h3.sk-kobling-navn { --hh-fs: 1.2rem; --hh-lh: 1.25; }
.sk-kobling-navn { color: var(--pf-blekk); }

.sk-kobling-tilgang {
	justify-self: start;
	padding: 5px 11px;
	border-radius: 999px;
	background: #f1ebff;
	color: #5b21b6;
	font-size: 13px;
	font-weight: 700;
}

.sk-kobling-tekst { color: var(--pf-gra); font-size: 15.5px; line-height: 1.55; }

@media (min-width: 700px) {
	.sk-kobling-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.sk-kobling-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Slik beskytter vi dataene ---------- */

.sk-omrader { background: #fff; }
.sk-omrade-liste { display: grid; gap: 16px; }

.sk-omrade {
	padding: 28px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
}

.sk-omrade-hode { display: flex; align-items: center; gap: 14px; }
.sk-omrade-hode h3 { color: var(--pf-blekk); }
/* Faktaarket: etiketten til venstre, så øyet kan skumme nedover, og
   forklaringen til høyre. På mobil står etiketten over */
.sk-ark { display: grid; margin: 20px 0 0; }
.sk-ark > div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--pf-linje); }
.sk-ark > div:first-child { border-top: 0; padding-top: 4px; }
.sk-ark dt { display: flex; align-items: flex-start; gap: 8px; color: var(--pf-blekk); font-size: 15px; font-weight: 700; line-height: 1.45; }
.sk-ark dt svg,
.sk-ark-hel svg { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; background: #ecfdf5; color: #059669; stroke-width: 3; }
.sk-ark dd { margin: 0; color: var(--pf-gra); font-size: 15px; line-height: 1.5; }
.sk-ark .sk-ark-hel { display: flex; grid-column: 1 / -1; gap: 8px; color: var(--pf-tekst); }

/* Hver gruppe i sin farge, som i Kort fortalt */
.sk-omrade:nth-child(2) .sk-omrade-hode .sk-ikon { background: #fff4e5; color: #c2410c; }
.sk-omrade:nth-child(3) .sk-omrade-hode .sk-ikon { background: #e0f4ff; color: #0369a1; }
.sk-omrade:nth-child(4) .sk-omrade-hode .sk-ikon { background: #f3f1fa; color: #33334a; }

@media (max-width: 599px) {
	.sk-ark > div { grid-template-columns: minmax(0, 1fr); }
	.sk-ark dd { padding-left: 26px; }
}

.sk-kommer {
	display: grid;
	gap: 14px;
	margin-top: 20px;
	padding: 22px 26px;
	border: 1.5px dashed #e3d9fb;
	border-radius: 22px;
	background: #fdfcff;
}

.sk-kommer-tittel { display: flex; align-items: center; gap: 10px; color: var(--pf-blekk); font-size: 16px; font-weight: 800; }
.sk-kommer ul { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-kommer li { padding: 7px 14px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 14px; font-weight: 600; }

@media (min-width: 900px) {
	.sk-omrade-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-kommer { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}

/* ---------- Meld fra og avtalene ---------- */

.sk-kontakt { padding-top: 0; background: #fff; }
.sk-kontakt-rad { display: grid; gap: 16px; }

.sk-kontakt-kort {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 14px;
	padding: 30px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: var(--pf-flate);
}

.sk-kontakt-kort h2 { color: var(--pf-blekk); }
.sk-kontakt-kort p { color: var(--pf-gra); font-size: 16px; line-height: 1.55; }
.sk-kontakt-kort--meld .sk-ikon { background: #fee2e2; color: #dc2626; }
.sk-kontakt-knapp { gap: 10px; margin-top: 4px; }
.sk-kontakt-lenker { display: grid; gap: 8px; }
.sk-kontakt-lenker .pf-lenke { font-size: 16px; }
.sk-kontakt-lenker .pf-lenke:hover svg { transform: translateX(3px); }
:root body .sk-kontakt h2.pf-h4 { --hh-fs: 1.4rem; --hh-lh: 1.25; }

@media (min-width: 900px) {
	.sk-kontakt-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.sk-ja-knapp,
	.sk-hake,
	.sk-sjekk,
	.sk-ferdig { transition: none; }
}

/* ---------- Ikonene med bevegelse (hh_sikkerhet_ikon() i inc/sikkerhet.php) ---------- */

.sk-ikon--anim { width: 58px; height: 58px; border-radius: 17px; }
.sk-a { display: block; width: 32px; height: 32px; overflow: visible; }
.sk-a * { transform-box: fill-box; transform-origin: center; }

/* Sluttbildet, som også er det som står med redusert bevegelse */
.sk-a-tegn,
.sk-a-linje { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sk-a-ring { opacity: 0; stroke-width: 1.6; }
.sk-a-led { fill: #10b981; stroke: none; }
.sk-a-spor { fill: currentColor; fill-opacity: .16; }
.sk-a-knott { fill: currentColor; stroke: none; transform: translateX(18px); }
.sk-a-gnist { fill: currentColor; stroke: none; }
.sk-a-prikk { fill: currentColor; stroke: none; }
.sk-a-hull { fill: currentColor; stroke: none; }
.sk-a-nokkel { transform-origin: 15px 24px; transform-box: view-box; }
.sk-a-snurr { transform-origin: 24px 24px; transform-box: view-box; }

/* ---------- Kort fortalt ---------- */

.sk-fakta { margin-top: clamp(44px, 5vw, 72px); }
.sk-fakta-tittel { margin-bottom: 14px; color: #8a8a9b; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sk-fakta-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk-fakt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--pf-linje); border-radius: 22px; background: #fff; }
.sk-fakt > span:last-child { min-width: 0; color: var(--pf-gra); font-size: 14px; line-height: 1.45; }
.sk-fakt b { display: block; margin-bottom: 2px; color: var(--pf-blekk); font-size: 16px; font-weight: 700; }
.sk-fakt:nth-child(1) .sk-ikon { background: #e0f4ff; color: #0369a1; }
.sk-fakt:nth-child(2) .sk-ikon { background: #f1ebff; color: #6d28d9; }
.sk-fakt:nth-child(3) .sk-ikon { background: #ecfdf5; color: #059669; }
.sk-fakt:nth-child(4) .sk-ikon { background: #fff4e5; color: #c2410c; }
.sk-fakt:nth-child(5) .sk-ikon { background: #f3f1fa; color: #33334a; }
.sk-fakt:nth-child(6) .sk-ikon { background: #f1ebff; color: #6d28d9; }

@media (max-width: 959px) {
	.sk-fakta-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.sk-fakta-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Bevegelsen ---------- */

@media (prefers-reduced-motion: no-preference) {
	.er-synlig .sk-a--skjold .sk-a-tegn,
	.er-synlig .sk-a--forbud .sk-a-tegn { animation: sk-a-tegn 5s cubic-bezier(.4, 0, .2, 1) infinite both; }
	.er-synlig .sk-a--skjold .sk-a-ring,
	.er-synlig .sk-a--stopp .sk-a-ring { animation: sk-a-ring 5s ease-out infinite both; }
	.er-synlig .sk-a--forbud { animation: sk-a-rist 5s ease infinite both; }
	.er-synlig .sk-a-boyle { animation: sk-a-boyle 5s cubic-bezier(.3, 0, .2, 1.4) infinite both; }
	.er-synlig .sk-a-hull { animation: sk-a-blink-30 5s ease infinite both; }
	.er-synlig .sk-a-merke { animation: sk-a-pop 5s cubic-bezier(.2, .9, .3, 1.3) infinite both; }
	.er-synlig .sk-a-trykk { animation: sk-a-trykk 5s ease infinite both; }
	.er-synlig .sk-a-led { animation: sk-a-led 1.6s steps(1) infinite; }
	.er-synlig .sk-a-led--2 { animation-delay: .8s; }
	.er-synlig .sk-a-gnist { animation: sk-a-gnist 3.2s ease-in-out infinite; }
	.er-synlig .sk-a-nokkel { animation: sk-a-nokkel 5s cubic-bezier(.4, 0, .2, 1) infinite both; }
	.er-synlig .sk-a-linje--1 { animation: sk-a-linje-1 5s ease infinite both; }
	.er-synlig .sk-a-linje--2 { animation: sk-a-linje-2 5s ease infinite both; }
	.er-synlig .sk-a-linje--3 { animation: sk-a-linje-3 5s ease infinite both; }
	.er-synlig .sk-a-prikk { animation: sk-a-blink-70 5s ease infinite both; }
	.er-synlig .sk-a-knott { animation: sk-a-knott 5s cubic-bezier(.5, 0, .2, 1.3) infinite both; }
	.er-synlig .sk-a-spor { animation: sk-a-spor 5s ease infinite both; }
	.er-synlig .sk-a-straale { animation: sk-a-straale 1.2s steps(2) infinite; }
	.er-synlig .sk-a-nal { animation: sk-a-nal 2.4s ease-in-out infinite; }
	.er-synlig .sk-a-snurr { animation: sk-a-snurr 4s linear infinite; }

	/* De fem sjekkene: pulsen går nedover, og hvert steg blir grønt når det er sjekket */
	.sk-steg.er-synlig:nth-child(1) { animation: sk-kort-1 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(1) .sk-steg-nr { animation: sk-nr-1 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(2) { animation: sk-kort-2 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(2) .sk-steg-nr { animation: sk-nr-2 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(3) { animation: sk-kort-3 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(3) .sk-steg-nr { animation: sk-nr-3 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(4) { animation: sk-kort-4 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(4) .sk-steg-nr { animation: sk-nr-4 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(5) { animation: sk-kort-5 10s ease infinite; }
	.sk-steg.er-synlig:nth-child(5) .sk-steg-nr { animation: sk-nr-5 10s ease infinite; }
}

@keyframes sk-a-tegn { 0%, 8% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-a-ring { 0%, 28% { opacity: 0; transform: scale(.8); } 34% { opacity: .55; } 70%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes sk-a-rist { 0%, 30% { transform: none; } 33% { transform: rotate(-8deg); } 36% { transform: rotate(7deg); } 39% { transform: rotate(-4deg); } 42%, 100% { transform: none; } }
@keyframes sk-a-boyle { 0%, 10% { transform: translateY(-6px); } 24% { transform: translateY(1.5px); } 28%, 100% { transform: none; } }
@keyframes sk-a-blink-30 { 0%, 26% { opacity: 1; } 30% { opacity: .2; } 34%, 100% { opacity: 1; } }
@keyframes sk-a-blink-70 { 0%, 60% { opacity: 0; } 64%, 74% { opacity: 1; } 78%, 82% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes sk-a-pop { 0%, 10% { opacity: 0; transform: scale(0); } 22% { opacity: 1; transform: scale(1.18); } 28%, 100% { opacity: 1; transform: none; } }
@keyframes sk-a-trykk { 0%, 20% { transform: none; } 26% { transform: scale(.82); } 34%, 100% { transform: none; } }
@keyframes sk-a-led { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sk-a-gnist { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.7); } }
@keyframes sk-a-nokkel { 0%, 8% { transform: translateX(-6px); } 26% { transform: none; } 40%, 62% { transform: rotate(-16deg); } 76%, 100% { transform: none; } }
@keyframes sk-a-linje-1 { 0%, 6% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-a-linje-2 { 0%, 20% { stroke-dashoffset: 1; } 34%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-a-linje-3 { 0%, 34% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-a-knott { 0%, 14% { transform: none; } 30%, 100% { transform: translateX(18px); } }
@keyframes sk-a-spor { 0%, 14% { fill-opacity: 0; } 30%, 100% { fill-opacity: .16; } }
@keyframes sk-a-straale { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes sk-a-nal { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes sk-a-snurr { to { transform: rotate(-360deg); } }
@keyframes sk-nr-1 { 0%, 6% { background: #0a0f1f; } 8%, 18% { background: #6712fb; } 20%, 90% { background: #059669; } 96%, 100% { background: #0a0f1f; } }
@keyframes sk-kort-1 { 0%, 6% { border-color: var(--pf-linje); } 8%, 18% { border-color: #c4b5fd; } 20%, 100% { border-color: var(--pf-linje); } }
@keyframes sk-nr-2 { 0%, 20% { background: #0a0f1f; } 22%, 32% { background: #6712fb; } 34%, 90% { background: #059669; } 96%, 100% { background: #0a0f1f; } }
@keyframes sk-kort-2 { 0%, 20% { border-color: var(--pf-linje); } 22%, 32% { border-color: #c4b5fd; } 34%, 100% { border-color: var(--pf-linje); } }
@keyframes sk-nr-3 { 0%, 34% { background: #0a0f1f; } 36%, 46% { background: #6712fb; } 48%, 90% { background: #059669; } 96%, 100% { background: #0a0f1f; } }
@keyframes sk-kort-3 { 0%, 34% { border-color: var(--pf-linje); } 36%, 46% { border-color: #c4b5fd; } 48%, 100% { border-color: var(--pf-linje); } }
@keyframes sk-nr-4 { 0%, 48% { background: #0a0f1f; } 50%, 60% { background: #6712fb; } 62%, 90% { background: #059669; } 96%, 100% { background: #0a0f1f; } }
@keyframes sk-kort-4 { 0%, 48% { border-color: var(--pf-linje); } 50%, 60% { border-color: #c4b5fd; } 62%, 100% { border-color: var(--pf-linje); } }
@keyframes sk-nr-5 { 0%, 62% { background: #0a0f1f; } 64%, 74% { background: #6712fb; } 76%, 90% { background: #059669; } 96%, 100% { background: #0a0f1f; } }
@keyframes sk-kort-5 { 0%, 62% { border-color: var(--pf-linje); } 64%, 74% { border-color: #c4b5fd; } 76%, 100% { border-color: var(--pf-linje); } }