/*
 * Flyten i toppen av forsiden (template-parts/plattform/heltflyt.php).
 *
 * Fire scener på en tidslinje på 20 sekunder, som går i loop:
 *
 *    0–25 %  kortene foldes ut, og kunden skriver hva hun trenger
 *   25–50 %  planen i appen, Felix drar oppgaven til Astrid
 *   50–75 %  Astrid jobber: annonsene lages og tilpasses
 *   75–100 % kunden godkjenner, og det går live
 *
 * Hvert element har sine egne nøkkelbilder med faste prosenter, så alt
 * holder takten når filmen starter på nytt. Uten animasjonene står
 * sluttbildet (planen med det som er live), som er det som vises med
 * redusert bevegelse. Scenen er 40em bred, og skriftstørrelsen følger
 * bredden (cqi), så alt skaleres likt. Flate farger og ingen skygger:
 * kortene skilles med kanter og bakgrunn.
 */

.hf {
	--hf-t: 20s;
	--hf-blekk: #0a0f1f;
	--hf-gra: #6b6b80;
	--hf-linje: #ebe7f5;
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 0 0 auto;
	container-type: inline-size;
}

.hf-scene {
	position: relative;
	aspect-ratio: 40 / 35;
	font-size: 2.5cqi;
	color: var(--hf-blekk);
	line-height: 1.3;
}

.hf img { display: block; }

