/* ============================================================
   SVARTLIND · PARIS V4
   2026-09-27

   Kausalität:

   LIND
     ↓
   Licht aus
     ↓
   Header bekommt grünes Nachtlicht
     ↓
   gelber SVARTLIND-Baum wächst
     ↓
   erst DANACH lösen sich Blätter
     ↓
   REPORT · HJÄRTA · UNIT entstehen
     ↓
   SVART
   ============================================================ */


.sl-header {
  isolation: isolate;
}


/* ============================================================
   0 · PARIS VIEWPORT CANVAS

   scrollbar-gutter: stable both-edges reserviert links und rechts
   bewusst Raum für die gemeinsame Header-Mittelachse.

   Während PARIS muss deshalb auch der HTML-Canvas selbst dunkel
   werden, damit diese reservierten Gutter nicht hell durchscheinen.
   ============================================================ */

html.paris-light-out {
  background:
    #020506;

  /*
   * Während PARIS keine reservierten Scrollbar-Gutters.
   * Die Bühne soll wirklich bis an beide Viewportkanten reichen.
   */
  scrollbar-gutter:
    auto;

  overflow-y:
    hidden;
}


/* ============================================================
   1 · PAGE FADE
   ============================================================ */

.paris-night-curtain {
  position: fixed;
  inset: 0;

  z-index: 2147482000;

  pointer-events: none;

  opacity: 0;

  background:
    rgba(2,5,6,.965);

  transition:
    opacity
    800ms
    cubic-bezier(.4,0,.2,1);
}


html.paris-light-out
.paris-night-curtain {
  opacity: 1;
}


/*
 * Header bleibt über der dunklen Bühne sichtbar.
 */

html.paris-light-out
.sl-header {
  z-index: 2147482100;
}


/* ============================================================
   2 · HEADER NIGHT LIGHT
   ============================================================ */

.sl-header::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  border-radius: inherit;

  opacity: 0;

  background:
    radial-gradient(
      760px circle at 34% -170px,
      rgba(62,224,143,.075),
      rgba(22,80,56,.030) 42%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(6,15,15,.985),
      rgba(2,8,9,.995)
    );

  border:
    1px solid
    rgba(63,224,144,0);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025),
    0 0 0
      rgba(49,220,136,0);

  transition:
    opacity 950ms ease,
    border-color 1200ms ease,
    box-shadow 1500ms ease;
}


html.paris-header-night
.sl-header::after {
  opacity: 1;

  border-color:
    rgba(61,220,141,.19);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025),
    0 0 38px
      rgba(47,211,132,.045);
}


.sl-header > * {
  position: relative;
  z-index: 4;
}


html.paris-header-night
.sl-header {
  color:
    rgba(230,240,233,.82);

  border-color:
    rgba(61,220,141,.13);
}


/* ============================================================
   3 · TREE GROWTH

   Gleiche Grundidee wie unser vorhandenes Header-Intro:
   Baum erscheint von UNTEN nach OBEN.

   Entscheidend:
   Filter ist während PARIS NICHT schwarz.
   Wir sehen das echte gelbe Logo.
   ============================================================ */

.sl-header__brand-logo {
  transform-origin:
    50% 100%;
}


html.paris-tree-prep
.sl-header__brand-logo {
  opacity: 0;

  filter:
    none;

  clip-path:
    inset(100% 0 0 0);

  transform:
    translateY(3px)
    scale(.985);
}


html.paris-tree-growing
.sl-header__brand-logo {
  animation:
    parisTreeGrow
    1700ms
    cubic-bezier(.18,.72,.18,1)
    forwards;
}


@keyframes parisTreeGrow {

  0% {
    opacity: 0;

    filter:
      none;

    clip-path:
      inset(100% 0 0 0);

    transform:
      translateY(4px)
      scale(.985);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    filter:
      none;

    clip-path:
      inset(0 0 0 0);

    transform:
      translateY(0)
      scale(1);
  }

}


