/* ══════════════════════════════════════════════════════════════════
   ARCH & GROUND — Intro-Variante

   Nur von index.html eingebunden. legal-notice.html und privacy.html
   bleiben unberührt.

   Ruhezustand: weiße Fläche, in der Mitte die Wortmarke mit einem
   kleinen Schimmer der Papierfarbe um sich herum.

   Übergang: am Scrollweg entlang, nicht als einmalig abgefeuerte
   Animation. Die Marke wandert nach oben links und wird dabei kleiner,
   der Schimmer wächst und löst sich auf, die weiße Decke wird
   durchsichtig und die eigentliche Seite blendet darunter auf. Solange
   der Übergang läuft, führt Zurückscrollen ihn auch wieder zurück.
   Erst wenn er einmal vollständig durch ist, verschwindet diese Ebene
   endgültig aus dem Dokument — ab da gibt es kein Zurück mehr.

   Alle Zwischenwerte setzt intro.js pro Bild; hier stehen nur die
   Ausgangszustände und was sich davon überhaupt bewegen darf.
   ══════════════════════════════════════════════════════════════════ */

.intro{
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.35rem;
  background:transparent;
  cursor:pointer;
}

/* Die weiße Decke. Liegt über der fertigen Seite und wird auf dem
   ersten Drittel des Wegs durchsichtig — dadurch blendet der echte
   Hintergrund auf, statt hart ausgetauscht zu werden. */
.intro__veil{
  position:absolute; inset:0; z-index:0;
  background:#fff;
  will-change:opacity;
  pointer-events:none;
}

/* Der Schimmer um den Namen: Papierfarbe, die weich ins Weiß ausläuft.
   Wächst über die Fläche und verliert sich dabei, weil der echte
   Hintergrund darunter längst dieselbe Farbe trägt. */
.intro__halo{
  position:absolute; top:50%; left:50%; z-index:1;
  width:clamp(9rem, 20vw, 15rem); aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle, var(--paper) 0%, var(--paper) 45%, rgba(247,245,240,0) 78%);
  will-change:transform, opacity;
  pointer-events:none;
}

.intro__mark{
  position:relative; z-index:2;
  font-family:var(--font); font-weight:700;
  font-size:clamp(1.75rem, 4.4vw, 3.25rem);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; line-height:1;
  transform-origin:center center;
  will-change:transform, opacity;
}
.intro__mark em{ font-style:normal; color:var(--grey); }

/* Nur die Bewegung liegt in der Animation — die Deckkraft steuert
   intro.js, sonst würden sich beide um dieselbe Eigenschaft streiten. */
.intro__hint{
  position:relative; z-index:2;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); opacity:.8;
  animation:intro-hint 2.2s ease-in-out infinite;
}
@keyframes intro-hint{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(4px); }
}

/* Solange der Übergang läuft, blenden diese drei Teile der Seite mit
   auf. Den Scroll hält intro.js an, nicht overflow:hidden — sonst
   käme am Ende die Bildlaufleiste zurück und würde das Layout um ihre
   Breite verspringen lassen. Genau das war das Ruckeln. */
html.intro-active{ scroll-behavior:auto; }
html.intro-active .topbar,
html.intro-active main,
html.intro-active .footer{ opacity:var(--intro-content, 0); }
html.intro-active .topbar__mark{ opacity:var(--intro-mark, 0); transition:none; }

@media (prefers-reduced-motion:reduce){
  .intro{ display:none; }
}

/* Rechtslinks auf der Eingangsebene. § 5 DDG verlangt „leicht
   erkennbar, unmittelbar erreichbar" — ohne diese Zeile wären
   Impressum und Datenschutzerklärung beim Erstbesuch erst nach dem
   ersten Scroll zu sehen. Sie liegen absolut am unteren Rand, damit
   die mittig stehende Wortmarke nicht verrutscht, und blenden mit
   demselben Zeitfenster ab wie der Scroll-Hinweis (intro.js). */
.intro__legal{
  position:absolute; z-index:2;
  left:50%; transform:translateX(-50%);
  bottom:clamp(1.5rem,4vh,2.5rem);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.35rem 1.1rem;
  max-width:min(92vw,44rem);
  font-size:.625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.intro__legal a{
  color:var(--muted); text-decoration:none;
  padding-block:.45rem;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.intro__legal a:hover{ color:var(--ink); border-bottom-color:var(--sage); }