/*
 * Felix fordeler jobben (template-parts/sections/plattform/flyt.php).
 *
 * Teamdiagrammet er det samme som på /vekstplan/ (assets/vekstplan/vekstplan.css):
 * et rom på 1100 × 400 der 1em er 1/70 av bredden, så alt inni skaleres
 * sammen. Tilstanden til hvert kort står i data-tilstand: venter, jobber,
 * ferdig eller snart. Under 760 px blir diagrammet en liste.
 */

.pf-flyt { overflow: clip; }

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

.fl-hode { max-width: 1000px; }
:root body .pf-flyt h2.fl-h2 { --hh-fs: clamp(3rem, 1.6rem + 5.4vw, 6.5rem); --hh-lh: 1; }

.fl-under {
	max-width: 21em;
	margin: 22px auto 0;
	font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--pf-tekst);
	text-wrap: balance;
}

.fl-ansikter { display: inline-flex; margin: 0 .2em 0 .35em; vertical-align: -.28em; }

.fl-ansikter > * {
	width: 1.35em;
	height: 1.35em;
	margin-left: -.32em;
	border: 2px solid #fff;
	overflow: hidden;
}

.fl-ansikter > :first-child { margin-left: 0; }
.fl-ansikter--folk > img { border-radius: 50%; object-fit: cover; }
.fl-ansikter--helter > span { display: grid; place-items: center; border-radius: .38em; background: var(--flate); }
.fl-ansikter--helter img { width: 86%; height: auto; }

.fl-knapp { gap: 8px; margin-top: 30px; }

/* ---------- Rommet ---------- */

.fl-figur { margin-top: clamp(-24px, -2vw, -8px); container-type: inline-size; }

.fl-bane {
	--fl-linje: #e8e8ee;
	--fl-flate: #f4f4f7;
	position: relative;
	width: 100%;
	aspect-ratio: 1100 / 400;
	font-size: calc(100cqw / 70);
}