/*
 * Sehr zurückhaltende gelbe Aura,
 * erst wenn der Baum fast fertig ist.
 */

.sl-header__brand::after {
  content: "";

  position: absolute;

  left: 7%;
  top: 4%;

  width: 92px;
  height: 72px;

  z-index: -1;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      ellipse,
      rgba(228,198,73,.12),
      rgba(228,198,73,.025) 45%,
      transparent 72%
    );

  transition:
    opacity 700ms ease;
}


html.paris-tree-grown
.sl-header__brand::after {
  opacity: 1;
}


html.paris-tree-grown
.sl-header__brand-logo {
  opacity: 1;

  filter:
    none;

  clip-path:
    inset(0 0 0 0);
}


html.paris-tree-grown
.sl-header__brand-line {
  color:
    rgba(229,240,232,.62);

  border-color:
    rgba(229,240,232,.17);
}


/* ============================================================
   4 · OLD NAV LEAVES
   ============================================================ */

.sl-header__center {
  transition:
    opacity 800ms ease,
    filter 900ms ease,
    transform 950ms ease;
}


html.paris-nav-change
.sl-header__center:not(.paris-target-nav) {
  opacity: 0;

  filter:
    blur(4px);

  transform:
    translateY(-2px);

  pointer-events: none;
}


/* ============================================================
   5 · TARGET NAV
   ============================================================ */

.paris-target-nav {
  position: absolute !important;

  left: 50%;
  top: 50%;

  z-index: 7;

  display: flex !important;

  align-items: center;
  justify-content: center;

  gap: 12px;

  transform:
    translate(-50%,-50%);

  pointer-events: none;
}


.paris-target-nav
.sl-glass-control {
  opacity: 0;

  color:
    rgba(225,239,230,.82);

  border-color:
    transparent;

  background:
    transparent;

  filter:
    blur(4px);

  transform:
    translateX(-12px);

  transition:
    opacity 620ms ease,
    filter 700ms ease,
    transform 760ms
      cubic-bezier(.18,.72,.18,1);

  transition-delay:
    calc(
      var(--paris-i)
      * 230ms
    );
}


html.paris-nav-change
.paris-target-nav
.sl-glass-control {
  opacity: 1;

  filter:
    blur(0);

  transform:
    translateX(0);
}


/* ============================================================
   6 · LEAVES

   WICHTIG:
   Animation wird erst gestartet,
   nachdem .paris-tree-grown gesetzt wurde.
   ============================================================ */

.paris-leaf-field {
  position: fixed;
  inset: 0;

  z-index: 2147482500;

  overflow: hidden;

  pointer-events: none;
}


.paris-leaf {
  position: fixed;

  left:
    var(--leaf-x);

  top:
    var(--leaf-y);

  width:
    var(--leaf-w,7px);

  height:
    calc(
      var(--leaf-w,7px)
      * .58
    );

  opacity: 0;

  border-radius:
    100% 0 100% 0;

  background:
    linear-gradient(
      135deg,
      rgba(241,211,86,.96),
      rgba(210,179,54,.82)
    );

  box-shadow:
    0 0 7px
    rgba(227,199,74,.12);
}


html.paris-leaves-fly
.paris-leaf {
  animation:
    parisLeaf
    var(--leaf-duration)
    var(--leaf-delay)
    cubic-bezier(.20,.60,.24,1)
    forwards;
}


@keyframes parisLeaf {

  0% {
    opacity: 0;

    transform:
      translate3d(0,0,0)
      rotate(0deg);
  }

  12% {
    opacity: .88;
  }

  55% {
    opacity: .82;

    transform:
      translate3d(
        calc(var(--leaf-dx) * .57),
        var(--leaf-wave),
        0
      )
      rotate(150deg);
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--leaf-dx),
        var(--leaf-dy),
        0
      )
      rotate(320deg);
  }

}


/* ============================================================
   TRANSFER ELKO
   ============================================================ */