/* Små runde avatarer, maskot eller foto */
.hf-mini { display: inline-grid; flex: none; place-items: center; width: 2.2em; height: 2.2em; border: .14em solid #fff; border-radius: 50%; background: var(--bg, #f1ebff); overflow: hidden; }
.hf-mini img { width: 82%; height: auto; }
.hf-mini--foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* ---------- 1 Kortene ---------- */

.hf-a { position: absolute; inset: 0; pointer-events: none; }

.hf-kort {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15em;
	height: 20.5em;
	margin: -10.6em 0 0 -7.5em;
	border: 1px solid var(--hf-linje);
	border-radius: 1.6em;
	background: var(--bg, #fff);
	overflow: hidden;
	opacity: 0;
}

.hf-kort > img { position: absolute; left: 50%; bottom: .2em; width: 13.5em; max-width: none; transform: translateX(-50%); }
.hf-kort--felix { transform: translate(-8.4em, .9em) rotate(-8deg); }
.hf-kort--astrid { transform: translate(8.4em, .9em) rotate(8deg); }
.hf-kort--astrid .hf-kort-navn { right: 1em; left: auto; }
/* Maskotene står mot ytterkanten, så de synes ved siden av kortet i midten */
.hf-kort--felix > img { left: 34%; bottom: 2.4em; }
.hf-kort--astrid > img { left: 66%; bottom: 2.4em; }

.hf-kort--kunde {
	z-index: 2;
	width: 18.5em;
	height: 24.5em;
	margin: -12.6em 0 0 -9.25em;
	padding: .45em;
	background: #fff;
}

.hf-kort-foto { width: 100%; height: 100%; border-radius: 1.25em; object-fit: cover; object-position: 50% 30%; }

.hf-kort-navn {
	position: absolute;
	top: 1em;
	left: 1em;
	z-index: 1;
	font-size: .95em;
	font-weight: 800;
}

.hf-kort-navn--lys { top: 1.1em; left: 1.1em; padding: .35em .75em; border-radius: 999px; background: rgba(255, 255, 255, .88); }

.hf-skriv {
	position: absolute;
	right: .8em;
	bottom: .8em;
	left: .8em;
	display: flex;
	align-items: center;
	gap: .5em;
	height: 3.4em;
	padding: 0 .45em 0 .9em;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 1.1em;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hf-skriv-tekst { flex: 1; min-width: 0; font-size: .84em; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hf-skriv-tekst > span { display: inline-block; }
.hf-send { display: grid; flex: none; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #6712fb; color: #fff; font-size: 1em; }

/* ---------- 2 og 4 Planen i appen ---------- */

/* Arket bak vinduet: samme flate litt skjev, som gir dybde uten skygge */
.hf-ark {
	position: absolute;
	top: 5.2em;
	right: .7em;
	left: 1.4em;
	height: 25.6em;
	border-radius: 1.6em;
	background: #f1ebff;
	transform: rotate(-3deg);
}

.hf-vindu {
	position: absolute;
	top: 4.6em;
	right: 0;
	left: 0;
	display: flex;
	height: 26em;
	border: 1px solid var(--hf-linje);
	border-radius: 1.5em;
	background: #fff;
	overflow: hidden;
}

/* Menyen i appen, lukket: bare ikonene, Aktiviteter er valgt */
.hf-meny { display: flex; flex: none; flex-direction: column; align-items: center; gap: .45em; width: 3.6em; padding: 1.1em 0; border-right: 1px solid var(--hf-linje); background: #fbfaff; }
.hf-meny img { width: 2.1em; height: auto; margin-bottom: .5em; }
.hf-meny-ikon { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .65em; color: #a19db5; font-size: .95em; }
.hf-meny-ikon.er-aktiv { background: #f1ebff; color: #6d28d9; }
.hf-meny-skille { width: 1.4em; height: 1px; margin: .15em 0; background: var(--hf-linje); }

.hf-flate { flex: 1; min-width: 0; padding: 1.1em 1.2em 0; }
.hf-vindu-topp { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .8em; }
.hf-vindu-tittel { font-size: 1.35em; font-weight: 800; }
.hf-laget { display: flex; }
.hf-laget .hf-mini { width: 2.3em; height: 2.3em; margin-left: -.55em; }

/* Fanene som i Aktiviteter */
.hf-faner { display: flex; gap: 1.3em; margin-bottom: .4em; border-bottom: 1px solid var(--hf-linje); }
.hf-faner span { margin-bottom: -1px; padding-bottom: .6em; border-bottom: 2px solid transparent; color: var(--hf-gra); font-size: .8em; font-weight: 700; }
.hf-faner .er-aktiv { border-color: #6712fb; color: var(--hf-blekk); }

/* Datogruppene og oppgavene, med appens statusfarger */
.hf-tabell { display: grid; grid-template-columns: minmax(0, 1fr) 4.4em 8.6em; align-items: center; }
.hf-gruppe { padding: .9em 0 .45em; color: var(--gruppe); font-size: .82em; font-weight: 800; }
.hf-tabell-hode { padding: .9em 0 .45em; color: var(--hf-gra); font-size: .68em; font-weight: 800; text-align: center; }
.hf-oppgave,
.hf-hvem,
.hf-status { display: flex; align-items: center; min-height: 2.9em; border-top: 1px solid #f1eef8; }
.hf-oppgave { padding-right: .6em; font-size: .86em; font-weight: 700; }
.hf-hvem { justify-content: center; }
.hf-hvem .hf-mini { width: 1.9em; height: 1.9em; border: 0; }
/* Helten og en av oss, som overlapper litt: AI og mennesker på samme oppgave */
.hf-hvem .hf-mini + .hf-mini { margin-left: -.5em; border: .14em solid #fff; }

.hf-status { display: grid; padding: .35em 0 .35em .3em; }
.hf-s { grid-area: 1 / 1; padding: .48em .3em; border-radius: .5em; color: #fff; font-size: .7em; font-style: normal; font-weight: 800; text-align: center; white-space: nowrap; opacity: 0; }
.hf-s--tom,
.hf-s--plan { background: #797e93; }
.hf-s--jobber { background: #ff8358; }
.hf-s--klar { background: #216edf; }
.hf-s--live,
.hf-s--fast { background: #33d391; }
/* Sluttbildet: det som er utført, og det som er planlagt */
.hf-s--live,
.hf-s--fast,
.hf-s--plan { opacity: 1; }

/* Kortene som svever ved pekerne: Astrid tar oppgaven, kunden godkjenner.
   Store og tydelige, med en bildeflis, to linjer tekst og status eller knapp. */
.hf-pille {
	position: absolute;
	top: 20.6em;
	right: .9em;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .85em;
	width: 26em;
	padding: .65em .75em .65em .65em;
	border: 2px solid #f6b48f;
	border-radius: 1.4em;
	background: #fff;
}

.hf-pille-bilde { display: grid; flex: none; place-items: end center; width: 4.4em; height: 4.4em; border-radius: 1em; background: var(--bg, #f1ebff); overflow: hidden; }
.hf-pille-bilde img { width: 92%; height: auto; margin-bottom: -.2em; }
.hf-pille-bilde--foto img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 22%; }
.hf-pille-tekst { display: grid; flex: 1; min-width: 0; gap: .1em; }
.hf-pille-tekst small { color: var(--hf-gra); font-size: .8em; font-weight: 700; }
.hf-pille-tekst b { font-size: 1.12em; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.hf-pille-status { display: inline-flex; flex: none; align-items: center; gap: .22em; padding: .75em 1em; border-radius: .8em; background: #ff8358; color: #fff; font-size: .86em; font-style: normal; font-weight: 800; }
.hf-pille-status i { width: .32em; height: .32em; border-radius: 50%; background: currentColor; }
.hf-pille-status i:last-of-type { margin-right: .35em; }
.hf-pille--astrid { opacity: 0; }

.hf-pille--kunde { border-color: #b79cff; }
.hf-godkjenn { position: relative; display: grid !important; padding: 0 !important; background: none !important; }

/* Splashen når kunden trykker Godkjenn: en ring og ti streker ut fra knappen */
.hf-splash { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.hf-splash b { position: absolute; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border: .2em solid #6712fb; border-radius: 50%; opacity: 0; }
.hf-splash i { position: absolute; top: -.14em; left: 0; width: 1.4em; height: .28em; border-radius: 1em; background: #6712fb; opacity: 0; transform: rotate(var(--a)) translateX(1.6em); transform-origin: left center; }
.hf-splash i:nth-child(5n+2) { background: #10b981; }
.hf-splash i:nth-child(5n+3) { background: #f59e0b; }
.hf-splash i:nth-child(5n+4) { background: #ec4899; }
.hf-splash i:nth-child(5n+5) { background: #3b82f6; }
.hf-godkjenn { flex: none; font-size: .95em; font-style: normal; font-weight: 800; }
.hf-godkjenn > span { display: inline-flex; grid-area: 1 / 1; align-items: center; justify-content: center; gap: .4em; padding: .8em 1.15em; border-radius: .85em; }
.hf-godkjenn-for { background: #6712fb; color: #fff; opacity: 0; }
.hf-godkjenn-etter { background: #33d391; color: #fff; }

/* ---------- 3 Astrid jobber ---------- */

.hf-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	width: 64%;
	padding: 1.3em;
	border-left: 1px solid var(--hf-linje);
	background: #fbfaff;
	transform: translateX(104%);
}

/* Skeleton mens panelet lastes: flater i samme form som innholdet, som pulserer */
.hf-skjelett { position: absolute; inset: 1.3em; display: grid; align-content: start; gap: .9em; opacity: 0; }
.hf-skjelett i { display: block; border-radius: .5em; background: #e2daf6; }
.hf-skjelett-topp { display: flex; align-items: center; gap: .65em; }
.hf-skjelett-topp > i { width: 2.7em; height: 2.7em; border-radius: 50%; }
.hf-skjelett-topp > span { display: grid; flex: 1; gap: .4em; }
.hf-skjelett-topp > span i { height: .8em; }
.hf-skjelett-topp > span i:last-child { width: 60%; }
.hf-skjelett-linje { width: 45%; height: .75em; }
.hf-skjelett-linje--kort { width: 62%; }
.hf-skjelett-annonser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.hf-skjelett-annonser i { aspect-ratio: 3 / 4; border-radius: .8em; }
.hf-skjelett-formater { display: flex; align-items: flex-end; gap: .45em; height: 3.4em; }
.hf-skjelett-formater i { width: 3em; height: 2.6em; }
.hf-skjelett-formater i:nth-child(2) { width: 2em; height: 3.4em; }
.hf-skjelett-formater i:nth-child(3) { width: 5em; }

.hf-panel-topp { display: flex; align-items: center; gap: .65em; margin-bottom: 1.1em; }
.hf-panel-topp .hf-mini { width: 2.7em; height: 2.7em; border: 0; }
.hf-panel-topp span { display: grid; color: var(--hf-gra); font-size: .82em; font-weight: 700; }
.hf-panel-topp b { color: var(--hf-blekk); font-size: 1.15em; font-weight: 800; }

.hf-panel-steg { display: flex; align-items: center; gap: .5em; margin: 0 0 .6em; font-size: .85em; font-weight: 800; }
.hf-panel-steg i { width: .6em; height: .6em; border-radius: 50%; background: #f97316; }
.hf-panel-steg--2 { margin-top: 1.1em; }

.hf-annonser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.hf-annonse { position: relative; aspect-ratio: 3 / 4; border-radius: .8em; background: #ece8f6; overflow: hidden; }
.hf-annonse img { width: 100%; height: 100%; object-fit: cover; }
.hf-annonse--0 img { object-position: 50% 20%; }
.hf-annonse--1 img { object-position: 85% 60%; }
.hf-annonse--2 img { object-position: 20% 45%; }
.hf-annonse b { position: absolute; right: .4em; bottom: .4em; left: .4em; padding: .35em .45em; border-radius: .45em; background: rgba(10, 15, 31, .62); color: #fff; font-size: .62em; font-weight: 800; line-height: 1.2; }

.hf-formater { display: flex; align-items: flex-end; gap: .45em; height: 3.4em; }
.hf-formater span { border-radius: .45em; background: #d8ccfb; transform-origin: bottom; }
.hf-formater span:nth-child(1) { width: 2.8em; height: 2.8em; }
.hf-formater span:nth-child(2) { width: 1.9em; height: 3.4em; }
.hf-formater span:nth-child(3) { width: 5em; height: 2.6em; }
.hf-formater span:nth-child(4) { width: 2.2em; height: 2.2em; }

.hf-panel-klar { display: inline-flex; align-items: center; gap: .45em; margin-top: 1.1em; padding: .45em .85em; border-radius: 999px; background: #d3f2e2; color: #0a7444; font-size: .82em; font-weight: 800; }

/* ---------- Pekerne og toasten ---------- */

.hf-peker { position: absolute; z-index: 6; display: flex; align-items: flex-start; gap: .1em; opacity: 0; pointer-events: none; }
.hf-peker svg { width: 1.7em; height: 1.7em; fill: var(--farge); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.hf-peker b { margin-top: 1.1em; padding: .25em .6em; border-radius: 999px; background: var(--farge); color: #fff; font-size: .72em; font-weight: 800; }
.hf-peker--felix { --farge: #3a9a0d; top: 62%; left: 14%; }
.hf-peker--kunde { --farge: #6712fb; top: 80%; left: 70%; }

.hf-toast {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: .7em;
	margin: 0;
	padding: .6em 1.1em .6em .6em;
	border: 1.5px solid #a7e3c4;
	border-radius: 1.2em;
	background: #fff;
	white-space: nowrap;
	transform: translateX(-50%);
}

.hf-toast-hake { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #10b981; color: #fff; }
.hf-toast > span:last-child { display: grid; color: var(--hf-gra); font-size: .82em; font-weight: 700; }
.hf-toast b { color: var(--hf-blekk); font-size: 1.12em; font-weight: 800; }
.hf-teller { display: inline-grid; color: #0a7444; font-weight: 800; }
.hf-teller span { grid-area: 1 / 1; }
.hf-teller span:first-child { opacity: 0; }

/* ---------- Tidslinjen ---------- */

@media (prefers-reduced-motion: no-preference) {
	.hf-scene * { animation-duration: var(--hf-t); animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
	.hf.er-av .hf-scene * { animation-play-state: paused; }

	.hf-kort--felix { animation-name: hf-kort-felix; }
	.hf-kort--astrid { animation-name: hf-kort-astrid; }
	.hf-kort--kunde { animation-name: hf-kort-kunde; }
	.hf-skriv-tekst > span { animation-name: hf-skriv; }
	.hf-send { animation-name: hf-send; }

	.hf-vindu { animation-name: hf-vindu; }
	.hf-ark { animation-name: hf-ark; }
	.hf-peker--felix { animation-name: hf-peker-felix; }
	.hf-pille--astrid { animation-name: hf-pille-astrid; }
	.hf-pille-status i { animation: hf-puls 1.1s ease-in-out infinite; }
	.hf-pille-status i:nth-of-type(2) { animation-delay: .18s; }
	.hf-pille-status i:nth-of-type(3) { animation-delay: .36s; }

	.hf-status--0 .hf-s--tom { animation-name: hf-r0-tom; }
	.hf-status--0 .hf-s--jobber { animation-name: hf-r0-jobber; }
	.hf-status--0 .hf-s--klar { animation-name: hf-r0-klar; }
	.hf-status--0 .hf-s--live { animation-name: hf-r0-live; }
	.hf-status--1 .hf-s--tom { animation-name: hf-r1-tom; }
	.hf-status--1 .hf-s--jobber { animation-name: hf-r1-jobber; }
	.hf-status--1 .hf-s--klar { animation-name: hf-r1-klar; }
	.hf-status--1 .hf-s--live { animation-name: hf-r1-live; }

	.hf-panel { animation-name: hf-panel; }
	/* Dashbordet bak blir svakere mens panelet står ute, så panelet er det man ser */
	.hf-meny,
	.hf-flate { animation-name: hf-bak; }
	.hf-skjelett { animation-name: hf-skjelett; }
	.hf-skjelett i { animation: hf-skjelett-puls 1.2s ease-in-out infinite; }
	.hf-panel-innhold { animation-name: hf-panel-innhold; }
	.hf-panel-steg i { animation: hf-puls 1.1s ease-in-out infinite; }
	.hf-annonse--0 :is(img, b) { animation-name: hf-annonse-0; }
	.hf-annonse--1 :is(img, b) { animation-name: hf-annonse-1; }
	.hf-annonse--2 :is(img, b) { animation-name: hf-annonse-2; }
	.hf-panel-steg--2,
	.hf-formater { animation-name: hf-steg2; }
	.hf-formater span:nth-child(1) { animation-name: hf-format-1; }
	.hf-formater span:nth-child(2) { animation-name: hf-format-2; }
	.hf-formater span:nth-child(3) { animation-name: hf-format-3; }
	.hf-formater span:nth-child(4) { animation-name: hf-format-4; }
	.hf-panel-klar { animation-name: hf-klar; }

	.hf-pille--kunde { animation-name: hf-pille-kunde; }
	.hf-peker--kunde { animation-name: hf-peker-kunde; }
	.hf-godkjenn { animation-name: hf-trykk; }
	.hf-godkjenn-for { animation-name: hf-for; }
	.hf-godkjenn-etter { animation-name: hf-etter; }
	.hf-splash b { animation-name: hf-splash-ring; }
	.hf-splash i { animation-name: hf-splash-strek; }

	.hf-toast { animation-name: hf-toast; }
	.hf-teller span:first-child { animation-name: hf-teller-1; }
	.hf-teller span:last-child { animation-name: hf-teller-2; }
}

/* 1 Kortene */
@keyframes hf-kort-felix {
	0% { opacity: 0; transform: translate(0, 1.5em) rotate(0) scale(.92); }
	6%, 21% { opacity: 1; transform: translate(-7.4em, .8em) rotate(-8deg); }
	26%, 100% { opacity: 0; transform: translate(-9em, -1em) rotate(-12deg) scale(.86); }
}
@keyframes hf-kort-astrid {
	0% { opacity: 0; transform: translate(0, 1.5em) rotate(0) scale(.92); }
	6%, 21% { opacity: 1; transform: translate(7.4em, .8em) rotate(8deg); }
	26%, 100% { opacity: 0; transform: translate(9em, -1em) rotate(12deg) scale(.86); }
}
@keyframes hf-kort-kunde {
	0% { opacity: 0; transform: translateY(1.5em) scale(.92); }
	5%, 21% { opacity: 1; transform: none; }
	26%, 100% { opacity: 0; transform: translateY(-1.5em) scale(.88); }
}
@keyframes hf-skriv {
	0% { clip-path: inset(0 100% 0 0); }
	7% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(27, end); }
	17%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes hf-send {
	0%, 17.5% { background: #c9bdf0; transform: none; }
	18.5% { background: #6712fb; transform: scale(.84); }
	20%, 100% { background: #6712fb; transform: none; }
}

/* 2 Planen */
@keyframes hf-vindu {
	0%, 22% { opacity: 0; transform: translateY(2em) scale(.96); }
	28%, 96% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(-.8em); }
}
@keyframes hf-ark {
	0%, 23% { opacity: 0; transform: translateY(2em) scale(.96); }
	30%, 96% { opacity: 1; transform: rotate(-3deg); }
	100% { opacity: 0; transform: translateY(-.8em) rotate(-3deg); }
}
@keyframes hf-peker-felix {
	0%, 29% { opacity: 0; top: 62%; left: 14%; }
	30.5% { opacity: 1; top: 62%; left: 14%; }
	36% { opacity: 1; top: 40.6%; left: 84.3%; }
	37.5%, 100% { opacity: 0; top: 40.6%; left: 84.3%; }
}
@keyframes hf-pille-astrid {
	0%, 36% { opacity: 0; transform: translateY(.8em) scale(.9); }
	38%, 48% { opacity: 1; transform: none; }
	51%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes hf-puls { 50% { opacity: .35; } }

/* Statusene: rad 0 (Astrid) og rad 1 (Herman), som følger hverandre litt forskjøvet */
@keyframes hf-r0-tom { 0%, 36% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes hf-r0-jobber { 0%, 36% { opacity: 0; } 37%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes hf-r0-klar { 0%, 73% { opacity: 0; } 74%, 85.6% { opacity: 1; } 86.4%, 100% { opacity: 0; } }
@keyframes hf-r0-live { 0%, 85.6% { opacity: 0; } 86.4%, 100% { opacity: 1; } }
@keyframes hf-r1-tom { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes hf-r1-jobber { 0%, 40% { opacity: 0; } 41%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hf-r1-klar { 0%, 75% { opacity: 0; } 76%, 89% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes hf-r1-live { 0%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } }

/* 3 Astrid jobber */
@keyframes hf-panel {
	0%, 49% { transform: translateX(104%); }
	52.5%, 75.5% { transform: none; }
	78.5%, 100% { transform: translateX(104%); }
}
@keyframes hf-bak {
	0%, 49% { opacity: 1; }
	52.5%, 75.5% { opacity: .35; }
	78.5%, 100% { opacity: 1; }
}
@keyframes hf-skjelett { 0%, 56.5% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hf-skjelett-puls { 50% { opacity: .55; } }
@keyframes hf-panel-innhold { 0%, 57.5% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes hf-annonse-0 { 0%, 59% { opacity: 0; } 60.5%, 100% { opacity: 1; } }
@keyframes hf-annonse-1 { 0%, 60.5% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes hf-annonse-2 { 0%, 62.5% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes hf-steg2 { 0%, 64% { opacity: 0; } 65.5%, 100% { opacity: 1; } }
@keyframes hf-format-1 { 0%, 66% { opacity: .35; transform: scaleY(.4); } 67.5%, 100% { opacity: 1; transform: none; } }
@keyframes hf-format-2 { 0%, 67% { opacity: .35; transform: scaleY(.4); } 68.5%, 100% { opacity: 1; transform: none; } }
@keyframes hf-format-3 { 0%, 68% { opacity: .35; transform: scaleY(.4); } 69.5%, 100% { opacity: 1; transform: none; } }
@keyframes hf-format-4 { 0%, 69% { opacity: .35; transform: scaleY(.4); } 70.5%, 100% { opacity: 1; transform: none; } }
@keyframes hf-klar { 0%, 71% { opacity: 0; transform: translateY(.4em); } 72.5%, 100% { opacity: 1; transform: none; } }

/* 4 Kunden godkjenner */
@keyframes hf-pille-kunde {
	0%, 79% { opacity: 0; transform: translateY(.8em) scale(.9); }
	81%, 96% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}
@keyframes hf-peker-kunde {
	0%, 81.5% { opacity: 0; top: 80%; left: 70%; }
	82.5% { opacity: 1; top: 80%; left: 70%; }
	85.2% { opacity: 1; top: 66.6%; left: 85.1%; }
	88%, 100% { opacity: 0; top: 66.6%; left: 85.1%; }
}
@keyframes hf-trykk { 0%, 85.2% { transform: none; } 85.8% { transform: scale(.9); } 86.6%, 100% { transform: none; } }
@keyframes hf-for { 0%, 85.8% { opacity: 1; } 86.4%, 100% { opacity: 0; } }
@keyframes hf-etter { 0%, 85.8% { opacity: 0; } 86.4%, 100% { opacity: 1; } }
@keyframes hf-splash-ring {
	0%, 86% { opacity: 0; transform: scale(.4); }
	86.6% { opacity: .9; transform: scale(.7); }
	90.5%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes hf-splash-strek {
	0%, 86% { opacity: 0; transform: rotate(var(--a)) translateX(.8em) scaleX(.3); }
	86.6% { opacity: 1; transform: rotate(var(--a)) translateX(1.7em) scaleX(1); }
	88% { opacity: 1; transform: rotate(var(--a)) translateX(2.8em) scaleX(.8); }
	90.5%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(3.8em) scaleX(.3); }
}
@keyframes hf-toast {
	0%, 87% { opacity: 0; transform: translate(-50%, -1em); }
	89%, 96% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes hf-teller-1 { 0%, 91% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-.6em); } }
@keyframes hf-teller-2 { 0%, 91% { opacity: 0; transform: translateY(.6em); } 92%, 100% { opacity: 1; transform: none; } }

/* PC: toppen står innenfor kantene til headeren (.tp-rad i assets/topp/topp.css):
   samme bredde og samme luft inn til logoen, så teksten starter under
   logoen, og vinduet i filmen går helt ut til høyre kant av headeren.
   Filmen får litt mer av bredden enn teksten. */
@media (min-width: 960px) {
	.pf-hero-v2:has(.hf) .hv2-rad-ytre {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: clamp(20px, 2.4vw, 40px);
		width: calc(100% - 20px);
		max-width: 1280px;
		padding-inline: 14px 0;
	}
	.hf { max-width: none; }
}

@media (min-width: 1100px) {
	.pf-hero-v2:has(.hf) .hv2-rad-ytre { width: calc(100% - 28px); padding-inline: 22px 0; }
}

/* Første skjerm er toppen og kundelogoene, akkurat: toppen fyller skjermen
   minus logostripen, med innholdet midt i høyden, så logoene står nederst på
   skjermen og neste seksjon begynner under. hero-v2.js måler logostripen og
   setter --hv2-logoer (170 px er den vanlige høyden). Aldri høyere enn
   980 px på svært høye skjermer. */
@media (min-width: 960px) {
	.pf-hero-v2:has(.hf) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: min(calc(100svh - var(--hv2-logoer, 170px)), 980px);
	}
	.pf-hero-v2:has(.hf) .hv2-rad-ytre { margin-inline: auto; }
}

/* Mobil: filmen går ut til kantene, så den blir så stor som mulig */
@media (max-width: 640px) {
	.hf { width: calc(100% + 24px); max-width: none; margin: 8px -12px 0; }
}