/* ============================================================
   DE SJU AI-ANSATTE — «Ditt første AI-team»
   Søsken av gründerkarakterene i /quiz-grunder/ (og chat-boten på
   /innsiden/). Samme kropp, skjerm, ansikt, antenne, sticker-kant,
   3D-gradient og harde skygge (5 px ned, 6 px høyre) på alle sju.
   Det eneste som skiller dem: hodeplagg, attributt i hånden og
   kroppsfarge fra quizens fire (rust, sage, sand, ink).

   Hvorfor ikke @import av quiz-grunder.css: den fila er et helt
   sidestilark (body, .container, h1, rutenett …) og ville overstyrt
   landingssiden. Figurklassene under er derfor speilet 1:1 fra
   quiz-grunder.css («Gründerkarakterene», .karakter …) — endres
   familien, endres den der først og speiles hit. Nøkkelbildene har
   egne navn (ai-…) så de ikke kolliderer når begge filene lastes.

   Lagdeling i hver SVG (samme som quizen):
     1. .kar-skygge    — silhuetten i skyggefarge, forskjøvet (ligger stille)
     2. .kar-figur     — sticker-kanten + kroppen + hodeplagget (sveve)
     3. .kar-attributt — redskapet i hånden, med eget mikrogrep
   Rent dekorative: alltid aria-hidden="true".
   ============================================================ */

:where(:root) {
  --cream: #EFE6D4;
  --cream-hi: #F7F1E4;
  --ink: #2E3230;
  --rust: #C5522C;
  --olive: #5E5F4C;
  --sage: #AFBEA0;
  --sand: #F0D9A8;
}

/* ---------- Mål ---------- */
.ai-figur { width: 112px; height: 112px; flex: none; display: block; }
.ai-figur--liten { width: 64px; height: 64px; }
.ai-figur--plakat { width: 190px; height: 190px; }