.paris-transfer-veil {
  position: fixed;
  inset: 0;

  z-index: 2147483000;

  pointer-events: none;

  opacity: 0;

  background:
    rgba(2,7,8,.995);

  transition:
    opacity 580ms ease;
}


.paris-transfer-veil.is-visible {
  opacity: 1;
}


/* ============================================================
   ARRIVAL
   ============================================================ */

/*
 * Zielseite übernimmt direkt aus der Transition.
 *
 * Kein schwarzer Vorhang mehr.
 * Die fertige SVART-Welt startet lediglich minimal gedimmt
 * und erreicht innerhalb von 240 ms ihren normalen Zustand.
 */

html.paris-arrival
body {
  opacity:
    .91;

  animation:
    parisArrival
    240ms
    cubic-bezier(.22,.75,.20,1)
    forwards;
}


@keyframes parisArrival {

  from {
    opacity:
      .91;
  }

  to {
    opacity:
      1;
  }

}


/* ============================================================
   RETURN TO LIND

   Ruhiger.
   Keine rückwärts fliegenden Blätter.
   ============================================================ */

html.paris-return
.sl-header__center {
  opacity: 0;

  filter:
    blur(3px);

  transform:
    translateY(2px);
}


html.paris-return-light
.sl-header::after {
  opacity: 0;
}


html.paris-return-light
.sl-header__brand-logo {
  filter:
    brightness(0)
    saturate(100%);

  clip-path:
    inset(0 0 0 0);

  opacity: 1;
}


.paris-return-veil {
  background:
    rgba(248,247,242,.998);
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce) {

  html.paris-arrival
  body {
    animation:
      none !important;

    opacity:
      1 !important;
  }

  .sl-header::after,
  .sl-header__center,
  .paris-target-nav
  .sl-glass-control,
  .paris-night-curtain,
  .paris-transfer-veil {
    transition:
      none !important;
  }

  .sl-header__brand-logo,
  .paris-leaf {
    animation:
      none !important;
  }

}


/* ============================================================
   PARIS V5 · OUROBOROS BIRTH
   2026-09-27

   Ursprung:
   VAKTEN LIVE · Toleranzdynamik

   Dort:
   - conic-gradient Ring
   - deutlicher Lichtklumpen
   - Farbe und Bewegung getrennt

   Hier:
   Blattkontakt = einmalige Geburt einer Pille.

   GELB
      ↓ Ouroboros läuft herum
   ROMULAN GREEN
      ↓
   Pille steht ruhig
   ============================================================ */


/* ------------------------------------------------------------
   Target Pills beginnen wirklich unsichtbar.
   Kein globales "alle werden gemeinsam sichtbar".
   ------------------------------------------------------------ */

.paris-target-nav
.sl-glass-control {
  position:
    relative;

  isolation:
    isolate;

  opacity:
    0;

  filter:
    blur(3px);

  transform:
    translateX(-8px)
    scale(.985);

  overflow:
    visible;

  border:
    1px solid
    rgba(232,202,70,0);

  background:
    rgba(4,14,14,.40);

  transition:
    opacity 340ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(.18,.72,.18,1),
    border-color 700ms ease,
    color 700ms ease,
    background 700ms ease,
    box-shadow 700ms ease;
}


/*
 * Eine Pille existiert erst ab Blattkontakt.
 */

.paris-target-nav
.sl-glass-control.is-paris-born {
  opacity:
    1;

  filter:
    blur(0);

  transform:
    translateX(0)
    scale(1);

  color:
    rgba(244,224,124,.96);

  border-color:
    rgba(235,204,76,.36);

  background:
    rgba(25,22,9,.42);
}


/* ------------------------------------------------------------
   Ouroboros-Ring

   Dieselbe Idee wie beim alten VAKTEN-Ouroboros:
   ein schwacher Grundlauf und ein sehr heller Bereich.
   Auf die Kapselmaske übertragen.
   ------------------------------------------------------------ */

