/* Reconnect overlay — abgeleitet aus deploy/traefik/maintenance.html */

/* Overlay: standardmäßig versteckt; nur in aktiven Zuständen sichtbar */
#components-reconnect-modal{
  --bg1:#eef2f5;--bg2:#e2e8ee;--card:#ffffff;--fg:#101821;
  --muted:#5c6b78;--accent:#00963f;--accent-fg:#ffffff;
  --border:rgba(16,24,33,.10);--shadow:rgba(16,24,33,.14);

  display:none;
  position:fixed;inset:0;z-index:20000;
  align-items:center;justify-content:center;padding:24px;
  color:var(--fg);
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg1));
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  #components-reconnect-modal{
    --bg1:#0d1317;--bg2:#131b22;--card:#171f27;--fg:#e9eef2;
    --muted:#9aa7b2;--accent:#34c26f;--accent-fg:#08210f;
    --border:rgba(255,255,255,.09);--shadow:rgba(0,0,0,.5);
  }
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.reconnect-dead{display:flex}

#components-reconnect-modal .card{
  width:100%;max-width:520px;background:var(--card);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 18px 50px -12px var(--shadow);
  padding:40px 36px;text-align:center;box-sizing:border-box;
}
#components-reconnect-modal .logo{width:100%;max-width:280px;margin:0 auto 30px;color:var(--fg)}
#components-reconnect-modal .logo svg{width:100%;height:auto;display:block}
#components-reconnect-modal .scene{width:100%;height:104px;margin:0 auto 20px;color:var(--accent);overflow:hidden}
#components-reconnect-modal .scene svg{width:100%;height:100%;display:block}

/* Szene-Keyframes — verbatim aus der 503-Seite */
@keyframes sail{from{transform:translateX(-145px);opacity:1}94%{opacity:1}to{transform:translateX(210px);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-1.8px) rotate(1.1deg)}}
@keyframes drift{from{transform:translateX(-36px)}to{transform:translateX(0)}}
@keyframes puff{0%{transform:translate(0,0) scale(.35);opacity:0}15%{opacity:.5}100%{transform:translate(-14px,-11px) scale(2);opacity:0}}
@keyframes fin{from{opacity:0}to{opacity:1}}
@keyframes arr{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes bm{0%,6%{transform:translate(82px,33px)rotate(67deg)translate(-82px,-33px)}34%,44%{transform:translate(82px,33px)rotate(-57deg)translate(-82px,-33px)}72%,100%{transform:translate(82px,33px)rotate(67deg)translate(-82px,-33px)}}
@keyframes sk{0%,6%{transform:translate(82px,16px)rotate(64deg)translate(-82px,-16px)}34%,44%{transform:translate(82px,16px)rotate(-78deg)translate(-82px,-16px)}72%,100%{transform:translate(82px,16px)rotate(64deg)translate(-82px,-16px)}}
@keyframes sp{0%,6%{transform:translate(82px,5px)rotate(-131deg)translate(-82px,-5px)}34%,44%{transform:translate(82px,5px)rotate(135deg)translate(-82px,-5px)}72%,100%{transform:translate(82px,5px)rotate(-131deg)translate(-82px,-5px)}}
@keyframes cg{0%,42%{opacity:0}44%,74%{opacity:.6}78%,100%{opacity:0}}
@keyframes pk{0%,42%{opacity:.6}46%,82%{opacity:0}86%,100%{opacity:.6}}
@keyframes sn{0%,70%{opacity:0}74%,95%{opacity:.6}99%,100%{opacity:0}}
#components-reconnect-modal #voyage{opacity:0;animation:sail 10s linear both}
#components-reconnect-modal #dock{transform-box:fill-box;transform-origin:50% 100%;animation:arr 7s ease-out 12s both}
#components-reconnect-modal .hb{animation:fin 2s linear 10s both}
#components-reconnect-modal .bob{transform-box:fill-box;transform-origin:center;animation:bob 3s ease-in-out infinite}
#components-reconnect-modal .water{animation:drift 3s linear infinite}
#components-reconnect-modal .puff{fill:var(--muted);opacity:0;transform-box:fill-box;transform-origin:center;animation:puff 2.7s linear infinite}
#components-reconnect-modal .p2{animation-delay:.9s}
#components-reconnect-modal .p3{animation-delay:1.8s}
#components-reconnect-modal .bm{animation:bm 10s ease-in-out 20s infinite backwards}
#components-reconnect-modal .sk{animation:sk 10s ease-in-out 20s infinite backwards}
#components-reconnect-modal .sp{animation:sp 10s ease-in-out 20s infinite backwards}
#components-reconnect-modal .cg{animation:cg 10s linear 20s infinite backwards}
#components-reconnect-modal .pk{animation:pk 10s linear 20s infinite backwards}
#components-reconnect-modal .sn{animation:sn 10s linear 20s infinite backwards}
#components-reconnect-modal .win{fill:var(--card)}

/* Regen: nur im Endzustand; Accent gedimmt/entsättigt für Stimmung */
#components-reconnect-modal .rain{display:none;stroke-width:.8;opacity:.55}
@keyframes rainfall{0%{transform:translateY(-12px);opacity:0}12%{opacity:.55}100%{transform:translateY(60px);opacity:0}}
#components-reconnect-modal.components-reconnect-failed .rain,
#components-reconnect-modal.reconnect-dead .rain{display:block}
#components-reconnect-modal.components-reconnect-failed .rain line,
#components-reconnect-modal.reconnect-dead .rain line{
  animation:rainfall .9s linear infinite;
}
#components-reconnect-modal .rain line:nth-child(3n){animation-delay:.15s}
#components-reconnect-modal .rain line:nth-child(3n+1){animation-delay:.35s}
#components-reconnect-modal .rain line:nth-child(3n+2){animation-delay:.6s}
#components-reconnect-modal.components-reconnect-failed .scene,
#components-reconnect-modal.reconnect-dead .scene{
  color:var(--muted);filter:saturate(.5) brightness(.85);
}

