/* ============================================================
   jedesto – Warp-Seitenübergang (Variante C, 1 s)
   Cross-Document View Transitions, nur für den Typ "warp".

   Die Begrenzung auf den Warp passiert in warp.js: ungewollte
   Übergänge werden dort per skipTransition() abgebrochen. Dieses
   CSS muss daher nur die Warp-Animation selbst definieren.
   ============================================================ */

/* Opt-in für Cross-Document View Transitions.
   KEINE festen types hier: der Typ (warp ODER whirl) wird ausschließlich
   in warp.js per pageswap/pagereveal gesetzt. Eine statische types-Angabe
   würde sonst zusätzlich mitgetragen und beide CSS-Blöcke kollidieren. */
@view-transition {
  navigation: auto;
}

/* Warp-Animation (greift nur, wenn warp.js den Typ "warp" gesetzt
   und die Transition NICHT abgebrochen hat). */
html:active-view-transition-type(warp)::view-transition-old(root){
  animation: jd-warp-out 1s cubic-bezier(.4,0,.85,.15) both;
  transform-origin:50% 50%;
  will-change:transform, opacity;
}
html:active-view-transition-type(warp)::view-transition-new(root){
  animation: jd-warp-in 1s ease both;
  transform-origin:50% 50%;
  will-change:transform, opacity;
}

/* ----------------------------------------------------------------
   WHIRL: Wurmloch-"zurück" auf eine Unterseite (nicht index).
   NUR die alte Seite dreht ein/schrumpft (gleiche Bewegung wie Warp,
   ohne Sterncanvas). Die neue Seite erscheint neutral: explizit
   animation:none, damit sie nicht zusätzlich crossfadet, sondern ihre
   seiteneigene Eingangs-Animation ungestört unter dem Overlay läuft.
   ---------------------------------------------------------------- */
html:active-view-transition-type(whirl)::view-transition-old(root){
  animation: jd-whirl-out .55s cubic-bezier(.5,0,.75,0) both;
  transform-origin:100% 0%;  /* obere rechte Ecke = Wurmloch in der Nav */
  will-change:transform, opacity;
  z-index:2;                 /* alte Seite OBEN: Schrumpfen bleibt sichtbar */
}
html:active-view-transition-type(whirl)::view-transition-new(root){
  animation:none;            /* neutral: kein Effekt, kein Crossfade */
  z-index:1;                 /* neue Seite darunter, kommt zum Vorschein */
}

/* Alte Seite: löst sich auf – ausblenden + dezent wegzoomen (KEINE Drehung) */
@keyframes jd-warp-out{
  from{ transform:scale(1);    opacity:1; }
  to  { transform:scale(1.08); opacity:0; }
}
/* Neue Seite: sanft einblenden (KEINE Drehung) */
@keyframes jd-warp-in{
  0%   { opacity:0; }
  40%  { opacity:0; }
  100% { opacity:1; }
}
/* Whirl: alte Seite schrumpft in die Wurmloch-Ecke (unten links) und
   blendet aus – KEINE Drehung, klar anders als das zentrale Eindrehen
   des Warp. transform-origin (0% 100%) bestimmt die Schrumpf-Richtung. */
@keyframes jd-whirl-out{
  from{ transform:scale(1);    opacity:1; }
  to  { transform:scale(.04);  opacity:0; }
}

/* Reduced-motion: keine Warp-Show */
@media (prefers-reduced-motion: reduce){
  html:active-view-transition-type(warp)::view-transition-old(root),
  html:active-view-transition-type(warp)::view-transition-new(root),
  html:active-view-transition-type(whirl)::view-transition-old(root),
  html:active-view-transition-type(whirl)::view-transition-new(root){
    animation:none;
  }
}