/* ==========================================================
   Seelenpfad · Intro-Varianten (Ladebild + Ankunft)
   Aktiv mit ?intro=1 … 4 (oder später mit der gewählten Standard-Variante im <head>).
   Ohne Loader, ohne JS oder bei reduzierter Bewegung: nichts davon sichtbar.
   Steuerung: intro.js. Übergabe an die Hero-Ankunft: script.js (SeelenLoader).
   ========================================================== */

.loader { display: none; }
html.has-loader { overflow: hidden; }
html.has-loader .loader {
  display: block; position: fixed; inset: 0; z-index: 80;
  touch-action: none; cursor: default; -webkit-tap-highlight-color: transparent;
  --stage: min(72vw, 44vh, 370px);   /* Emblem-Bild ist quadratisch um die Kreismitte, Kreis ≈ 85 % davon */
  /* Geometrie des Emblems (Hauptvariante, Federn nach unten, 2026-10-08) in Prozent des Bildes */
  --sonne-x: 51.8%; --sonne-y: 34.1%;
}
.loader__bg { position: absolute; inset: 0; background: var(--c-morgen); }
/* Papier mit kreisrundem Loch (Varianten 2 und 4): Mittelpunkt --mx/--my, Radius --r */
.loader__bg.is-loch {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 1.5px));
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 1.5px));
}
/* Variante 4: Licht statt Pforte – weiche Kante */
.loader__bg.is-loch.is-weich {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 60px));
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 60px));
}
/* Variante 3: Nacht über Dämmerung über Papier; jede Schicht blendet sich nur weg */
.loader__daemmerung {
  position: absolute; inset: 0;
  background: radial-gradient(130% 75% at 50% 100%, #f0b878 0%, #d9a679 22%, #c4906a 42%, #6b5a52 72%, #2a2b28 100%);
}
.loader__nacht { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 110%, #1b2620 0%, #0c120f 55%, #080c0a 100%); }
.loader__sterne { position: absolute; inset: 0; width: 100%; height: 100%; }

.loader__inhalt {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  padding: 24px; text-align: center; color: var(--ink);
}
.loader__stage { position: relative; width: var(--stage); height: var(--stage); }
/* Goldring: liegt genau auf dem gezeichneten Kreis des Emblems (Radius 42,7 im 100er-Feld = 0,427 × Bühne).
   Beginnt oben am Stern (rotate -90°) */
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.loader__ring circle { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.loader__ring .ring-stern { fill: #f3dfb0; stroke: none; }
/* Sonnenschein: sitzt genau auf der Sonne des Emblems */
.loader__glow {
  position: absolute; left: var(--sonne-x); top: var(--sonne-y); width: 62%; height: 62%; translate: -50% -50%;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 140, .85) 0%, rgba(240, 180, 100, .35) 32%, rgba(240, 180, 100, 0) 68%);
}
.loader__emblem { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity; }
/* Variante 4: die beiden Sterne des Emblems (oben, rechts) funkeln auf, wenn der Ring an ihnen vorbeizieht */
.loader__glanz {
  position: absolute; left: var(--x); top: var(--y); width: 16%; aspect-ratio: 1; translate: -50% -50%;
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 220, .95) 0%, rgba(255, 214, 140, .55) 18%, rgba(240, 180, 100, 0) 55%);
}
.loader__glanz::before, .loader__glanz::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1.5px; translate: -50% -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .95), transparent);
}
.loader__glanz::after { rotate: 90deg; }
.loader__text { display: grid; justify-items: center; gap: 12px; margin-top: clamp(22px, 4vh, 36px); }
.loader__wort {
  font-family: var(--display); font-weight: 400; margin: 0;
  font-size: clamp(2.1rem, 8.5vw, 3.4rem); line-height: 1.1; letter-spacing: -.01em;
}
.loader__wort .ch { display: inline-block; }
.loader__maske { display: block; overflow: hidden; padding: .06em .1em .14em; }
.loader__claim {
  margin: 0; font-family: var(--sans); font-size: clamp(.7rem, 2.7vw, .84rem); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--soft);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2em .9em;
}
.loader__claim span, .loader__claim i { display: inline-block; opacity: 0; font-style: normal; }
.loader__claim i { color: var(--gold); }

/* Bis intro.js die Startzustände gesetzt hat: Ring und Text verborgen (kein Aufblitzen).
   Der Sonnenschein beginnt schon per CSS, damit das Papier nicht leer wartet, bis GSAP geladen ist. */
.loader:not(.is-los) .loader__ring, .loader:not(.is-los) .loader__text { visibility: hidden; }
html[data-intro="1"] .loader:not(.is-los) .loader__glow { animation: vorschein 1.2s ease-out forwards; }
@keyframes vorschein { from { opacity: 0; scale: .35; } to { opacity: .8; scale: .8; } }

/* Aufbau je Variante: welche Teile es gibt */
.loader [data-nur] { display: none; }
html[data-intro="1"] .loader [data-nur~="1"],
html[data-intro="2"] .loader [data-nur~="2"],
html[data-intro="3"] .loader [data-nur~="3"],
html[data-intro="4"] .loader [data-nur~="4"] { display: block; }
html[data-intro="1"] .loader__claim[data-nur],
html[data-intro="3"] .loader__claim[data-nur],
html[data-intro="4"] .loader__claim[data-nur] { display: flex; }

/* Variante 3: Nacht – helle Schrift, die mit dem Morgen dunkel wird (Farbe per GSAP) */
html[data-intro="3"] .loader__inhalt { color: #ece2cf; }
html[data-intro="3"] .loader__claim { color: rgba(236, 226, 207, .75); }