/* Seitenuebergaenge (passi 2026-10-12: "hochwertiger, nichts Billiges a la Ausfliegen, schlicht, kurz").
   Eigene Loesung statt der Browser-Funktion "View Transitions", damit es in ALLEN Browsern gleich laeuft
   (auch Firefox). Zwei Haelften: die alte Seite spielt ".kc-tx-out" und navigiert danach, die neue startet
   mit ".kc-tx-in" (vom Inline-Skript im <head> gesetzt, noch vor dem ersten Bild) und gibt sich frei.
   Gezeichnet wird nur auf html::before/::after ueber der Seite -- der Seiteninhalt selbst wird nie
   verschoben oder gefiltert (sonst wuerden fixierte Elemente wie das Trinklog kurz springen).
   Varianten: soft (weiches Ueberblenden mit Unschaerfe), neon (pinke Neon-Wischlinie), kc (KC-Logo-Blitz). */

html.kc-tx-out::before, html.kc-tx-in::before,
html.kc-tx-out::after, html.kc-tx-in::after {
  content: ''; position: fixed; z-index: 2147483646; pointer-events: none;
}
html.kc-tx-out::before, html.kc-tx-in::before { inset: 0; }

/* ---- soft: abdunkeln + unscharf, neue Seite schaerft sich herein ---- */
html.kc-tx-soft.kc-tx-out::before { animation: kc-soft-cover .26s ease-in forwards; }
html.kc-tx-soft.kc-tx-in::before { animation: kc-soft-reveal .38s ease-out both; }
@keyframes kc-soft-cover {
  from { background: rgba(19, 18, 21, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  to { background: rgba(19, 18, 21, 1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@keyframes kc-soft-reveal {
  from { background: rgba(19, 18, 21, 1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  to { background: rgba(19, 18, 21, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}

/* ---- neon: eine leuchtende Linie faehrt von links nach rechts, dahinter Schwarz -- auf der neuen Seite
   faehrt sie weiter und gibt die Seite hinter sich frei ---- */
html.kc-tx-neon.kc-tx-out::before, html.kc-tx-neon.kc-tx-in::before { background: #000; }
html.kc-tx-neon.kc-tx-out::after, html.kc-tx-neon.kc-tx-in::after {
  top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px;
  background: #ffe3f1;
  box-shadow: 0 0 6px #fff, 0 0 16px #ff3d94, 0 0 34px #ff3d94, 0 0 70px rgba(255, 61, 148, .7);
}
html.kc-tx-neon.kc-tx-out::before { animation: kc-neon-cover .32s cubic-bezier(.65, 0, .35, 1) forwards; }
html.kc-tx-neon.kc-tx-out::after { animation: kc-neon-line .32s cubic-bezier(.65, 0, .35, 1) forwards; }
html.kc-tx-neon.kc-tx-in::before { animation: kc-neon-reveal .4s cubic-bezier(.65, 0, .35, 1) both; }
html.kc-tx-neon.kc-tx-in::after { animation: kc-neon-line .4s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes kc-neon-cover { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kc-neon-reveal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes kc-neon-line { from { transform: translateX(0); } to { transform: translateX(100vw); } }

/* ---- kc: kurz schwarz, das KC-Logo glimmt neon auf und verschwindet ---- */
html.kc-tx-kc.kc-tx-out::before { animation: kc-black-in .22s ease-in forwards; }
html.kc-tx-kc.kc-tx-in::before { background: #000; animation: kc-black-out .3s ease-out .5s both; }
html.kc-tx-kc.kc-tx-in::after {
  top: 50%; left: 50%; width: 180px; height: 120px; margin: -60px 0 0 -90px;
  background: url('/img/logo-original.png') center / contain no-repeat;
  filter: drop-shadow(0 0 10px #ff3d94) drop-shadow(0 0 26px rgba(255, 61, 148, .8));
  animation: kc-logo-glimmer .72s ease-out both;
}
@keyframes kc-black-in { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 1); } }
@keyframes kc-black-out { from { background: rgba(0, 0, 0, 1); } to { background: rgba(0, 0, 0, 0); } }
@keyframes kc-logo-glimmer {
  0% { opacity: 0; transform: scale(.9); }
  35% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  html.kc-tx-out::before, html.kc-tx-in::before, html.kc-tx-out::after, html.kc-tx-in::after { animation: none !important; display: none; }
}