/*
 * Filmene på /crm/ (template-parts/sections/integrasjon/film-crm-*.php):
 *
 *   .crm-reise    et kort vandrer fra Lead til Kunde over salgstavlen, 12 s
 *   .crm-samlet   tre verktøy med kopiering imellom blir en app, 12 s
 *   .crm-tilbud   linjene fylles inn, tilbudet sendes, åpnes og signeres, 14 s
 *   .int-egen-deler  pulsen går nedover stegene i toppen, 7,5 s
 *
 * Filmene får klassen er-paa når de synes (assets/plattform/integrasjoner.js).
 * Uten bevegelse, eller før de synes, står sluttbildet: kortet i Kunde, appen
 * samlet og tilbudet signert. Ingen skygger (assets/topp/flat.css).
 */

@property --crm-x {
	syntax: '<number>';
	inherits: true;
	initial-value: 4;
}

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

.crm-vindu-topp { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f0edf7; color: var(--pf-blekk); font-size: 13.5px; }
.crm-vindu-topp b { font-weight: 800; }
.crm-prikker { display: inline-flex; gap: 5px; }
.crm-prikker i { width: 9px; height: 9px; border-radius: 50%; background: #e7e3f3; }
.crm-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #059669; font-size: 12px; font-weight: 700; }
.crm-live i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }

