/* ═══════════════════════════════════════════════════════════════════════════
   DATORN — ritad, inte fotograferad

   VARFÖR RITAD. Datorn var ett foto med egen alfakanal, och locköppningen
   skivade samma foto i två lager: en underdel och ett lock som roterades i
   3D. Den konstruktionen kan inte ge rena kanter, av tre skäl som alla är
   inbyggda i den:

     1. Ett roterat lager rastreras EN gång och samplas sedan. Vid -60 grader
        är locket hoptryckt till halva höjden, alltså dubbel förminskning, och
        ett fotos hårda alfakant blir då en prickad linje. Det var de hackiga
        kanterna.
     2. Lockets sidor var klippgränser (12 % och 88 % av ramen), inte datorns
        verkliga kant. Rektangeln skar rakt genom chassit.
     3. Slagskuggan var ett element på 100 % bredd av SCENEN, inte av datorn.
        Mot den gamla mörka sidan syntes det aldrig. Mot den ljusa blev det en
        grå rektangel som stack ut långt utanför datorn på båda sidor.

   Ritad geometri har inget av det. Vektorkanter rastreras om i varje
   bildruta och i varje upplösning, så linjerna är exakta vid alla vinklar,
   på retina och i alla storlekar. Filstorleken går från 39 kB bild till
   ingenting alls.

   MÅTTEN ÄR FOTOTS. Silhuetten är uppmätt rad för rad ur laptop.png, så den
   ritade datorn har exakt samma fotavtryck som fotot hade. Inget annat i
   layouten flyttade sig när bilden byttes ut.

     lockets överkant   y = 11,30 %      gångjärnet    y = 68,64 %
     lockets sidor      x = 14,54 %      och 85,94 %
     framkanten         y = 87,76 %      x = 4,84 %    och 95,48 %

   FÄRGERNA ÄR OCKSÅ FOTOTS, provtagna region för region: däcket går från
   #171630 vid gångjärnet till #43416b vid framkanten, tangenterna ligger på
   #232244 och styrplattan på #33315b.
   ═══════════════════════════════════════════════════════════════════════════ */

.dator {
  position: absolute;
  inset: 0;
  /* Ingen egen stackningskontext utöver den scenen redan har: dämpskivan
     bakom (.laptop-scen::before) ska fortsätta ligga under datorn. */
}

/* ── Underdelen ──────────────────────────────────────────────────────────────
   Vektor, så trapetsen och tangenterna har exakta kanter. Genererad ur
   samma perspektivavbildning som chassit: djupet t går 0 till 1 från
   gångjärnet till framkanten och halva bredden växer 448 till 560, så
   ingenting som ritas på däcket kan ligga snett mot kanten. */
.dator-bas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Kontaktskuggan mot underlaget. Ellips och inte box-shadow: chassit är en
     trapets, och en rektangulär skugga under en trapets är precis felet som
     den gamla slagskuggan gjorde. */
  filter: drop-shadow(0 18px 26px rgba(20, 28, 74, .17));
}

/* ── Locket ──────────────────────────────────────────────────────────────────
   Ett CSS-block, inte en bildskiva. Sidorna är lodräta kanter på ett
   element, och en lodrät kant påverkas inte av att elementet trycks ihop på
   HÖJDEN. Det är hela skillnaden mot den utskurna fotoskivan.

   Gångjärnet är underkanten (transform-origin 50 % 100 %) och flyktpunkten
   ligger i lockets egen mitt. Skärmglaset under resan (.lock-glas) roterar
   kring samma axel, se index.html. */
.dator-lock {
  position: absolute;
  left: 14.54%;
  top: 11.30%;
  width: 71.40%;
  height: 57.34%;
  /* Hörnradien är uppmätt ur fotot: 34 px i sidled och 27 px i höjdled på en
     lockyta som är 885 x 600 px i bildens koordinater. */
  border-radius: 3.8% 3.8% .5% .5% / 4.5% 4.5% .6% .6%;
  /* Aluminiumramen är MÖRK, inte ljus. Första försöket lade en ljus ton här
     och då fick skärmen en lavendelfärgad list runt sig som fotot inte har:
     där mäter lockets ytterkant #05071a och ramen en bit in #3d3a52. Ljuset
     ligger i en enda pixel längs fasningen, inte över hela ramen. */
  background:
    linear-gradient(180deg, #23264a 0, #14162f 6%, #0d0f26 100%);
  box-shadow:
    0 1px 0 rgba(140, 150, 200, .34) inset,
    1px 0 0 rgba(120, 130, 180, .12) inset,
    -1px 0 0 rgba(120, 130, 180, .12) inset,
    0 0 0 1px rgba(8, 10, 30, .6);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

/* Glasytan: hela lockets framsida är svart glas, och bilden ligger inuti den.
   Insättningen ÄR skärmramen, och måtten är fotots: 10 px i sidled, 20 px
   upptill och 21 px nedtill räknat i bildens koordinater. Rektangeln
   sammanfaller därmed exakt med .laptop-skarm. */
.dator-glasyta {
  position: absolute;
  left: 1.09%;
  right: 1.09%;
  top: 2.81%;
  bottom: 2.98%;
  border-radius: 2.4% / 3%;
  background:
    linear-gradient(168deg, rgba(120, 150, 225, .07) 0 38%, transparent 62%),
    linear-gradient(180deg, #0b0f26, #070a1c);
  box-shadow: 0 0 0 1px rgba(6, 9, 26, .9) inset;
}

/* Kameran. Ett prickstort element, men det är sådant som avgör om något
   läser som en dator eller som en rektangel. */
.dator-kamera {
  position: absolute;
  left: 50%;
  top: -1.55%;
  width: .62%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #262a4a;
  box-shadow: 0 0 0 1px rgba(90, 100, 150, .22);
}

/* ── Mobil ───────────────────────────────────────────────────────────────────
   Skärmen bryter ur glaset under 760 px (se css/systemskarm.css) och blir ett
   eget block under datorn. Locket står då kvar som en tom, mörk glasyta,
   vilket är precis vad en dator ser ut som när skärmen är släckt. Inget
   behöver ändras här. */