/* ORKAN - Seitenübergang.
   Liegt ueber transition.css und ersetzt dessen zurueckhaltende Blende
   durch einen filmischen Wechsel.

   Was den Unterschied macht, ist nicht die Laenge, sondern dass drei Dinge
   gleichzeitig passieren: die alte Seite faellt weg UND wird unscharf UND
   dunkelt ab. Eine reine Deckkraftblende sieht nach Website aus, diese
   Kombination nach Schnitt.

   Dazu kommt eine Deckschicht in der Hintergrundfarbe, die kurz
   durchzieht. Dadurch gibt es keinen Moment, in dem zwei Seiten
   halbdurchsichtig uebereinanderliegen, und genau der Moment ist das,
   was billig wirkt. */

/* Der browsereigene Dokumentwechsel wird abgeschaltet. Er lief je nach
   Browser mal animiert und mal gar nicht, und beides gleichzeitig mit der
   eigenen Blende ergibt Doppelbewegung. uebergang.js macht es selbst. */
@view-transition { navigation: none; }

:root{
  --tr-duration:.86s;
  /* Vorher cubic-bezier(.66,0,.2,1): traege an, dann schnell durch. Genau
     dieses Zuschnappen in der Mitte war der Schlag, den man gespuert hat.
     Diese Kurve laeuft von Anfang an und bremst zum Schluss weich aus. */
  --tr-ease:cubic-bezier(.33,0,.16,1);
  --tr-shift:0px;                        /* die Basisdatei verschiebt nicht mehr */
}

/* !important, weil transition.css die Animation abschaltet, solange die
   Klasse tr-going fehlt. Genau daran ist der Uebergang vorher gescheitert:
   der Browser hat den Wechsel gemacht, nur ohne Bewegung. Wir haengen das
   hier nicht mehr an eine Klasse, die jemand anders setzen muss. */
::view-transition-old(root){
  animation:orkan-weg var(--tr-duration) var(--tr-ease) both !important;
  transform-origin:50% 46%;
}
::view-transition-new(root){
  animation:orkan-her var(--tr-duration) var(--tr-ease) both !important;
  transform-origin:50% 46%;
}

/* Die Werte sind bewusst zurueckgenommen. Vorher ging die Seite auf
   brightness .14 und blur 20px herunter, also praktisch auf Schwarz und
   voellig unscharf. Das liest sich nicht als Schnitt, sondern als
   Stromausfall. Ein Film blendet ueber, er loescht nicht. */
@keyframes orkan-weg{
  0%   { opacity:1; transform:scale(1);      filter:blur(0)   brightness(1)   saturate(1) }
  55%  { opacity:.62; transform:scale(1.012); filter:blur(4px) brightness(.72) saturate(.9) }
  100% { opacity:0; transform:scale(1.022);  filter:blur(9px) brightness(.5)  saturate(.8) }
}
@keyframes orkan-her{
  0%   { opacity:0; transform:scale(1.02);   filter:blur(10px) brightness(.52) saturate(.8) }
  48%  { opacity:.78; transform:scale(1.007); filter:blur(3px)  brightness(.84) saturate(.94) }
  100% { opacity:1; transform:scale(1);      filter:blur(0)    brightness(1)   saturate(1) }
}

/* Die alte Seite liegt oben und gibt den Blick frei, statt dass die neue
   sich von unten dagegendrueckt. Sonst sieht man beide gleichzeitig. */
::view-transition-old(root){ z-index:2 }
::view-transition-new(root){ z-index:1 }

/* Der Kopf bleibt stehen und wandert nicht mit */
::view-transition-group(persist){ animation-duration:var(--tr-duration) }

/* ---------------- Deckschicht ----------------
   Liegt auf jeder Seite bereit und zieht beim Klick durch. Der Verlauf
   laeuft von unten hoch, weil die Seite selbst nach oben weggeht. */
.vorhang{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 58%, #0A1219 0%, #06090C 62%);
  opacity:0;
  /* Kein Verschieben mehr. Der Vorhang fuhr von unten herein, waehrend die
     Seite gleichzeitig nach hinten wegging: zwei Bewegungen gegeneinander,
     und das war der harte Ruck. Jetzt liegt er einfach auf. */
  transition:opacity .5s var(--tr-ease);
}
html.ue-raus .vorhang{ opacity:.92 }
html.ue-rein .vorhang{ opacity:.92 }