/* ---------- Familien (speilet fra quiz-grunder.css) ---------- */
.karakter { overflow: visible; }
.karakter .kar-skygge { fill: var(--ink); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
/* mot mørk flate er ink usynlig — der er skyggen rust */
.ai-figur--plakat.karakter .kar-skygge { fill: var(--rust); stroke: var(--rust); }
.karakter .kar-kant { fill: #FFF8EE; stroke: #FFF8EE; stroke-width: 7; stroke-linejoin: round; }
.karakter .kar-skall { stroke: var(--ink); stroke-width: 2.2; }
.karakter .kar-del { stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.karakter .kar-verktoy { stroke: var(--ink); stroke-width: 2.1; stroke-linejoin: round; }
.karakter .kar-flat { stroke: none; }
.karakter .kar-stang { fill: var(--ink); }
.karakter .kar-skjerm { fill: var(--cream-hi); }
.karakter .kar-glans { fill: rgba(255, 255, 255, .40); }
.karakter .kar-pupill { fill: var(--ink); }
.karakter .kar-glimt { fill: var(--cream-hi); }
.karakter .kar-strek { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.karakter .kar-glimtstrek { fill: none; stroke: #FFF8EE; stroke-width: 2.4; stroke-linecap: round; }

/* ---------- Tillegg for de sju ---------- */
.karakter .kar-strek.kar-tynn,
.karakter .kar-glimtstrek.kar-tynn { stroke-width: 1.5; }
/* lukkede øyne på sovemasken */
.karakter .kar-lukket { fill: none; stroke: var(--cream-hi); stroke-width: 1.7; stroke-linecap: round; }
.karakter .kar-lukket.kar-vipper { stroke-width: 1.2; }
/* CFO-ens grønne regnskapsskjerm: gjennomskinnelig, pannen synes gjennom */
.karakter .kar-visir { fill: rgba(143, 170, 120, .78); }
/* hanken på kaffekoppen */
.karakter .kar-hank { fill: none; stroke: var(--ink); stroke-width: 2.6; }

/* ---- Idle: pust, blunk og ett mikrogrep per ansatt ----
   Samme sveve og blunk som quizen; forskjøvne tempoer så de sju aldri
   marsjerer i takt når de står på rekke. */
.karakter .kar-figur { animation: ai-sveve 4.6s ease-in-out infinite; }
@keyframes ai-sveve {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.karakter .kar-oye { transform-box: fill-box; transform-origin: center; animation: ai-blunk 5.6s ease-in-out infinite; }
@keyframes ai-blunk {
  0%, 91%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
  97%           { transform: scaleY(1); }
}
.karakter .kar-attributt { transform-box: view-box; transform-origin: 82px 48px; }

/* Morgenbriefen løfter koppen til en slurk */
.ai--morgen .kar-figur { animation-duration: 4.4s; }
.ai--morgen .kar-oye { animation-delay: -.4s; }
.ai--morgen .kar-attributt { animation: ai-slurk 6s ease-in-out infinite; }
@keyframes ai-slurk {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  70%, 80%      { transform: translateY(-2.4px) rotate(-7deg); }
  90%           { transform: translateY(0) rotate(0); }
}

/* Innboksassistenten vifter lett med konvolutten */
.ai--innboks .kar-figur { animation-duration: 5.2s; animation-delay: -1.3s; }
.ai--innboks .kar-oye { animation-delay: -2.1s; }
.ai--innboks .kar-attributt { animation: ai-vift 3.9s ease-in-out infinite; }
@keyframes ai-vift {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Oppfølgerens glass vipper sakte fram og tilbake */
.ai--oppfolger .kar-figur { animation-duration: 5s; animation-delay: -2.6s; }
.ai--oppfolger .kar-oye { animation-delay: -3.4s; }
.ai--oppfolger .kar-attributt { animation: ai-vipp 4.8s ease-in-out infinite; }
@keyframes ai-vipp {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Tilbudsskriveren vipper arket fram */
.ai--tilbud .kar-figur { animation-duration: 5.6s; animation-delay: -3.9s; }
.ai--tilbud .kar-oye { animation-delay: -1.1s; }
.ai--tilbud .kar-attributt { animation: ai-vis 6.4s ease-in-out infinite; }
@keyframes ai-vis {
  0%, 62%, 100% { transform: translateY(0) rotate(0); }
  72%, 84%      { transform: translateY(-2.6px) rotate(-5deg); }
  93%           { transform: translateY(0) rotate(0); }
}

/* CFO-en taster på kalkulatoren */
.ai--cfo .kar-figur { animation-duration: 4.8s; animation-delay: -.8s; }
.ai--cfo .kar-oye { animation-delay: -2.8s; }
.ai--cfo .kar-attributt { animation: ai-tast 3.6s ease-in-out infinite; }
@keyframes ai-tast {
  0%, 58%, 100% { transform: translateY(0) rotate(0); }
  67%           { transform: translateY(2.2px) rotate(2.5deg); }
  76%           { transform: translateY(0) rotate(0); }
  83%           { transform: translateY(1.4px) rotate(1.5deg); }
  90%           { transform: translateY(0) rotate(0); }
}

/* Innholdsassistenten roper i megafonen */
.ai--innhold .kar-figur { animation-duration: 5.4s; animation-delay: -2s; }
.ai--innhold .kar-oye { animation-delay: -4.2s; }
.ai--innhold .kar-attributt { animation: ai-rop 4.2s ease-in-out infinite; }
@keyframes ai-rop {
  0%, 55%, 100% { transform: rotate(0) scale(1); }
  63%           { transform: rotate(-5deg) scale(1.05); }
  71%           { transform: rotate(0) scale(1); }
  79%           { transform: rotate(-4deg) scale(1.04); }
  87%           { transform: rotate(0) scale(1); }
}

/* Ukesjefens stoppeklokke tikker */
.ai--ukesjef .kar-figur { animation-duration: 4.9s; animation-delay: -3.2s; }
.ai--ukesjef .kar-oye { animation-delay: -.9s; }
.ai--ukesjef .kar-attributt { animation: ai-vift 5.2s ease-in-out infinite; }
.ai--ukesjef .kar-viser { transform-box: view-box; transform-origin: 82px 35px; animation: ai-tikk 8s steps(8) infinite; }
@keyframes ai-tikk { to { transform: rotate(360deg); } }

/* ---------- Bevegelse av ---------- */
@media (prefers-reduced-motion: reduce) {
  .karakter .kar-figur,
  .karakter .kar-oye,
  .karakter .kar-attributt,
  .karakter .kar-viser { animation: none !important; transform: none !important; }
}