/* Portalen i Fly-knappen (portal.js). Knappen går inte att klicka på: ingen handpekare och ingen intryckning.
   Duken med hålet ligger över knappen, Newton ovanpå hålet (han klättrar ut ur det) och bubblan överst, allt över
   GeoGebras 5000 och guidens Newton. */
.fly-knapp.portal-knapp { cursor: default; }
.fly-knapp.portal-knapp:active { transform: scale(1.06); }
.fly-knapp.portal-oppen { transform: scale(1.06); }
/* Medan Newton bänder sig ut ritas knappen på duken (töjd), och den riktiga knappen syns inte. */
.fly-knapp.portal-tojd { opacity: 0; animation: none; }

.portal { display: none; }
.portal.pa { display: block; }
.portal-duk { position: fixed; z-index: 10011; pointer-events: none; }
.portal-duk.portal-glas { z-index: 10013; }

/* Newton: figurens övre mitt flyttas från hålets mitt (liten) till under knappen (full storlek). */
.portal-newton { position: fixed; z-index: 10012; pointer-events: none; transform-origin: 50% 0; will-change: transform, opacity; opacity: 0; }
.portal-kropp { position: absolute; inset: 0; transform-origin: 50% 100%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.portal-newton.framme .portal-kropp { animation: andas 4.2s ease-in-out infinite; }
/* Inne i knappen (bändandet) är han klippt längs gummikanten, och skuggan skulle synas som grå fläckar under
   fingrarna där han håller. Där får han en liten skugga tätt intill. */
.portal-newton.i-knappen .portal-kropp { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.portal-kropp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; visibility: hidden; }
.portal-kropp img.nu { visibility: visible; }
/* Filmrutorna (portal.js, FILM) ritas på en duk i figuren, i samma ruta som bilderna. */
.portal-kropp .portal-film { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.portal-kropp .portal-film.nu { visibility: visible; }
/* Glimten och koden i glasögonen när det röda pillret är valt (portal.js, ritaLinser). */
.portal-kropp .portal-glimt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Pillren i händerna: en osynlig tryckyta, större än pillret. Ingen ring runt dem (Rickard 23/10), det är Newtons
   min som svarar när pekaren kommer nära. */
.portal-hand {
  position: absolute; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; padding: 0;
  border: 0; background: none; pointer-events: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.portal-newton.landad .portal-hand { pointer-events: auto; }
/* Med mus är ytan lika stor som räckhållet där näven öppnas (portal.js, narPiller): en öppen näve går att ta. */
@media (hover: hover) {
  .portal-hand { width: 48%; margin: -24% 0 0 -24%; }
}

/* Repliken (Rickard 23/10): ingen ruta, bara text runt honom. Tecknen kommer ut ur hans mun och landar i meningen
   (portal.js, skriv). Han står över GeoGebras vita graf eller algebrafönster, så texten är mörk, med en ljus kant mot
   rutnätets linjer. Texten tar inga klick. */
/* Sedan 25/10 i Matrix-texternas typsnitt, och tecknen flyger och landar som ettor och nollor i mörkgrönt innan de
   blir bokstäver (portal.js, AV_EFTER, och .mt-t i matrix.css). */
/* Raden om varje piller står på knytnävens sida med raderna mot honom (portal.js, placera, sätter varje dels plats).
   Bubblan själv är en punkt i fönstrets hörn. */
.portal-bubbla {
  --mt-bit: #08872e;
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 10013; padding: 0; pointer-events: none;
  color: #1f1a16; font: 400 22px/1.38 var(--matrix-text);
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 10px rgba(255, 255, 255, .95);
  opacity: 0; transition: opacity .25s;
}
.portal-bubbla .mt-t::before { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 9px rgba(0, 255, 65, .5); }
.portal-bubbla.syns { opacity: 1; }
.pb-del { position: absolute; }
.pb-del { transition: opacity .25s; }
/* Svaret på pillret står på pillrets rad, och den andra raden tonas bort. */
.portal-bubbla.svar-rod .pb-del-bla, .portal-bubbla.svar-bla .pb-del-rod { opacity: 0; }
.pb-del-rod { text-align: right; }
.pb-del-bla { text-align: left; }
/* Under honom (smal skärm) står raderna i trappa, och var och en mot sin kant: den röda till vänster, den blå till höger. */
.portal-bubbla.under .pb-del-rod { text-align: left; }
.portal-bubbla.under .pb-del-bla { text-align: right; }
.pb-kod { margin: 0; }
.pb-ord { display: inline-block; white-space: nowrap; }
.pb-t { display: inline-block; opacity: 0; will-change: transform, opacity; }
.pb-rod { color: #c9301f; --mt-bit: #c9301f; }
.pb-bla { color: #1d63c4; --mt-bit: #1d63c4; }
/* Pillren i bubblan är för tangentbordet, ett under varje rad: de syns bara när ett av dem har fokus. */
.pb-val { display: flex; gap: 10px; height: 0; overflow: hidden; }
.pb-val:focus-within { height: auto; margin-top: 8px; pointer-events: auto; }
.pb-del-rod .pb-val, .portal-bubbla.under .pb-del-bla .pb-val { justify-content: flex-end; }
.portal-bubbla.under .pb-del-rod .pb-val { justify-content: flex-start; }
.portal-piller { width: 54px; height: 22px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .5); }
.portal-piller.rod { background: linear-gradient(#ff7a68, #c3241a); }
.portal-piller.bla { background: linear-gradient(#78c2ff, #1f5fc4); }
.portal-piller:focus-visible { outline: 2px solid #00ff41; outline-offset: 2px; }

@media (max-width: 560px) {
  .portal-bubbla { font-size: 18px; }
}