/*! ImmoGod — App-Shell: Branded Auth-Loader + iOS-artige Seitenübergänge.
 *
 * Design-Philosophie
 * ------------------
 * Wir imitieren bewusst den Look von iOS Tab-/View-Switches:
 *   - reine Crossfades, keine Slides/Bounces
 *   - kurze Dauer (~220–260 ms)
 *   - Apple-typische Easings (nahe an `cubic-bezier(.32, .72, 0, 1)` für
 *     Eingänge, leicht schneller startend für Ausgänge)
 *   - zurückhaltende Akzente: das Logo pulsiert nicht als Motiv, sondern
 *     "atmet" nur über einen weichen roten Drop-Shadow
 *
 * Umsetzung
 * ---------
 *   - Chromium 126+: native Cross-Document View Transitions via
 *     `@view-transition { navigation: auto }` — wir tunen nur die
 *     Dauer/Easing der root-Transition.
 *   - Alle anderen (Safari, Firefox, älteres Chrome): JS-Fallback
 *     (transitions.js) setzt `html[data-page-leaving]`, CSS fadet den
 *     Body in 200ms weich aus.
 *   - Empfangsseite: Auth-Loader fadet in 300ms sanft weg — oder bei
 *     Seiten ohne Loader ein 260ms Body-Fade-In.
 *
 * Respekt vor `prefers-reduced-motion` — alle Animationen off.
 */

/* --- Native cross-doc view transitions (Chromium 126+) ---------------- */
@view-transition { navigation: auto; }

/* Tunt die Standard-root-Crossfade des Browsers auf iOS-Tempo. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

/* --- Fallback-Fade-Out beim Navigieren -------------------------------- */
/* Body fadet 200ms weich aus (Out-Easing: schneller Start, weicher Stop –
 * verhindert das "eckige" Ende und matcht iOS gut). Transform bewusst
 * NICHT angefasst (würde fixed-Positionen brechen). */
html[data-page-leaving] body {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.4, 0, .7, 1);
}

/* --- Auth-Boot-Overlay ------------------------------------------------- */
.auth-loading {
  position: fixed; inset: 0; z-index: 9999;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 26px;
  transition: opacity 300ms cubic-bezier(.32, .72, 0, 1),
              visibility 300ms linear;
}

/* Sobald auth-gate "ready" meldet → Overlay fadet weg. */
body[data-auth-state="ready"] .auth-loading,
body[data-auth-state="auth-ready"] .auth-loading {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.auth-loading__logo {
  width: 192px; height: 192px;
  display: flex; align-items: center; justify-content: center;
}
.auth-loading__logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Quiet "breathing" glow – kein Scale, keine Opacity auf dem Logo selbst. */
  animation: ig-logo-glow 2.6s ease-in-out infinite;
}
@keyframes ig-logo-glow {
  0%, 100% { filter: drop-shadow(0 10px 28px rgba(255, 56, 92, 0.16)); }
  50%      { filter: drop-shadow(0 14px 44px rgba(255, 56, 92, 0.30)); }
}

.auth-loading__bar {
  width: 220px; height: 2px;
  background: rgba(255, 56, 92, 0.10);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.auth-loading__bar::before {
  content: "";
  position: absolute; inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #FF385C, transparent);
  /* `alternate` lässt den Gleiter symmetrisch hin + zurück schweben,
   * ohne das stockende "Snap zurück zum Start" beim Re-Loop. Symmetrisches
   * ease-in-out damit beide Richtungen gleich weich laufen. */
  animation: ig-bar-slide 1.3s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
@keyframes ig-bar-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* --- Page-Enter für Seiten ohne eigenen Loader ------------------------- */
@keyframes ig-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body[data-page-entered="1"] {
  animation: ig-page-enter 260ms cubic-bezier(.32, .72, 0, 1) both;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-loading { transition: opacity 120ms linear, visibility 120ms linear; }
  .auth-loading__logo img,
  .auth-loading__bar::before,
  body[data-page-entered="1"] { animation: none; }
  html[data-page-leaving] body { transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01ms; }
}