/* ══════════════════════════════════════════════════════════════════════════
   LADEGRAFIK „Drei Scheiben, ein Zeichen"
   Konzept: `.nomad/ANIMATIONS-KONZEPT.md` §1 · Raum: `raum.css`

   Drei Glasscheiben stehen gefächert im Raum, jede mit einem Bereichszeichen.
   Der Ladefortschritt (`--laden`, 0…1) zieht sie zusammen; stehen sie
   deckungsgleich, verschmelzen die Zeichen zum HB im Logo-Oval.
   Alles andere leitet sich per calc() aus dieser einen Variablen ab.
   ══════════════════════════════════════════════════════════════════════════ */
.ld{position:fixed; inset:0; z-index:9000; display:grid; place-items:center; gap:2rem;
  grid-auto-rows:min-content; align-content:center;
  background:radial-gradient(120% 90% at 50% 34%,#FFFFFF 0%,#F1F8F4 62%,#E9F2EC 100%);
  --laden:0; --auf:calc(1 - var(--laden));
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.1,.64,1)}
.ld--weg{opacity:0; transform:scale(1.06); pointer-events:none}
html.laedt{overflow:hidden}

.ld-buehne{position:relative; width:clamp(260px,42vw,380px); aspect-ratio:1;
  perspective:760px; perspective-origin:50% 46%; display:grid; place-items:center}
.ld-welt{position:relative; width:46%; height:52%; transform-style:preserve-3d;
  /* Zu Beginn steht die Gruppe leicht gekippt, am Ende frontal. */
  transform:rotateX(calc(var(--auf) * 14deg)) rotateY(calc(var(--auf) * -10deg))}

/* ── Die drei Scheiben ─────────────────────────────────────────────────── */
.ld-e{position:absolute; inset:0; transform-style:preserve-3d;
  /* Gefächert bei 0, deckungsgleich bei 1 — beides aus derselben Variablen. */
  transform:translateZ(calc(var(--auf) * (var(--n) - 2) * 130px))
            translateX(calc(var(--auf) * (var(--n) - 2) * 112px))
            translateY(calc(var(--auf) * (var(--n) - 2) * -16px))
            rotateY(calc(var(--auf) * (var(--n) - 2) * 44deg))}
.ld-scheibe{position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
  display:grid; place-items:center; color:var(--akzent);
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 46px -28px rgba(14,33,25,.5), 0 1px 0 rgba(255,255,255,.95) inset}
.ld-scheibe::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--akzent),transparent)}
.ld-glanz{position:absolute; inset:-45%; pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.92) 50%,transparent 58%);
  animation:ld-glanz 3.4s ease-in-out infinite; animation-delay:calc(var(--n) * -.7s)}
@keyframes ld-glanz{0%,58%{transform:translateX(-62%)} 88%,100%{transform:translateX(62%)}}
.ld-zeichen{width:62%; height:62%;
  /* Kurz vor Schluss verblassen die Einzelzeichen zugunsten der Marke. */
  opacity:calc(1 - max(0, (var(--laden) - .8)) * 5)}
.ld-spiegel{position:absolute; left:6%; right:6%; top:100%; height:26%;
  background:linear-gradient(180deg,rgba(14,33,25,.16),transparent 70%);
  filter:blur(5px); border-radius:50%;
  opacity:calc(.5 + var(--laden) * .5); transform:scaleX(calc(.7 + var(--laden) * .3))}

/* ── Die Marke: erscheint, wenn die Scheiben deckungsgleich stehen ─────── */
/* Die Marke lag bei Z=0 zwischen den Scheiben und wurde von der vordersten
   verdeckt. Sie gehört VOR alle drei — deshalb ein eigener Z-Versatz, der
   größer ist als der größte Scheibenabstand. */
.ld-marke{position:absolute; inset:-24%; display:grid; place-items:center;
  color:var(--signal); pointer-events:none; transform-style:preserve-3d;
  opacity:max(0, (var(--laden) - .82) * 5.6);
  transform:translateZ(190px) scale(calc(.82 + max(0, (var(--laden) - .82)) * 1.1))}
.ld-marke svg{width:100%; height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,148,92,.32))}

/* ── Der Fortschrittsbogen läuft außen mit ─────────────────────────────── */
.ld-bogen{position:absolute; inset:0; color:var(--signal); transform:rotate(-90deg)}
.ld-bogen-lauf{stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--laden) * 100);
  transition:stroke-dashoffset .25s ease-out}

.ld-text{text-align:center; margin:0}
.ld-text b{display:block; font-family:var(--font-head); font-size:1.05rem; color:var(--ink);
  letter-spacing:-.01em}
.ld-text small{display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-top:.3rem}

html.dark .ld{background:radial-gradient(120% 90% at 50% 34%,#1E2D26 0%,#16241E 62%,#131E19 100%)}
html.dark .ld-scheibe{background:linear-gradient(158deg,rgba(40,58,50,.84),rgba(28,45,37,.56));
  border-color:rgba(255,255,255,.14)}
html.dark .ld-glanz{background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%)}
html.dark .ld-spiegel{background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 70%)}

@media (prefers-reduced-motion: reduce){
  /* Die Scheiben stehen von Anfang an deckungsgleich, nur der Bogen läuft. */
  .ld-e{transform:none}
  .ld-welt{transform:none}
  .ld-glanz{animation-duration:30s}
}