.paris-target-nav
.sl-glass-control.is-paris-ouroboros::before {
  content:
    "";

  position:
    absolute;

  inset:
    -3px;

  z-index:
    -1;

  border-radius:
    999px;

  padding:
    3px;

  background:
    conic-gradient(
      from 0deg,

      rgba(239,207,74,.05) 0deg,
      rgba(239,207,74,.10) 220deg,
      rgba(239,207,74,.42) 286deg,
      rgba(239,207,74,1) 322deg,
      rgba(255,250,213,1) 338deg,
      rgba(239,207,74,.72) 350deg,
      rgba(239,207,74,.05) 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0)
      content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  filter:
    drop-shadow(
      0 0 7px
      rgba(239,207,74,.66)
    );

  animation:
    parisOuroborosTurn
    1050ms
    linear
    1;

  pointer-events:
    none;
}


/* ------------------------------------------------------------
   Der Dickböppel.

   Nicht nur ein feines Spitzlicht:
   ein deutlich breiterer heller Sektor läuft mit.
   ------------------------------------------------------------ */

.paris-target-nav
.sl-glass-control.is-paris-ouroboros::after {
  content:
    "";

  position:
    absolute;

  inset:
    -4px;

  z-index:
    -1;

  border-radius:
    999px;

  padding:
    4px;

  background:
    conic-gradient(
      from 0deg,

      transparent 0deg,
      transparent 314deg,

      rgba(255,255,236,.08) 318deg,
      rgba(255,248,194,.82) 328deg,
      rgba(255,255,255,1) 338deg,
      rgba(240,208,75,1) 347deg,
      rgba(240,208,75,.22) 354deg,

      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0)
      content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  filter:
    drop-shadow(
      0 0 9px
      rgba(243,211,80,.90)
    );

  animation:
    parisOuroborosClump
    1050ms
    linear
    1;

  pointer-events:
    none;
}


@keyframes parisOuroborosTurn {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes parisOuroborosClump {

  to {
    transform:
      rotate(360deg);
  }

}


/* ------------------------------------------------------------
   Gelb → Romulan Green

   Der Ouroboros hat seine Arbeit getan.
   Die Pille bleibt nicht "alarmierend" gelb,
   sondern wird Teil der erwachten Systemwelt.
   ------------------------------------------------------------ */

.paris-target-nav
.sl-glass-control.is-paris-green {
  color:
    rgba(211,239,220,.90);

  border-color:
    rgba(61,220,141,.28);

  background:
    rgba(5,23,17,.52);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025),
    0 0 15px
      rgba(57,217,138,.055);
}


/*
 * Nach dem Umlauf verschwinden Ring und Dickböppel weich.
 */

.paris-target-nav
.sl-glass-control.is-paris-settled::before,
.paris-target-nav
.sl-glass-control.is-paris-settled::after {
  opacity:
    0;

  transition:
    opacity 420ms ease;
}


/* ------------------------------------------------------------
   V4-Regel neutralisieren:
   nav-change darf NICHT mehr alle Pills gleichzeitig zeigen.
   ------------------------------------------------------------ */

html.paris-nav-change
.paris-target-nav
.sl-glass-control:not(.is-paris-born) {
  opacity:
    0;

  filter:
    blur(3px);

  transform:
    translateX(-8px)
    scale(.985);
}


@media (prefers-reduced-motion:reduce) {

  .paris-target-nav
  .sl-glass-control.is-paris-ouroboros::before,

  .paris-target-nav
  .sl-glass-control.is-paris-ouroboros::after {
    animation:
      none !important;
  }

}


/* ============================================================
   PARIS V6 · TREE HOLD
   Der fertig gewachsene gelbe Baum bleibt bis zum Transfer
   exakt in seiner Endlage.
   ============================================================ */

html.paris-tree-growing.paris-tree-grown
.sl-header__brand-logo {
  opacity:
    1;

  filter:
    none;

  clip-path:
    inset(0 0 0 0);

  transform:
    translateY(0)
    scale(1);

  animation-fill-mode:
    forwards;
}


