/* ==========================================================================
   Seiten-Übergang: weißer Kreis, breitet sich von oben rechts aus,
   zoomt auf der neuen Seite mittig wieder zurück.
   ========================================================================== */

#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff; /* Farbe des Kreises */
  pointer-events: none;

  /* Default-/Ladezustand: voll ausgebreitet, mittig verankert –
     so ist beim frischen Laden der neuen Seite sofort alles weiß
     abgedeckt, bevor JS den Kreis wieder einzieht. */
  -webkit-clip-path: circle(150vmax at 50% 50%);
  clip-path: circle(150vmax at 50% 50%);

  transition: clip-path 0.7s cubic-bezier(.65, 0, .35, 1),
              -webkit-clip-path 0.7s cubic-bezier(.65, 0, .35, 1);
}

/* Seite ist geladen: Kreis zieht sich mittig auf 0 zusammen (Zoom zurück) */
body.pt-revealed #page-transition-overlay {
  -webkit-clip-path: circle(0 at 50% 50%);
  clip-path: circle(0 at 50% 50%);
}

/* Klick auf einen Link: Kreis breitet sich schnell von oben rechts aus */
body.pt-leaving #page-transition-overlay {
  -webkit-clip-path: circle(150vmax at 100% 0%);
  clip-path: circle(150vmax at 100% 0%);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(.55, 0, .85, .35); /* schnell/ease-in */
  pointer-events: all;
}

/* Hilfsklasse: Kreis ohne Transition exakt auf 0 bei oben-rechts "parken",
   bevor die Ausbreitung startet – verhindert ein diagonales Wandern des
   Kreismittelpunkts von der Bildschirmmitte nach oben rechts. */
body.pt-reset #page-transition-overlay {
  transition: none !important;
  -webkit-clip-path: circle(0 at 100% 0%);
  clip-path: circle(0 at 100% 0%);
}