/* ======================================================================
   Heltene jobber mens du driver bedriften: kortene med scenene
   (template-parts/sections/plattform/rytme.php, spilles av rytme.js).
   Lastes etter plattform.css og bygger videre på raden som glir sidelengs.
   ====================================================================== */

.pf-rytme { background: #f6f4ff; }

.pf-rytme-spor { gap: 22px; }

.pf-rytme-kort {
	width: min(84vw, 400px);
	min-height: 0;
	padding: 12px 12px 26px;
	border: 1px solid #ebe7f7;
	border-radius: 32px;
	background: #fff;
	transition: translate .5s var(--pf-myk), border-color .3s ease;
}

.pf-rytme-kort:hover { translate: 0 -6px; border-color: color-mix(in oklab, var(--aksent, #7c3aed) 35%, #fff); }

.rm-tekst { padding: 22px 18px 0; }
.rm-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.rm-hvem { font-size: 14px; font-weight: 800; color: color-mix(in oklab, var(--aksent, #7c3aed) 82%, #000); }
.pf-rytme-kort .pf-h4 { margin: 16px 0 10px; }

.pf-fremdrift { width: 240px; height: 4px; }
.pf-fremdrift i { background: #7c3aed; }

/* ---------- Scenen ---------- */

.rm-scene {
	position: relative;
	height: 230px;
	border-radius: 24px;
	background: var(--flate, #efeafe);
	overflow: hidden;
}

.rm-scene :where(p, ul) { margin: 0; padding: 0; list-style: none; }

/* Helten titter fram nederst til høyre (to klasser, så overgangen vinner over liv.css) */
.rm-scene .rm-maskot {
	position: absolute;
	right: 12px;
	bottom: -26px;
	width: 108px;
	height: auto;
	translate: 0 40px;
	transition: translate .8s cubic-bezier(.3, 1.4, .5, 1) .5s;
}

.er-aktiv .rm-maskot { translate: 0 0; }

/* Kortene inne i scenene, som et varsel i appen */
.rm-kort {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: 62%;
	padding: 10px 13px;
	border-radius: 14px;
	background: #fff;
	color: #111827;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	opacity: 0;
	translate: 0 12px;
	transition: opacity .5s ease, translate .6s var(--pf-myk);
}

.rm-kort b { display: block; font-size: 11.5px; font-weight: 800; color: color-mix(in oklab, var(--aksent, #7c3aed) 82%, #000); }
.er-aktiv .rm-kort { opacity: 1; translate: 0 0; transition-delay: 1.4s; }

/* 1. Grafen som tegnes, og avviket som blinker */
.rm-sol {
	position: absolute;
	top: 18px;
	right: 24px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fbbf24;
	translate: 0 30px;
	opacity: 0;
	transition: translate 1.2s var(--pf-myk), opacity .8s ease;
}

.er-aktiv .rm-sol { translate: 0 0; opacity: 1; }

.rm-graf { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: 120px; overflow: visible; }

.rm-graf-linje {
	fill: none;
	stroke: var(--aksent, #7c3aed);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

.er-aktiv .rm-graf-linje { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6, .05, .3, 1); }

.rm-graf-punkt {
	position: absolute;
	left: calc(214 / 300 * 100%);
	top: calc(34px + 30 / 120 * 120px);
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #dc2626;
	opacity: 0;
}

.er-aktiv .rm-graf-punkt { opacity: 1; transition: opacity .3s ease 1.2s; animation: rm-puls 1.6s ease-out 1.3s infinite; }

@keyframes rm-puls {
	0% { outline: 0 solid rgba(220, 38, 38, .45); }
	100% { outline: 14px solid rgba(220, 38, 38, 0); }
}

/* 2. Natta der Herman skriver forslag */
.rm-scene--natt { background: #27235c; }
.rm-scene--natt .rm-maskot { filter: brightness(.92); }

.rm-maane {
	position: absolute;
	top: 20px;
	right: 26px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fef3c7;
	clip-path: circle(50% at 50% 50%);
	mask: radial-gradient(circle at 70% 35%, transparent 11px, #000 12px);
}

.rm-stjerne {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	animation: rm-blink 2.4s ease-in-out var(--d) infinite;
}

@keyframes rm-blink {
	0%, 100% { opacity: .25; scale: .7; }
	50% { opacity: 1; scale: 1.2; }
}

.rm-ark {
	position: absolute;
	left: 18px;
	top: 64px;
	display: grid;
	gap: 9px;
	width: 56%;
	padding: 14px;
	border-radius: 12px;
	background: #fff;
}

.rm-ark i { height: 7px; border-radius: 4px; background: #e5e1f5; width: 0; }
.er-aktiv .rm-ark i { transition: width .7s var(--pf-myk); }
.er-aktiv .rm-ark i:nth-child(1) { width: 92%; transition-delay: .3s; }
.er-aktiv .rm-ark i:nth-child(2) { width: 74%; transition-delay: .7s; }
.er-aktiv .rm-ark i:nth-child(3) { width: 84%; transition-delay: 1.1s; }
.er-aktiv .rm-ark i:nth-child(4) { width: 48%; transition-delay: 1.5s; background: #c4b5fd; }

.rm-kort--natt { background: #fef3c7; color: #78350f; }
.er-aktiv .rm-kort--natt { transition-delay: 1.9s; }

/* 3. Ukesbrevet som kommer inn */
.rm-epost {
	position: absolute;
	left: 18px;
	right: 70px;
	top: 26px;
	display: grid;
	gap: 8px;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	translate: 0 160px;
	rotate: -4deg;
	transition: translate .9s cubic-bezier(.3, 1.3, .5, 1) .3s, rotate .9s var(--pf-myk) .3s;
}

.er-aktiv .rm-epost { translate: 0 0; rotate: 0deg; }
.rm-epost-topp { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rm-epost-fra { font-size: 12px; color: #6b7280; }
.rm-epost i { height: 7px; border-radius: 4px; background: #eceaf3; }
.rm-epost i:nth-of-type(2) { width: 82%; }
.rm-epost i:nth-of-type(3) { width: 58%; }

.rm-ny {
	padding: 3px 8px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	scale: 0;
	transition: scale .4s cubic-bezier(.3, 1.6, .5, 1) 1.2s;
}

.er-aktiv .rm-ny { scale: 1; }

/* 4. Klokka som går rundt mens sider publiseres */
.rm-ur { position: absolute; left: 22px; top: 22px; width: 92px; height: 92px; rotate: -90deg; }
.rm-ur circle { fill: none; stroke-width: 9; }
.rm-ur-spor { stroke: #fff; }
.rm-ur-gang { stroke: var(--aksent, #7c3aed); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.er-aktiv .rm-ur-gang { animation: rm-kvarter 4s linear infinite; }

@keyframes rm-kvarter {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

.rm-ur-tid { position: absolute; left: 22px; top: 22px; display: grid; place-items: center; width: 92px; height: 92px; font-size: 14px; font-weight: 800; color: #111827; }

.rm-logg { position: absolute; left: 18px; right: 110px; bottom: 18px; display: grid; gap: 8px; }

.rm-logg li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	border-radius: 12px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: #111827;
	opacity: 0;
	translate: -14px 0;
	transition: opacity .5s ease, translate .6s var(--pf-myk);
}

.rm-logg li svg { flex: none; color: #059669; }
.er-aktiv .rm-logg li { opacity: 1; translate: 0 0; }
.er-aktiv .rm-logg li:nth-child(1) { transition-delay: .9s; }
.er-aktiv .rm-logg li:nth-child(2) { transition-delay: 1.6s; }

/* 5. Søylene som vokser når effekten måles */
.rm-sojler { position: absolute; left: 22px; bottom: 18px; top: 26px; display: flex; align-items: flex-end; gap: 14px; }

/* Flex i en kolonne med fast høyde, så høyden på søylen i prosent virker */
.rm-sojle { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; width: 46px; height: 100%; }
.rm-sojle i { display: block; flex: none; width: 100%; height: 0; border-radius: 10px 10px 4px 4px; background: color-mix(in oklab, var(--aksent, #7c3aed) 70%, #fff); }
.rm-sojle:last-child i { background: var(--aksent, #7c3aed); }
.er-aktiv .rm-sojle i { height: var(--h); transition: height 1s cubic-bezier(.3, 1.2, .5, 1) calc(.3s + var(--d)); }
.rm-sojle small { font-size: 11px; font-weight: 800; color: #374151; white-space: nowrap; }

.rm-kort--effekt { top: 20px; right: 16px; bottom: auto; left: auto; max-width: 44%; }
.er-aktiv .rm-kort--effekt { transition-delay: 1.6s; }

/* 6. Månedsrapporten med setningen et menneske skriver */
.rm-rapport {
	position: absolute;
	inset: 22px 22px auto;
	display: grid;
	gap: 9px;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
}

.rm-rapport-topp { font-size: 14px; }
.rm-rapport i { height: 7px; border-radius: 4px; background: #eceaf3; }
.rm-rapport i:nth-of-type(2) { width: 76%; }

.rm-menneske {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px 7px 7px;
	border-radius: 12px;
	background: linear-gradient(#fef08a, #fef08a) no-repeat 0 0 / 0 100%;
	font-size: 13px;
	font-weight: 800;
	color: #111827;
	transition: background-size 1s var(--pf-myk) .8s;
}

.er-aktiv .rm-menneske { background-size: 100% 100%; }
.rm-menneske img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* Med redusert bevegelse står scenene ferdige */
@media (prefers-reduced-motion: reduce) {
	.pf-rytme-kort, .rm-scene *, .rm-scene *::before { transition: none !important; animation: none !important; }
}

@media (max-width: 520px) {
	.rm-scene { height: 210px; }
	.rm-maskot { width: 92px; }
}