/* GNISTENS PLADS PAA FLADEN. Selve figuren er et billede — se public/figurer.js for hvem hun er,
 * hvilke fire takter hun maa staa paa, og hvad der aldrig maa aendre sig ved hende.
 *
 * Egen fil og ikke en del af onboard.css, fordi figuren staar FIRE steder og kun ét af dem er
 * onboardingen: `venter` (/onboard/analyserer), `tomt` (biblioteket foer foerste opslag), `fejl`
 * (scrapet kunne ikke naa siden) og `lykkedes` (/onboard/faerdig). Laa reglerne i onboard.css,
 * ville den tomme liste i biblioteket afhaenge af et stilark der hedder noget andet — og den
 * naeste der ryddede op i onboardingen ville tage biblioteket med uden at vide det.
 *
 * ── DEN ENE TING DER KAN GAA GALT ───────────────────────────────────────────────────────────
 *
 * Billederne har en BAGGRUND — brandets papir, #F2F1EC — fordi der endnu ikke findes en fritlagt
 * udgave med gennemsigtighed. Staar figuren paa en flade med en anden farve, ses firkanten med
 * det samme. Derfor `--papir` under den, og derfor er `--felt` rettet til den samme vaerdi.
 * Kommer den fritlagte PNG, kan `background` herunder fjernes og figuren staa hvor som helst.
 */

/* FIGUREN ER FRITLAGT — PNG/webp med aegte gennemsigtighed, bygget af de renderede JPEG'er
   (se figurer.js). Derfor ingen `background` her: hun kan staa paa en hvilken som helst flade,
   og fladen bag hende behoever ikke laengere at ramme #F2F1EC praecist.

   Foerste udgave brugte billederne MED deres papir-baggrund og en kasse i samme farve. Det
   virkede lige indtil man saa efter: de fire renderinger har hver sin baggrundstone
   (#f1f0eb til #f3f2ed), saa der stod en svag firkant om hende paa hver eneste skaerm.
   Et match der er "taet nok" er ikke et match. */
.fig {
  /* FLEX, ikke block — og det er en rettelse, ikke en smagssag.
     `display:block` + `width:auto` giver FULD bredde, og billedet indeni (der er block for at
     undgaa baseline-mellemrummet) lagde sig derfor i venstre kant. Det saas ikke paa de fire
     foerste skaerme, fordi de alle er flex-containere med align-items:center — dér krymper
     figuren til sit motiv og centrerer sig selv. Den femte, `.swipe-empty`, er en almindelig blok
     med text-align:center, og text-align kan ikke centrere et BLOK-barn: figuren stod i venstre
     side af en ellers centreret skaerm.
     Med flex centrerer den sig selv uanset hvad containeren er, og i en flex-foraelder krymper
     den praecis som foer. */
  display: flex;
  justify-content: center;
  /* Hoejden styrer, ikke bredden: figurerne er beskaaret til deres eget motiv og har derfor
     forskellig bredde. Ens HOEJDE er det der faar dem til at se ud som den samme figur. */
  height: 190px;
}
.fig img, .fig video { height: 100%; width: auto; display: block; }

/* Bibliotekets tomme tilstand centrerer selv sit indhold; en almindelig blok skal have auto. */
.np-foerste .fig { margin: 0 auto 10px; }

/* Swipe-skaermen mens bunken bygges. Samme hoejde som de andre fire — det er hoejden der goer
   dem til den samme figur — men mere luft ned til overskriften, fordi hun her staar OVER en
   overskrift og ikke ved siden af noget. */
.swipe-empty .fig { margin: 0 auto 18px; }

/* Bevaegelsen er lille MED VILJE. Figuren skal signalere at der sker noget, ikke underholde —
   en hoppende maskot paa en skaerm hvor kunden venter, er irriterende anden gang.
   Kun `venter` bevaeger sig: paa de tre andre er noget ALLEREDE sket. */
.fig-venter { animation: figvip 3.2s ease-in-out infinite; }
@keyframes figvip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* Er venter-takten den rigtige loekke (figurer.js), bevaeger figuren sig INDE i klippet: hun
   traekker vejret, pelsen falder, og flammetungerne blafrer. CSS-vippet ovenpaa ville laegge en
   anden rytme hen over den — to bevaegelser der ikke ved noget om hinanden laeser som en fejl. */
.fig-loop { animation: none; }
/* Lykkedes-figuren kommer ind ÉN gang. Ingen loekke — en gentaget fejring bliver til stoej. */
.fig-lykkedes { animation: figind .5s cubic-bezier(.2, .8, .3, 1) 1; }
@keyframes figind {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fig-venter, .fig-lykkedes { animation: none; }
}