/*
 * Filmene fra appen på /plattform/resultater/ og /plattform/vekstplan/
 * (template-parts/sections/integrasjon/film-res-*.php og film-vp-*.php):
 *
 *   .af-vekst    salget, annonsetallene, årsmålet og trenden, 12 s
 *   .af-effekt   dagene til første vurdering, dommen og målepunktene, 12 s
 *   .af-brief    ukesbriefen kommer inn linje for linje, 12 s
 *   .af-plan     delene i vekstplanen blir ferdige, godkjennes og sendes, 12 s
 *   .af-anslag   lav, middels og høy vokser fram, 12 s
 *   .af-tiltak   hypotese, startmåling, vurdering og stoppregel, og fokuset, 12 s
 *
 * Vinduet lånes fra CRM-filmene (crm-filmer.css). Filmene får klassen er-paa
 * når de synes (assets/plattform/integrasjoner.js). Uten bevegelse, eller før
 * de synes, står sluttbildet. Flate farger, ingen skygger og ingen gradienter.
 */

/* ---------- Felles ---------- */

.af-vindu { overflow: hidden; border: 1px solid #ebe8f4; border-radius: 26px; background: #fff; }
.af-innhold { display: grid; gap: 16px; margin: 0; padding: 20px 22px 22px; list-style: none; }
.af-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #f3f1fa; color: #4a4a62; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.af-chip--gronn { background: #dcfce7; color: #15803d; }
.af-chip--lilla { background: #f3efff; color: #6d28d9; }
.af-avatar { display: grid; flex: none; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 9px; background: var(--flate, #f3efff); }
.af-avatar img { width: 120%; max-width: none; height: auto; transform: translateY(8%); }
.af-tid { margin-left: auto; color: var(--pf-gra); font-size: 12px; font-weight: 600; }
.af-sporsmal { margin: 0; color: var(--pf-blekk); font-size: 15px; font-weight: 800; }
.af-opp { color: #059669; }
.af-spor { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 999px; background: #f1eefb; }
.af-spor--liten { height: 6px; margin-top: 8px; }
.af-fyll { position: absolute; inset: 0 auto 0 0; width: var(--bredde); border-radius: inherit; background: #6712fb; }

.int-filmdelt--res-effekt,
.int-filmdelt--vp-anslag { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.int-filmdelt--res-effekt .int-filmdelt-scene,
.int-filmdelt--vp-anslag .int-filmdelt-scene { order: 2; }

/* ---------- Resultater: vekst ---------- */

.af-fliser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-flis { display: grid; gap: 3px; padding: 14px; border: 1px solid #f0edf7; border-radius: 16px; background: #fbfaff; }
.af-flis small { color: var(--pf-gra); font-size: 12px; font-weight: 600; }
.af-flis b { color: var(--pf-blekk); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.af-flis em { color: var(--pf-gra); font-size: 12px; font-style: normal; font-weight: 600; }
.af-flis em.af-opp { color: #059669; }
.af-maal { display: grid; gap: 8px; }
.af-maal-tekst { display: flex; justify-content: space-between; margin: 0; color: var(--pf-gra); font-size: 13px; }
.af-maal-tekst b { color: var(--pf-blekk); font-variant-numeric: tabular-nums; }
.af-planstrek { position: absolute; top: -3px; bottom: -3px; left: var(--plan); width: 2px; background: #1d1d26; }
.af-maal .af-spor { overflow: visible; }
.af-maal-status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--pf-gra); font-size: 12.5px; }
.af-maal-status .af-chip { margin-left: 0; }
.af-graf { display: block; width: 100%; height: 64px; }
.af-graf path { fill: none; stroke: #6712fb; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }

/* ---------- Resultater: effekten ---------- */

.af-endring { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fbfaff; }
.af-endring small { color: var(--pf-gra); font-size: 11.5px; }
.af-endring b { color: var(--pf-blekk); font-size: 15px; font-weight: 800; }
.af-endring span { color: #6d28d9; font-size: 12.5px; font-weight: 600; }
.af-dager { display: grid; gap: 8px; }
.af-dager-tekst { position: relative; display: flex; align-items: center; min-height: 24px; margin: 0; }
.af-forelopig { color: var(--pf-gra); font-size: 12.5px; font-weight: 600; opacity: 0; }
.af-dom { position: absolute; left: 0; margin-left: 0; }
.af-dager-fyll { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: #10b981; }
.af-tall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-tall div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #f0edf7; border-radius: 14px; }
.af-tall small { color: var(--pf-gra); font-size: 11.5px; }
.af-tall b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.af-punkter { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.af-punkter li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; }
.af-punkter li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Resultater: ukesbriefen ---------- */

.af-brief-liste { gap: 10px; }
.af-brief-liste li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #f0edf7; border-radius: 14px; background: #fff; }
.af-brief-liste small { color: var(--pf-gra); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.af-brief-liste b { color: var(--pf-blekk); font-size: 14px; font-weight: 600; line-height: 1.4; }
.af-brief-liste .af-venter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: #ddd3fb; background: #f8f5ff; }
.af-brief-liste .af-venter small,
.af-brief-liste .af-venter b { grid-column: 1; }
.af-knapp { grid-row: 1 / span 2; grid-column: 2; padding: 7px 12px; border-radius: 999px; background: var(--knapp, #6712fb); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- Vekstplanen: planen blir til ---------- */

.af-plan-liste { gap: 8px; counter-reset: none; }
.af-plan-liste li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #f0edf7; border-radius: 14px; color: var(--pf-blekk); font-size: 14px; font-weight: 600; }
.af-status { position: relative; display: grid; flex: none; place-items: center; width: 26px; height: 26px; }
.af-status > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.af-status-venter { gap: 2px; grid-auto-flow: column; justify-content: center; background: #f3f1fa; opacity: 0; }
.af-status-venter i { width: 4px; height: 4px; border-radius: 50%; background: #a1a1b5; }
.af-status-ok { background: #dcfce7; color: #15803d; font-size: 14px; }
.af-plan-bunn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px 22px; }
.af-stempel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid #16a34a; border-radius: 10px; color: #16a34a; font-size: 13px; font-weight: 800; transform: rotate(-3deg); }
.af-sendt { margin-left: 0; }

/* ---------- Vekstplanen: anslagene ---------- */

.af-stolper { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.af-stolper li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: center; gap: 12px; color: var(--pf-blekk); font-size: 13.5px; font-weight: 700; }
.af-stolper .af-spor { height: 14px; }
.af-stolper li:nth-child(1) .af-fyll { background: #c4b5fd; }
.af-stolper li:nth-child(2) .af-fyll { background: #8b5cf6; }
.af-stolper b { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.af-aerlig { display: grid; gap: 2px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #fbfaff; color: var(--pf-gra); font-size: 13px; line-height: 1.45; }
.af-aerlig b { color: var(--pf-blekk); font-size: 13px; }

/* ---------- Vekstplanen: tiltaket ---------- */

.af-tiltak-navn { margin: 0; color: var(--pf-blekk); font-size: 17px; font-weight: 800; }
.af-felt { display: grid; gap: 8px; margin: 0; }
.af-felt div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border: 1px solid #f0edf7; border-radius: 12px; }
.af-felt dt { color: var(--pf-gra); font-size: 12px; font-weight: 700; }
.af-felt dd { margin: 0; color: var(--pf-blekk); font-size: 13px; line-height: 1.4; }
.af-fokus { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #f8f5ff; }
.af-fokus p { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--pf-gra); font-size: 12.5px; font-weight: 600; }
.af-fokus b { color: var(--pf-blekk); }

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

@media (prefers-reduced-motion: no-preference) {
	/* Vekst */
	.er-paa .af-flis:nth-child(1) { animation: af-inn-1 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-flis:nth-child(2) { animation: af-inn-2 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa.af-vekst .af-fyll { animation: af-fyll-30 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-planstrek { animation: af-inn-30 12s ease infinite both; }
	.er-paa .af-maal-status { animation: af-inn-45 12s ease infinite both; }
	.er-paa .af-graf path { animation: af-tegn 12s ease-in-out infinite both; }

	/* Effekten */
	.er-paa .af-dager-fyll { animation: af-dager 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-forelopig { animation: af-forelopig 12s ease infinite both; }
	.er-paa .af-dom { animation: af-pop-48 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-tall div { animation: af-inn-52 12s ease infinite both; }
	.er-paa .af-punkter li:nth-child(1) { animation: af-lys-50 12s ease infinite both; }
	.er-paa .af-punkter li:nth-child(2) { animation: af-lys-64 12s ease infinite both; }
	.er-paa .af-punkter li:nth-child(3) { animation: af-lys-78 12s ease infinite both; }

	/* Ukesbriefen */
	.er-paa .af-brief-liste li:nth-child(1) { animation: af-inn-1 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-brief-liste li:nth-child(2) { animation: af-inn-2 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-brief-liste li:nth-child(3) { animation: af-inn-3 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-brief-liste li:nth-child(4) { animation: af-inn-4 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-brief-liste .af-fyll { animation: af-fyll-30 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-knapp { animation: af-puls 1.6s ease-in-out 4s infinite; }

	/* Planen blir til */
	/* Hver del har sitt eget tidspunkt i den samme løkken, så de alltid blir ferdige i rekkefølge */
	.er-paa .af-plan-liste li:nth-child(1) .af-status-venter { animation: af-venter-1 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(1) .af-status-ok { animation: af-ok-1 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-plan-liste li:nth-child(1) { animation: af-rad-1 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(2) .af-status-venter { animation: af-venter-2 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(2) .af-status-ok { animation: af-ok-2 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-plan-liste li:nth-child(2) { animation: af-rad-2 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(3) .af-status-venter { animation: af-venter-3 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(3) .af-status-ok { animation: af-ok-3 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-plan-liste li:nth-child(3) { animation: af-rad-3 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(4) .af-status-venter { animation: af-venter-4 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(4) .af-status-ok { animation: af-ok-4 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-plan-liste li:nth-child(4) { animation: af-rad-4 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(5) .af-status-venter { animation: af-venter-5 12s ease infinite both; }
	.er-paa .af-plan-liste li:nth-child(5) .af-status-ok { animation: af-ok-5 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-plan-liste li:nth-child(5) { animation: af-rad-5 12s ease infinite both; }
	.er-paa .af-stempel { animation: af-stempel 12s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .af-sendt { animation: af-inn-80 12s ease infinite both; }

	/* Anslagene */
	.er-paa .af-stolper li:nth-child(1) .af-fyll { animation: af-stolpe-1 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-stolper li:nth-child(1) b { animation: af-inn-3 12s ease infinite both; }
	.er-paa .af-stolper li:nth-child(2) .af-fyll { animation: af-stolpe-2 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-stolper li:nth-child(2) b { animation: af-inn-4 12s ease infinite both; }
	.er-paa .af-stolper li:nth-child(3) .af-fyll { animation: af-stolpe-3 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .af-stolper li:nth-child(3) b { animation: af-inn-5 12s ease infinite both; }
	.er-paa .af-aerlig { animation: af-inn-52 12s ease infinite both; }

	/* Tiltaket */
	.er-paa .af-felt div:nth-child(1) { animation: af-inn-1 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-felt div:nth-child(2) { animation: af-inn-2 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-felt div:nth-child(3) { animation: af-inn-3 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-felt div:nth-child(4) { animation: af-inn-4 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .af-fokus { animation: af-inn-52 12s ease infinite both; }
	.er-paa .af-fokus .af-fyll { animation: af-fyll-70 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
}

/* Radene kommer inn en etter en på faste tidspunkter i løkken, så de holder rekkefølgen også når den starter på nytt */
@keyframes af-inn-1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 9%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-2 { 0%, 12% { opacity: 0; transform: translateY(8px); } 17%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-3 { 0%, 20% { opacity: 0; transform: translateY(8px); } 25%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-4 { 0%, 28% { opacity: 0; transform: translateY(8px); } 33%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-5 { 0%, 36% { opacity: 0; transform: translateY(8px); } 41%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-stolpe-1 { 0%, 8% { width: 0; } 26%, 94% { width: var(--bredde); } 100% { width: 0; } }
@keyframes af-stolpe-2 { 0%, 16% { width: 0; } 34%, 94% { width: var(--bredde); } 100% { width: 0; } }
@keyframes af-stolpe-3 { 0%, 24% { width: 0; } 42%, 94% { width: var(--bredde); } 100% { width: 0; } }
@keyframes af-inn-30 { 0%, 28% { opacity: 0; } 33%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-45 { 0%, 43% { opacity: 0; transform: translateY(6px); } 48%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-52 { 0%, 50% { opacity: 0; transform: translateY(6px); } 55%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-inn-80 { 0%, 78% { opacity: 0; transform: translateY(6px); } 83%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-fyll-30 { 0%, 10% { width: 0; } 34%, 94% { width: var(--bredde); } 100% { width: 0; } }
@keyframes af-fyll-70 { 0%, 58% { width: 0; } 74%, 94% { width: var(--bredde); } 100% { width: 0; } }
@keyframes af-tegn { 0%, 14% { stroke-dashoffset: 1; } 60%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes af-dager { 0%, 6% { width: 0; } 26%, 36% { width: 64%; } 46%, 94% { width: 100%; } 100% { width: 0; } }
@keyframes af-forelopig { 0%, 6% { opacity: 0; } 10%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes af-pop-48 { 0%, 46% { opacity: 0; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.08); } 53%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-lys-50 { 0%, 48% { opacity: .35; filter: grayscale(1); } 52%, 94% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }
@keyframes af-lys-64 { 0%, 62% { opacity: .35; filter: grayscale(1); } 66%, 94% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }
@keyframes af-lys-78 { 0%, 76% { opacity: .35; filter: grayscale(1); } 80%, 94% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }
@keyframes af-puls { 0%, 100% { outline: 0 solid rgba(103, 18, 251, .35); } 50% { outline: 6px solid rgba(103, 18, 251, 0); } }
@keyframes af-venter-1 { 0%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes af-ok-1 { 0%, 10% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.15); } 14%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-rad-1 { 0%, 2% { border-color: #f0edf7; } 4%, 10% { border-color: #c4b5fd; } 13%, 100% { border-color: #f0edf7; } }
@keyframes af-venter-2 { 0%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes af-ok-2 { 0%, 20% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; transform: scale(1.15); } 24%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-rad-2 { 0%, 12% { border-color: #f0edf7; } 14%, 20% { border-color: #c4b5fd; } 23%, 100% { border-color: #f0edf7; } }
@keyframes af-venter-3 { 0%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes af-ok-3 { 0%, 30% { opacity: 0; transform: scale(.5); } 32% { opacity: 1; transform: scale(1.15); } 34%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-rad-3 { 0%, 22% { border-color: #f0edf7; } 24%, 30% { border-color: #c4b5fd; } 33%, 100% { border-color: #f0edf7; } }
@keyframes af-venter-4 { 0%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes af-ok-4 { 0%, 40% { opacity: 0; transform: scale(.5); } 42% { opacity: 1; transform: scale(1.15); } 44%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-rad-4 { 0%, 32% { border-color: #f0edf7; } 34%, 40% { border-color: #c4b5fd; } 43%, 100% { border-color: #f0edf7; } }
@keyframes af-venter-5 { 0%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes af-ok-5 { 0%, 50% { opacity: 0; transform: scale(.5); } 52% { opacity: 1; transform: scale(1.15); } 54%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes af-rad-5 { 0%, 42% { border-color: #f0edf7; } 44%, 50% { border-color: #c4b5fd; } 53%, 100% { border-color: #f0edf7; } }
@keyframes af-stempel { 0%, 66% { opacity: 0; transform: rotate(-3deg) scale(1.6); } 70% { opacity: 1; transform: rotate(-3deg) scale(.95); } 72%, 94% { opacity: 1; transform: rotate(-3deg); } 99%, 100% { opacity: 0; } }

/* ---------- Mindre skjermer ---------- */

@media (max-width: 959px) {
	.int-filmdelt--res-effekt,
	.int-filmdelt--vp-anslag { grid-template-columns: minmax(0, 1fr); }
	.int-filmdelt--res-effekt .int-filmdelt-scene,
	.int-filmdelt--vp-anslag .int-filmdelt-scene { order: 0; }
}

@media (max-width: 479px) {
	.af-innhold { padding: 16px; }
	.af-fliser,
	.af-tall { grid-template-columns: minmax(0, 1fr); }
	.af-felt div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.af-plan-bunn { padding: 0 16px 16px; }
}