/* Zustandsabhängige Textblöcke: nur der passende ist sichtbar */
#components-reconnect-modal .state-retrying,
#components-reconnect-modal .state-failed,
#components-reconnect-modal .state-dead{display:none}
#components-reconnect-modal.components-reconnect-show .state-retrying,
#components-reconnect-modal.components-reconnect-retrying .state-retrying,
#components-reconnect-modal.components-reconnect-paused .state-retrying{display:block}
#components-reconnect-modal.components-reconnect-failed .state-failed{display:block}
/* Terminaler "Circuit weg"-Zustand (JS setzt .reconnect-dead) gewinnt über
   jede noch anhaftende Blazor-Übergangsklasse (show/retrying/paused/failed). */
#components-reconnect-modal.reconnect-dead .state-retrying,
#components-reconnect-modal.reconnect-dead .state-failed{display:none}
#components-reconnect-modal.reconnect-dead .state-dead{display:block}

#components-reconnect-modal h1{margin:0 0 12px;font-size:1.55rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
#components-reconnect-modal p{margin:0 auto;max-width:40ch;font-size:1rem;line-height:1.6;color:var(--muted)}
#components-reconnect-modal .status{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
  font-size:.92rem;color:var(--muted);
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
#components-reconnect-modal .retry{display:inline-flex;align-items:center;gap:9px}
#components-reconnect-modal .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
#components-reconnect-modal .btn{
  appearance:none;cursor:pointer;border:0;border-radius:10px;
  background:var(--accent);color:var(--accent-fg);
  font:inherit;font-weight:600;font-size:.92rem;padding:10px 20px;
  transition:filter .15s ease;
}
#components-reconnect-modal .btn:hover{filter:brightness(1.06)}
#components-reconnect-modal .btn:active{filter:brightness(.94)}
#components-reconnect-modal .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#components-reconnect-modal .foot{margin-top:22px;font-size:.8rem;color:var(--muted);opacity:.85}

@media (prefers-reduced-motion:reduce){
  #components-reconnect-modal #voyage,
  #components-reconnect-modal #dock,
  #components-reconnect-modal .hb,
  #components-reconnect-modal .bob,
  #components-reconnect-modal .water,
  #components-reconnect-modal .puff,
  #components-reconnect-modal .bm,
  #components-reconnect-modal .sk,
  #components-reconnect-modal .sp,
  #components-reconnect-modal .cg,
  #components-reconnect-modal .pk,
  #components-reconnect-modal .sn,
  #components-reconnect-modal .dot,
  #components-reconnect-modal .rain line{animation:none}
}