/*
 * Møt Alfred (template-parts/sections/plattform/alfred.php): maskoten for hele
 * Heyroes med en snakkeboble og heltene under. Flate farger, ingen skygger.
 * Mørk modus kommer fra tvillingen alfred.mork.css.
 *
 * Bredt: Alfred til venstre og boblen til høyre, med halen mot ham. Under
 * 900 px står Alfred over boblen, og halen peker opp.
 */

.alfred { background: #faf8ff; }

.alfred-scene {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	max-width: 1080px;
	margin-top: clamp(28px, 4vw, 48px);
}

/* Alfred uten gulv under (Nohman, 29.10.2026). Videoen ligger over plakaten
   og kommer fram når den spiller (assets/plattform/alfred.js). Videoen er
   kvadratisk, og utsnittet rundt Alfred står i --x, --y, --b og --h (andeler
   av kvadratet). Bakgrunnen er fargen til seksjonen, og kantene tones ut,
   så det ikke synes om fargen blir en tanke annerledes i videoen. I mørk
   modus står originalbildet stille */
.alfred-figur { display: grid; justify-items: center; margin: 0; }
.alfred-video {
	--x: .193;
	--y: .137;
	--b: .605;
	--h: .765;
	position: relative;
	width: min(100%, 440px);
	aspect-ratio: calc(var(--b) / var(--h));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
	mask-composite: intersect;
}
.alfred-plakat,
.alfred-klipp {
	position: absolute;
	top: calc(var(--y) / var(--h) * -100%);
	left: calc(var(--x) / var(--b) * -100%);
	width: calc(100% / var(--b));
	max-width: none;
	height: calc(100% / var(--h));
}
.alfred-klipp { opacity: 0; }
.alfred-video[data-spiller] .alfred-klipp { opacity: 1; }
.alfred-stille { position: absolute; inset: 4% 0; display: none; width: 100%; height: 92%; object-fit: contain; }
html[data-tema="mork"] .alfred-plakat,
html[data-tema="mork"] .alfred-klipp { display: none; }
html[data-tema="mork"] .alfred-stille { display: block; }
html[data-tema="mork"] .alfred-video { -webkit-mask-image: none; mask-image: none; }

/* Snakkeboblen, med halen mot Alfred */
.alfred-tekst { display: grid; gap: 22px; }
.alfred-boble {
	position: relative;
	display: grid;
	gap: 12px;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid #e7e2f5;
	border-radius: 28px;
	background: #fff;
}
.alfred-boble::before {
	content: "";
	position: absolute;
	top: 38%;
	left: -10px;
	width: 18px;
	height: 18px;
	border-bottom: 1px solid #e7e2f5;
	border-left: 1px solid #e7e2f5;
	border-radius: 0 0 0 4px;
	background: #fff;
	transform: rotate(45deg);
}
.alfred-boble p { margin: 0; color: #3d3d4d; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.65; text-wrap: pretty; }
.alfred-boble .alfred-forst { color: #1b1733; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 800; line-height: 1.25; }
/* Skrivemaskinen (assets/plattform/alfred.js): markøren er en kant med
   negativ marg, så den ikke tar plass, og linjene står likt mens teksten
   skrives. Den blinker når teksten er ferdig */
.alfred-rest { visibility: hidden; }
.alfred-skrevet.har-markor { margin-right: -.09em; border-right: .09em solid #7c3aed; }
.er-skrevet .alfred-skrevet.har-markor { animation: alfred-blink 1.06s steps(1) infinite; }
@keyframes alfred-blink { 50% { border-right-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
	.er-skrevet .alfred-skrevet.har-markor { animation: none; }
}
.alfred-signatur { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: #6b6880; font-size: 14px; }
.alfred-signatur b { color: #6d28d9; font-weight: 800; }
.alfred-signatur b::after { content: "·"; margin-left: 8px; color: #b7b4c7; }

/* Heltene som utgjør teamet */
.alfred-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.alfred-team li { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border: 1px solid #ece8f6; border-radius: 18px; background: #fff; text-align: center; }
/* Maskotene uten sirkel bak, like høye og nederst mot navnet (Nohman, 29.10.2026) */
.alfred-avatar { display: grid; place-items: end center; height: 76px; }
.alfred-avatar img { width: auto; max-width: 100px; height: auto; max-height: 76px; }
.alfred-team li > span:last-child { display: grid; color: #6b6880; font-size: 12.5px; line-height: 1.35; }
.alfred-team b { color: #1b1733; font-size: 15px; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
	.alfred-team li { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
	.alfred-team li:hover { transform: translateY(-3px); }
}

.alfred-lenke { justify-self: start; }

@media (max-width: 899px) {
	.alfred-scene { grid-template-columns: minmax(0, 1fr); }
	.alfred-video { width: min(72vw, 300px); }
	.alfred-boble::before { top: -10px; left: 50%; border-top: 1px solid #e7e2f5; border-bottom: 0; border-radius: 4px 0 0; transform: translateX(-50%) rotate(45deg); }
	.alfred-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alfred-lenke { justify-self: center; }
}