/* ============================================================
   Morelyte – sidövergång
   Vid klick på en länk till en annan sida växer logotypens symbol
   från sin plats i menyboxen tills dess mörka kärna fyller hela
   skärmen, sidan byts i det enfärgade läget, och på den nya sidan
   krymper symbolen tillbaka till menyboxen.
   .pt är overlayn (symbolkopia + bakgrund i kärnans färg). Ett inline-script
   i <head> sätter html.pt-in innan första målningen på den nya
   sidan, så att den börjar täckt. transition.js animerar.
   ============================================================ */

.pt {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}
.pt.is-on { visibility: visible; }

.pt__bg {
  position: absolute;
  inset: 0;
  background: #1b2120;   /* samma som symbolens kärna, som fyller skärmen i toppläget */
  opacity: 0;
}

.pt__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  transform-origin: 50% 50%;
  will-change: transform;
}
.pt__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Startläge på en sida som öppnats via övergången: helt täckt i kärnans
   färg. Symbolen göms tills transition.js lagt den i rätt skala. */
html.pt-in .pt { visibility: visible; }
html.pt-in .pt__bg { opacity: 1; }
html.pt-in .pt__mark { visibility: hidden; }

/* Menyboxen ska stå still när symbolen landar i den: ingen inflygning,
   inte heller efteråt (pt-landed ligger kvar) */
html.pt-in .ml-nav.is-ready,
html.pt-entering .ml-nav.is-ready,
html.pt-landed .ml-nav.is-ready { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  html.pt-in .ml-nav.is-ready { animation: none; }
}