.int-filmdelt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(28px, 4.5vw, 64px); }
.int-filmdelt--crm-tilbud { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.int-filmdelt--crm-tilbud .int-filmdelt-scene { order: 2; }
.int-filmdelt + .int-film-tekst { margin-top: 18px; }

/* ---------- 1. Reisen fra lead til kunde ---------- */

.crm-reise { position: relative; overflow: hidden; border: 1px solid #ebe8f4; border-radius: 26px; background: #fff; }
.crm-reise + .int-film-tekst { margin-bottom: clamp(28px, 3vw, 44px); }

.crm-tavle {
	--bredde: calc((100% - 84px) / 5);
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding: 18px;
}

.crm-kol { min-height: 270px; padding: 10px; border: 1px solid transparent; border-radius: 16px; background: #f8f7fc; }
.crm-kol-navn { display: flex; align-items: center; gap: 7px; margin: 0 2px 10px; color: var(--pf-gra); font-size: 12.5px; font-weight: 700; }
.crm-kol-navn svg { flex: none; color: #7c3aed; }
.crm-kol-navn em { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--pf-gra); font-size: 11px; font-style: normal; }
.crm-stille { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #eeebf6; border-radius: 12px; background: #fff; opacity: .55; }
.crm-stille b { color: var(--pf-blekk); font-size: 13px; }
.crm-stille small { color: var(--pf-gra); font-size: 12px; }

/* Kortet som vandrer, plassert i kolonnen --crm-x (0 til 4) */
.crm-flytt {
	position: absolute;
	top: 118px;
	left: calc(18px + 10px + var(--crm-x) * (var(--bredde) + 12px));
	width: calc(var(--bredde) - 20px);
	z-index: 1;
}

.crm-kort { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1.5px solid #c4b5fd; border-radius: 14px; background: #fff; }
.crm-kort b { color: var(--pf-blekk); font-size: 14px; font-weight: 800; }
.crm-kort small { color: var(--pf-gra); font-size: 12px; }
.crm-kort-kilde { display: inline-flex; align-items: center; gap: 5px; color: #0467df; font-size: 11px; font-weight: 700; }
.crm-kort-kilde svg { flex: none; fill: currentColor; }
.crm-kort-status { position: relative; display: block; height: 22px; margin-top: 6px; }
.crm-s { position: absolute; top: 0; left: 0; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; opacity: 0; }
.crm-s0 { background: #e0ecff; color: #1d4ed8; }
.crm-s1 { background: #fef3c7; color: #92400e; }
.crm-s2 { background: #ede9fe; color: #6d28d9; }
.crm-s3 { background: #dcfce7; color: #15803d; }
.crm-s4 { background: #7c3aed; color: #fff; opacity: 1; }

/* Varselet om den nye leaden */
.crm-varsel { position: absolute; top: 56px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #e7e3f3; border-radius: 14px; background: #fff; color: var(--pf-gra); font-size: 12.5px; opacity: 0; }
.crm-varsel b { display: block; color: var(--pf-blekk); font-size: 13px; }
.crm-varsel-ikon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e8f0fe; color: #0467df; }
.crm-varsel-ikon svg { fill: currentColor; }

/* ---------- 2. Tre verktøy blir ett ---------- */

.crm-samlet { position: relative; height: 380px; overflow: hidden; border: 1px solid #ebe8f4; border-radius: 26px; background: #faf9fe; }

.crm-verktoy { position: absolute; top: 72px; display: flex; flex-direction: column; gap: 9px; width: 30%; padding: 14px; border: 1px solid #e7e3f3; border-radius: 16px; background: #fff; opacity: 0; }
.crm-verktoy--a { left: 4%; transform: rotate(-3deg); }
.crm-verktoy--b { left: 35%; top: 128px; transform: rotate(2deg); }
.crm-verktoy--c { left: 66%; top: 64px; transform: rotate(-1.5deg); }
.crm-verktoy-hode { display: flex; align-items: center; gap: 8px; color: var(--pf-blekk); font-size: 13px; font-weight: 700; }
.crm-verktoy--a .crm-verktoy-hode svg { color: #eb4e00; }
.crm-verktoy--b .crm-verktoy-hode svg { color: #238cc6; }
.crm-verktoy--c .crm-verktoy-hode svg { color: #64748b; }
.crm-strek { height: 8px; border-radius: 4px; background: #f1eff7; }
.crm-strek--kort { width: 60%; }

.crm-hopp { position: absolute; top: 40px; left: 8%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--pf-blekk); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; }
.crm-kopier { position: absolute; z-index: 2; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; opacity: 0; }
.crm-kopier--1 { top: 50px; left: 25%; }
.crm-kopier--2 { top: 96px; left: 56%; }

.crm-en { position: absolute; top: 50%; left: 50%; width: min(420px, 86%); border: 1.5px solid #c4b5fd; border-radius: 20px; background: #fff; transform: translate(-50%, -50%); }
.crm-en .crm-vindu-topp img { width: auto; height: 16px; }
.crm-en-rader { position: relative; display: grid; gap: 4px; margin: 0; padding: 10px 10px 0; list-style: none; }
.crm-en-rader::before { content: ""; position: absolute; top: 32px; bottom: 22px; left: 32px; width: 2px; border-radius: 2px; background: #ddd3fb; }
.crm-en-rader li { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.crm-en-rader li > span:last-child { display: flex; flex-direction: column; color: var(--pf-gra); font-size: 12.5px; }
.crm-en-rader b { color: var(--pf-blekk); font-size: 14px; font-weight: 800; }
.crm-en-ikon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f3efff; color: #6d28d9; font-size: 16px; }
.crm-en-rader li:last-child .crm-en-ikon { background: #7c3aed; color: #fff; }
.crm-en-bunn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px 16px; color: #059669; font-size: 13px; font-weight: 700; }

/* ---------- 3. Tilbudet som signeres ---------- */

.crm-tilbud { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 18px; padding: 22px; border: 1px solid #ebe8f4; border-radius: 26px; background: #faf9fe; }
.crm-ark { position: relative; padding: 18px 18px 66px; border: 1px solid #e7e3f3; border-radius: 18px; background: #fff; }
.crm-ark-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.crm-ark-hode small { display: block; color: var(--pf-gra); font-size: 12px; }
.crm-ark-hode b { color: var(--pf-blekk); font-size: 16px; font-weight: 800; }
.crm-ark-frist { padding: 3px 9px; border-radius: 999px; background: #f3efff; color: #6d28d9; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.crm-linjer { margin: 0; padding: 0; list-style: none; }
.crm-linjer li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #ece9f5; color: #33334a; font-size: 13px; }
.crm-linjer b,
.crm-sum b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-sum { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 0; color: var(--pf-blekk); font-size: 14px; font-weight: 800; }
.crm-signatur { position: relative; margin-top: 14px; padding-top: 10px; border-top: 1px solid #ece9f5; }
.crm-signatur svg { display: block; width: 180px; max-width: 70%; height: 50px; }
.crm-signatur path { fill: none; stroke: #1e1b4b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.crm-signatur small { color: var(--pf-gra); font-size: 11.5px; }
.crm-stempel { position: absolute; top: 14px; right: 4px; 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(-8deg); }
.crm-send { position: absolute; bottom: 16px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; outline: 2px solid transparent; outline-offset: 0; background: var(--knapp); color: #fff; font-size: 13px; font-weight: 700; }
.crm-fly { position: absolute; bottom: 20px; left: 160px; color: #7c3aed; font-size: 20px; opacity: 0; }
.crm-spor { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.crm-spor li { display: flex; align-items: center; gap: 10px; color: var(--pf-blekk); font-size: 13px; font-weight: 700; }
.crm-spor-ikon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #dcfce7; color: #15803d; font-size: 15px; }

/* ---------- 4. Pulsen i toppen ---------- */

.int-egen-deler::after { content: ""; position: absolute; top: 30px; left: 31px; width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; opacity: 0; }

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

@media (prefers-reduced-motion: no-preference) {
	.crm-live i { animation: crm-puls 1.6s ease-in-out infinite; }

	/* 1. Reisen */
	.er-paa .crm-flytt { animation: crm-x 12s cubic-bezier(.55, 0, .2, 1) infinite both, crm-kort-inn 12s ease infinite both; }
	.er-paa .crm-s { animation: crm-vindu 12s linear calc(var(--s) * 2.4s) infinite both; }
	.er-paa .crm-kol { animation: crm-kol 12s ease calc(var(--k) * 2.4s) infinite both; }
	.er-paa .crm-varsel { animation: crm-varsel 12s cubic-bezier(.2, .7, .2, 1) infinite both; }

	/* 2. Tre verktøy blir ett */
	.er-paa .crm-verktoy--a { animation: crm-samle-a 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .crm-verktoy--b { animation: crm-samle-b 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .crm-verktoy--c { animation: crm-samle-c 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .crm-hopp { animation: crm-hopp 12s cubic-bezier(.5, 0, .2, 1) infinite both; }
	.er-paa .crm-kopier--1 { animation: crm-blink-14 12s ease infinite both; }
	.er-paa .crm-kopier--2 { animation: crm-blink-28 12s ease infinite both; }
	.er-paa .crm-en { animation: crm-en 12s cubic-bezier(.2, .7, .2, 1) infinite both; }
	.er-paa .crm-en-rader li { animation: crm-rad 12s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .45s) infinite both; }

	/* 3. Tilbudet */
	.er-paa .crm-linjer li { animation: crm-linje 14s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .55s) infinite both; }
	.er-paa .crm-sum { animation: crm-sum 14s ease infinite both; }
	.er-paa .crm-send { animation: crm-send 14s ease infinite both; }
	.er-paa .crm-fly { animation: crm-fly 14s cubic-bezier(.4, 0, .2, 1) infinite both; }
	.er-paa .crm-signatur path { animation: crm-sign 14s ease-in-out infinite both; }
	.er-paa .crm-signatur small { animation: crm-sum-72 14s ease infinite both; }
	.er-paa .crm-stempel { animation: crm-stempel 14s cubic-bezier(.2, .9, .3, 1.2) infinite both; }
	.er-paa .crm-spor li:nth-child(1) { animation: crm-spor-38 14s ease infinite both; }
	.er-paa .crm-spor li:nth-child(2) { animation: crm-spor-50 14s ease infinite both; }
	.er-paa .crm-spor li:nth-child(3) { animation: crm-spor-74 14s ease infinite both; }

	/* 4. Pulsen i toppen */
	.er-paa.int-egen-deler li { animation: crm-steg 7.5s ease calc(var(--i) * 1.5s) infinite both; }
	.er-paa.int-egen-deler::after { animation: crm-prikk 7.5s cubic-bezier(.5, 0, .2, 1) infinite both; }
}

@keyframes crm-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@keyframes crm-x {
	0%, 15% { --crm-x: 0; }
	20%, 35% { --crm-x: 1; }
	40%, 55% { --crm-x: 2; }
	60%, 75% { --crm-x: 3; }
	80%, 100% { --crm-x: 4; }
}
@keyframes crm-kort-inn { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 4%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes crm-vindu { 0% { opacity: 0; transform: translateY(4px); } 1.5%, 18% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; } }
@keyframes crm-kol { 0% { border-color: transparent; background: #f8f7fc; } 2%, 18% { border-color: #ddd3fb; background: #f3efff; } 22%, 100% { border-color: transparent; background: #f8f7fc; } }
@keyframes crm-varsel { 0% { opacity: 0; transform: translateY(-10px); } 3%, 14% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-10px); } }

@keyframes crm-samle-a { 0% { opacity: 0; transform: rotate(-3deg) translateY(12px); } 4%, 42% { opacity: 1; transform: rotate(-3deg); } 52%, 100% { opacity: 0; transform: translateX(45%) translateY(10%) scale(.7); } }
@keyframes crm-samle-b { 0% { opacity: 0; transform: rotate(2deg) translateY(12px); } 6%, 42% { opacity: 1; transform: rotate(2deg); } 52%, 100% { opacity: 0; transform: translateY(-20%) scale(.7); } }
@keyframes crm-samle-c { 0% { opacity: 0; transform: rotate(-1.5deg) translateY(12px); } 8%, 42% { opacity: 1; transform: rotate(-1.5deg); } 52%, 100% { opacity: 0; transform: translateX(-45%) translateY(10%) scale(.7); } }
@keyframes crm-hopp {
	0%, 9% { opacity: 0; top: 40px; left: 8%; }
	12%, 16% { opacity: 1; top: 40px; left: 8%; }
	23%, 28% { opacity: 1; top: 96px; left: 39%; }
	35%, 40% { opacity: 1; top: 32px; left: 70%; }
	45%, 100% { opacity: 0; top: 32px; left: 70%; }
}
@keyframes crm-blink-14 { 0%, 14% { opacity: 0; transform: translateY(4px); } 16%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@keyframes crm-blink-28 { 0%, 28% { opacity: 0; transform: translateY(4px); } 30%, 36% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; } }
@keyframes crm-en { 0%, 46% { opacity: 0; transform: translate(-50%, -44%) scale(.94); } 54%, 95% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes crm-rad { 0%, 54% { opacity: 0; transform: translateX(-10px); } 60%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@keyframes crm-linje { 0%, 3% { opacity: 0; transform: translateY(6px); } 8%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes crm-sum { 0%, 20% { opacity: 0; } 25%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crm-sum-72 { 0%, 70% { opacity: 0; } 74%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crm-send {
	0%, 27% { transform: none; outline-color: transparent; outline-offset: 0; }
	30% { transform: scale(.93); outline-color: rgba(124, 58, 237, .55); outline-offset: 0; }
	34% { transform: none; outline-color: transparent; outline-offset: 10px; }
	100% { transform: none; outline-color: transparent; outline-offset: 0; }
}
@keyframes crm-fly { 0%, 31% { opacity: 0; transform: none; } 33% { opacity: 1; transform: none; } 42% { opacity: 0; transform: translate(170px, -150px) rotate(-18deg) scale(.7); } 100% { opacity: 0; } }
@keyframes crm-sign { 0%, 56% { stroke-dashoffset: 1; } 72%, 95% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes crm-stempel { 0%, 72% { opacity: 0; transform: rotate(-8deg) scale(1.7); } 75% { opacity: 1; transform: rotate(-8deg) scale(.94); } 77%, 95% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; } }
@keyframes crm-spor-38 { 0%, 36% { opacity: .35; filter: grayscale(1); } 39%, 95% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }
@keyframes crm-spor-50 { 0%, 48% { opacity: .35; filter: grayscale(1); } 51%, 95% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }
@keyframes crm-spor-74 { 0%, 72% { opacity: .35; filter: grayscale(1); } 75%, 95% { opacity: 1; filter: none; } 100% { opacity: .35; filter: grayscale(1); } }

@keyframes crm-steg { 0% { border-color: #f0edf7; background: #fbfaff; transform: none; } 3%, 18% { border-color: #c4b5fd; background: #fff; transform: translateX(4px); } 22%, 100% { border-color: #f0edf7; background: #fbfaff; transform: none; } }
@keyframes crm-prikk { 0% { top: 30px; opacity: 0; } 4% { opacity: 1; } 92% { top: calc(100% - 40px); opacity: 1; } 100% { top: calc(100% - 40px); opacity: 0; } }

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

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

@media (max-width: 759px) {
	.crm-tavle { --bredde: calc((100% - 44px) / 5); gap: 6px; padding: 10px; }
	.crm-kol { min-height: 190px; padding: 6px; }
	.crm-kol-navn { justify-content: center; margin: 2px 0 8px; font-size: 0; }
	.crm-kol-navn svg { width: 16px; height: 16px; }
	.crm-kol-navn em,
	.crm-stille { display: none; }
	.crm-flytt { top: 58px; left: calc(10px + 6px + var(--crm-x) * (var(--bredde) + 6px)); width: calc(var(--bredde) - 12px); }
	.crm-kort { padding: 8px 6px; }
	.crm-kort b { font-size: 11.5px; }
	.crm-kort small,
	.crm-kort-kilde { display: none; }
	.crm-s { padding: 2px 6px; font-size: 9.5px; }
	.crm-varsel { top: 52px; right: 10px; left: 10px; }
	.crm-samlet { height: 340px; }
	.crm-verktoy { width: 40%; padding: 10px; }
	.crm-verktoy--b { left: 30%; top: 150px; }
	.crm-verktoy--c { left: 56%; }
	.crm-tilbud { grid-template-columns: minmax(0, 1fr); padding: 14px; }
	.crm-spor { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
	.crm-fly { display: none; }
}