/* ─────────────────────────────────────────
   PAGE TRANSITION — Stinger / Wipe
   Ein schwarzer Balken fährt über den Screen,
   neue Seite erscheint, Balken fährt raus.
───────────────────────────────────────── */

/* Haupt-Overlay — full viewport, initial unsichtbar */
#page-stinger {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
}

/* Linker Flügel (fährt von links rein) */
#page-stinger .wing {
  position: absolute;
  inset: 0;
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Logo-Blitz in der Mitte während des Übergangs */
#page-stinger .stinger-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  width: 120px;
  pointer-events: none;
}

/* State: enter — Balken fährt rein */
#page-stinger.state-enter .wing {
  animation: stinger-in 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
#page-stinger.state-enter .stinger-logo {
  animation: logo-pop 0.45s ease forwards 0.15s;
}

/* State: exit — Balken fährt raus */
#page-stinger.state-exit .wing {
  animation: stinger-out 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  transform-origin: right center;
}
#page-stinger.state-exit .stinger-logo {
  animation: logo-fade 0.2s ease forwards;
}

/* Keyframes */
@keyframes stinger-in {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes stinger-out {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes logo-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes logo-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Seiten-Content: beim ersten Load mit fade-in starten */
body.page-entering #et-main-area,
body.page-entering main,
body.page-entering #main-content,
body.page-entering .page-content {
  animation: page-reveal 0.35s ease forwards 0.05s;
  opacity: 0;
}

@keyframes page-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}