/* Linjene: prikkete mens helten venter, farget og i bevegelse mens den jobber */
.fl-linjer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .4s ease; }
.fl-linje-spor { fill: none; stroke: #d6d8e1; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .2 2.6; transition: stroke .5s ease, stroke-dasharray .5s ease; }
.fl-linje-flyt { fill: none; stroke: var(--farge); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 9; opacity: 0; transition: opacity .4s ease; }
.fl-linje.er-jobber .fl-linje-spor { stroke: color-mix(in srgb, var(--farge) 28%, transparent); stroke-dasharray: none; }
.fl-linje.er-jobber .fl-linje-flyt { opacity: 1; animation: fl-flyt .9s linear infinite; }
.fl-linje.er-ferdig .fl-linje-spor { stroke: color-mix(in srgb, var(--farge) 55%, transparent); stroke-dasharray: none; }
.fl-linje.er-snart .fl-linje-spor { stroke: #e4e5ec; }

@keyframes fl-flyt { to { stroke-dashoffset: -16; } }

.fl-prikk { opacity: 0; }
.fl-prikk--ut { fill: var(--farge); }
.fl-prikk--inn { fill: #10b981; stroke: #fff; stroke-width: 2; }
.fl-linje.er-jobber .fl-prikk--ut { opacity: 1; }
.fl-linje.er-retur .fl-prikk--inn { opacity: 1; }

/* Felix i midten */
.fl-midt {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 16em;
	translate: -50% -50%;
	transition: scale .8s cubic-bezier(.34, 1.56, .64, 1);
}

.fl-sol {
	position: absolute;
	top: 36%;
	left: 50%;
	z-index: -1;
	width: 19em;
	height: 19em;
	border-radius: 50%;
	background: radial-gradient(circle, var(--flate) 0%, color-mix(in oklab, var(--flate) 55%, transparent) 55%, transparent 70%);
	translate: -50% -50%;
}

.fl-midt::before,
.fl-midt::after {
	content: '';
	position: absolute;
	top: 36%;
	left: 50%;
	z-index: -1;
	width: 12em;
	height: 12em;
	border: .1em solid color-mix(in oklab, var(--aksent) 45%, transparent);
	border-radius: 50%;
	opacity: 0;
	translate: -50% -50%;
	animation: fl-radar 3.2s ease-out infinite;
}

.fl-midt::after { animation-delay: 1.6s; }

@keyframes fl-radar { 0% { opacity: .8; scale: .7; } 100% { opacity: 0; scale: 1.9; } }

.fl-midt img { width: 9.5em; height: auto; animation: fl-sveve-stor 5s ease-in-out infinite; }
.fl-midt b { margin-top: .2em; font-size: 1.55em; font-weight: 800; line-height: 1.2; color: var(--pf-blekk); }
.fl-midt > span:last-child { font-size: .9em; color: var(--pf-gra); }

@keyframes fl-sveve-stor { 50% { transform: translateY(-.5em); } }
@keyframes fl-sveve { 50% { transform: translateY(-.18em); } }

.fl-boble {
	position: absolute;
	top: 75%;
	left: 50%;
	z-index: 3;
	width: 25em;
	margin: 0;
	padding: .85em 1.2em;
	border: 1px solid var(--fl-linje);
	border-radius: 1.1em;
	background: #fff;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	color: var(--pf-tekst);
	translate: -50% 0;
}

.fl-boble::before {
	content: '';
	position: absolute;
	top: -.45em;
	left: 50%;
	width: .9em;
	height: .9em;
	border-top: 1px solid var(--fl-linje);
	border-left: 1px solid var(--fl-linje);
	background: inherit;
	rotate: 45deg;
	translate: -50% 0;
}

.fl-boble span { display: block; }
.fl-boble span.er-ny { animation: fl-opp .45s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes fl-opp { from { opacity: 0; transform: translateY(.5em); } }

/* Kortene rundt Felix */
.fl-noder { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.fl-node {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: grid;
	grid-template-columns: 3.4em minmax(0, 1fr);
	align-items: center;
	gap: .75em;
	width: 17em;
	padding: .75em .9em 1em .75em;
	border: 1px solid var(--fl-linje);
	border-radius: 1.1em;
	background: #fff;
	text-align: left;
	translate: -50% -50%;
	transition: border-color .4s ease, opacity .5s ease, left .8s cubic-bezier(.2, .7, .2, 1), top .8s cubic-bezier(.2, .7, .2, 1), scale .8s cubic-bezier(.2, .7, .2, 1);
}

.fl-node-maskot {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.4em;
	height: 3.4em;
	border-radius: .85em;
	background: var(--flate);
	overflow: hidden;
}

.fl-node-maskot img { width: 84%; height: auto; animation: fl-sveve 4.2s ease-in-out infinite; }

/* Teamet: tre ansikter ved siden av hverandre, litt over hverandre, i en
   flis som er bredere enn heltenes */
.fl-node[data-fl-helt="teamet"] { grid-template-columns: 4.1em minmax(0, 1fr); }
.fl-node[data-fl-helt="teamet"] .fl-node-maskot { display: flex; align-items: center; justify-content: center; width: 4.1em; }
.fl-node-maskot .fl-node-ansikt { position: relative; flex: none; width: 1.7em; height: 1.7em; border: .1em solid #fff; border-radius: 50%; object-fit: cover; animation: none; }
.fl-node-ansikt + .fl-node-ansikt { margin-left: -.75em; }

.fl-node-tekst { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.fl-node-topp { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.fl-node-topp b { font-size: 1.12em; font-weight: 800; line-height: 1.25; color: var(--pf-blekk); }
.fl-node-oppgave { font-size: .84em; line-height: 1.35; color: var(--pf-gra); }
.fl-node-oppgave.er-ny { animation: fl-opp .4s cubic-bezier(.2, .7, .2, 1) both; }

.fl-node-status {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	flex: none;
	padding: .28em .62em;
	border-radius: 999px;
	background: var(--fl-flate);
	font-size: .68em;
	font-weight: 700;
	line-height: 1;
	color: var(--pf-gra);
	white-space: nowrap;
}

.fl-node[data-tilstand="jobber"] .fl-node-status { background: color-mix(in srgb, var(--aksent) 12%, #fff); color: var(--aksent); }
.fl-node[data-tilstand="jobber"] .fl-node-status::before { content: ''; width: .55em; height: .55em; border: .14em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fl-snurr .8s linear infinite; }
.fl-node[data-tilstand="ferdig"] .fl-node-status { background: #ecfdf5; color: #047857; }
.fl-node[data-tilstand="ferdig"] .fl-node-status::before { content: ''; width: .6em; height: .32em; border-bottom: .15em solid currentColor; border-left: .15em solid currentColor; rotate: -45deg; translate: 0 -.08em; }

@keyframes fl-snurr { to { rotate: 360deg; } }

.fl-node-fremdrift {
	position: absolute;
	right: .9em;
	bottom: .5em;
	left: .9em;
	height: .2em;
	border-radius: 999px;
	background: var(--fl-flate);
	overflow: hidden;
}

.fl-node-fremdrift i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--aksent); transition: width .9s cubic-bezier(.2, .7, .2, 1), background-color .4s ease; }
.fl-node[data-tilstand="ferdig"] .fl-node-fremdrift i { background: #10b981; }

.fl-node[data-tilstand="venter"] { opacity: .6; }
.fl-node[data-tilstand="snart"] { opacity: .5; }
.fl-node:is([data-tilstand="venter"], [data-tilstand="snart"]) .fl-node-maskot img { filter: grayscale(.5); }
.fl-node[data-tilstand="jobber"] { border-color: color-mix(in srgb, var(--aksent) 45%, transparent); }
.fl-node[data-tilstand="jobber"] .fl-node-maskot img:not(.fl-node-ansikt) { animation: fl-jobb 1.1s ease-in-out infinite; }
.fl-node[data-tilstand="ferdig"] { border-color: #a7f3d0; animation: fl-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes fl-jobb { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-.16em) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes fl-pop { 40% { scale: 1.05; } }

/* Alle er ferdige: heltene samles hos Felix, og Felix blir litt større */
.fl-bane.er-samlet .fl-node { top: 50%; left: 50%; scale: .3; opacity: 0; transition-delay: calc(var(--i) * .06s); }
.fl-bane.er-samlet .fl-linjer { opacity: 0; }
.fl-bane.er-samlet .fl-midt { scale: 1.12; }

/* ---------- Mobil: Felix øverst og kortene som en liste ---------- */

@media (max-width: 759px) {
	.fl-ansikter { vertical-align: -.32em; }
	.fl-figur { margin-top: 0; container-type: normal; }
	.fl-bane { display: grid; gap: 10px; aspect-ratio: auto; font-size: 15px; }
	.fl-linjer, .fl-sol, .fl-midt::before, .fl-midt::after { display: none; }
	.fl-midt { position: static; flex-direction: row; gap: 12px; width: auto; translate: none; }
	.fl-midt img { width: 64px; }
	.fl-midt b { margin: 0; font-size: 18px; }
	.fl-boble { position: static; width: auto; translate: none; text-align: left; font-size: 15px; }
	.fl-boble::before { left: 32px; }
	.fl-noder { position: static; display: grid; gap: 8px; }
	.fl-node { position: relative; top: auto; left: auto; width: auto; translate: none; }
	.fl-bane.er-samlet .fl-node { top: auto; left: auto; scale: .97; opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
	.pf-flyt *,
	.pf-flyt *::before,
	.pf-flyt *::after { animation: none !important; transition-duration: .01s !important; }
	.fl-linje-flyt, .fl-prikk { display: none; }
}