/* ============================================================
   PARIS V7 · SYNCHRONES FADEOUT
   Seite und Header erreichen gemeinsam den Dunkelpunkt.
   ============================================================ */

.paris-night-curtain {
  transition:
    opacity
    760ms
    cubic-bezier(.4,0,.2,1);
}


/*
 * Während des eigentlichen Licht-aus-Moments
 * zieht der Header gleichzeitig mit der Seite dunkel.
 */

html.paris-light-out
.sl-header {
  background:
    rgba(5,8,8,.94);

  border-color:
    rgba(255,255,255,.035);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.16);

  transition:
    background 760ms cubic-bezier(.4,0,.2,1),
    border-color 760ms cubic-bezier(.4,0,.2,1),
    box-shadow 760ms cubic-bezier(.4,0,.2,1),
    color 760ms cubic-bezier(.4,0,.2,1);
}


/*
 * Das grüne Nachtmaterial soll NICHT schon während
 * des Fadeouts langsam hinterherziehen.
 * Es startet erst danach.
 */

.sl-header::after {
  transition:
    opacity
    620ms
    cubic-bezier(.22,.75,.20,1),
    border-color
    720ms
    ease,
    box-shadow
    820ms
    ease;
}


/* ============================================================
   PARIS V8 · SLOW FADE
   Der Weltwechsel beginnt langsam und bewusst.
   ============================================================ */

.paris-night-curtain {
  transition:
    opacity
    2400ms
    cubic-bezier(.33,0,.18,1);
}


html.paris-light-out
.sl-header {
  transition:
    background 2400ms cubic-bezier(.33,0,.18,1),
    border-color 2400ms cubic-bezier(.33,0,.18,1),
    box-shadow 2400ms cubic-bezier(.33,0,.18,1),
    color 2400ms cubic-bezier(.33,0,.18,1);
}


/*
 * Das eigentliche Romulan-Nachtlicht kommt ERST
 * nach abgeschlossenem Fade.
 */

.sl-header::after {
  transition:
    opacity
    720ms
    cubic-bezier(.22,.75,.20,1),
    border-color
    800ms
    ease,
    box-shadow
    900ms
    ease;
}



/* ============================================================
   PARIS V10 · TEXT FADE ONLY
   2026-09-27

   Timing und Choreografie bleiben wie V8/V6/V5.

   Einzige Korrektur:
   Die vorhandene LIND-Schrift bleibt beim Dunkelwerden
   nicht zu lange lesbar.

   Keine zusätzliche Kompression.
   Keine neue Zustandslogik.
   ============================================================ */


/*
 * Public Navigation, Produktlinie und rechte Beschriftungen
 * verschwinden im selben langen 2.4-s-Fade wie die Welt.
 */

.sl-header__center:not(.paris-target-nav),
.sl-header__brand-line,
.sl-header__right {
  transition:
    opacity 2400ms cubic-bezier(.33,0,.18,1),
    color 2400ms cubic-bezier(.33,0,.18,1),
    filter 2400ms cubic-bezier(.33,0,.18,1);
}


html.paris-light-out
.sl-header__center:not(.paris-target-nav) {
  opacity:
    0;

  color:
    rgba(4,7,6,0);

  filter:
    brightness(.15);
}


html.paris-light-out
.sl-header__brand-line {
  opacity:
    0;

  color:
    rgba(4,7,6,0);

  border-color:
    transparent;
}


html.paris-light-out
.sl-header__right {
  opacity:
    0;

  color:
    rgba(4,7,6,0);

  filter:
    brightness(.15);
}


/*
 * Wichtig:
 * Target-Navigation bleibt von dieser Regel unberührt.
 * REPORT / HJÄRTA / UNIT entstehen weiterhin nach
 * bestehendem Blatt-/Ouroboros-Timing.
 */