/* ---------------- Eigener Weg ----------------
   Greift immer, auch wenn der Browser keine dokumentuebergreifenden View
   Transitions kann. Der Inhalt faehrt heraus und drueben wieder herein. */
html.ue-raus body{
  opacity:0;
  transform:scale(1.018);
  filter:blur(8px) brightness(.55) saturate(.82);
  transform-origin:50% 46%;
  transition:opacity .52s var(--tr-ease),
             transform .52s var(--tr-ease),
             filter .52s var(--tr-ease);
}
html.ue-rein body{
  opacity:0;
  transform:scale(1.016);
  filter:blur(9px) brightness(.55) saturate(.82);
  transform-origin:50% 46%;
}
/* Ruhezustand: filter und transform muessen wirklich WEG (none), nicht auf
   neutral stehen. Ein body mit filter — auch blur(0) — wird zum Containing
   Block fuer alles mit position:fixed. Dann haengen Overlays, Insel, Topbar
   und der Gate-Layer am Dokument statt am Bildschirm, das Gate-Video wird
   dokumenthoch und hinter dem Footer entsteht ein leerer schwarzer Raum.
   Genau so sah die Seite kaputt aus. */
html:not(.ue-rein):not(.ue-raus) body{
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity var(--tr-duration) var(--tr-ease),
             transform var(--tr-duration) var(--tr-ease),
             filter var(--tr-duration) var(--tr-ease);
}

/* Markenzeichen mittig, waehrend der Vorhang steht. Sehr kurz, sehr klein,
   sonst wird aus dem Uebergang eine Ladeanimation. */
.vorhang::after{
  content:"ORKAN";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Archivo',sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.62em;text-indent:.62em;color:rgba(196,226,242,.4);
  /* Nur noch andeuten. Vorher sprang das Wort mit einer eigenen Skalierung
     ins Bild und machte aus dem Uebergang eine Ladeanzeige. */
  opacity:0;transition:opacity .34s var(--tr-ease);
}
html.ue-raus .vorhang::after,
html.ue-rein .vorhang::after{ opacity:1 }

/* ---------------- Ersatzweg ----------------
   Kann der Browser den Wechsel nicht selbst (Safari ohne dokument-
   uebergreifende View Transitions, aeltere Fassungen), setzt transition.js
   die Klassen tr-fallback, tr-in und tr-out. Ohne eigene Regeln laeuft dort
   nur die schlichte Blende aus transition.css, und genau das fuehlt sich
   hart an. Hier bekommt der Ersatzweg dieselbe filmische Bewegung. */
.tr-fallback body{
  opacity:0;
  transform:scale(1.018);
  filter:blur(8px) brightness(.56) saturate(.84);
  transform-origin:50% 46%;
  transition:opacity var(--tr-duration) var(--tr-ease),
             transform var(--tr-duration) var(--tr-ease),
             filter var(--tr-duration) var(--tr-ease);
  will-change:opacity,transform,filter;
}
.tr-fallback.tr-in body{
  opacity:1;
  transform:none;
  filter:none;   /* nicht blur(0): siehe Containing-Block-Falle oben */
}
.tr-fallback.tr-out body{
  opacity:0;
  transform:scale(1.02);
  filter:blur(9px) brightness(.52) saturate(.8);
  /* Hinaus schneller als herein. Warten fuehlt sich laenger an als Ankommen. */
  transition-duration:calc(var(--tr-duration) * .58);
}
/* Ohne JavaScript bliebe die Seite unsichtbar stehen */
.tr-fallback:not(.tr-in):not(.tr-out) body{ animation:tr-failsafe 0s 1.2s forwards }

/* ---------------- Ankunft ----------------
   Der Inhalt der neuen Seite steigt zusaetzlich leicht auf. Das laeuft
   parallel zur Blende und macht den Wechsel raeumlich statt flach. */
@media (prefers-reduced-motion:no-preference){
  .ankunft > *{
    animation:orkan-ankunft .9s var(--tr-ease) both;
  }
  .ankunft > *:nth-child(2){ animation-delay:.06s }
  .ankunft > *:nth-child(3){ animation-delay:.12s }
  .ankunft > *:nth-child(4){ animation-delay:.18s }
}
@keyframes orkan-ankunft{
  from{ opacity:0; transform:translateY(26px); filter:blur(10px) }
  to  { opacity:1; transform:none;             filter:blur(0) }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .vorhang{ display:none }
  .ankunft > *{ animation:none }
}