:root{
  --star-white:#eef4ff;
  --star-blue:#9fc9ff;
  --star-warm:#ffe9c7;
  --nebula-blue:#1e3a8a;
  --nebula-purple:#4c1d95;
  --nebula-magenta:#7c2d5c;
  --accent:#7db8ff;
  --bg:#04050a;
  --glitch1:#ff2fd0;
  --glitch2:#2fe5ff;
}

*{box-sizing:border-box; margin:0; padding:0;}
html, body{height:100%;}
body{
  background:var(--bg);
  color:var(--star-white);
  font-family:'Segoe UI', Arial, sans-serif;
  overflow:hidden;
}
body.ready{ overflow-y:auto; }

/* ===== Matrix intro ===== */
#matrix-intro{
  position:fixed; inset:0; z-index:99;
  background:#020203;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  overflow:hidden;
}
#matrix-intro.active{ opacity:1; pointer-events:auto; }
#matrix-intro.fade-out{ opacity:0; }

#matrix-output{
  position:absolute; top:0; left:0; right:0;
  margin:0;
  padding:2vh 3vw;
  font-family:'Consolas','Courier New',monospace;
  font-size:clamp(.7rem, 1.4vw, .95rem);
  line-height:1.5;
  color:#6fffb0;
  text-align:left;
  white-space:pre-wrap;
  word-break:break-all;
  text-shadow:0 0 6px rgba(111,255,176,.5);
  will-change:transform;
}

/* ===== Galaxy background ===== */
/* Startet unsichtbar und baut sich erst waehrend/nach dem Lynexo-Aufbau auf. */
#galaxy-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0;
  opacity:0;
  transition:opacity 2.2s ease;
}
#galaxy-canvas.live{ opacity:1; }

#nebula-layer{
  position:fixed; inset:-10%; width:120%; height:120%; z-index:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(76,29,149,.35), transparent 60%),
    radial-gradient(ellipse 35% 25% at 75% 60%, rgba(30,58,138,.3), transparent 60%),
    radial-gradient(ellipse 30% 35% at 60% 15%, rgba(124,45,92,.22), transparent 60%),
    radial-gradient(ellipse 45% 40% at 40% 85%, rgba(15,23,42,.4), transparent 65%);
  filter:blur(40px);
  animation:nebulaDrift 40s ease-in-out infinite alternate;
  transition:opacity 2.6s ease;
  will-change:transform, opacity;
}
#nebula-layer.live{ opacity:1; }
@keyframes nebulaDrift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-2%,1.5%) scale(1.05); }
}

/* ===== Main site ===== */
#site{
  position:relative; z-index:2;
  min-height:100vh;
}
#site.hidden{ display:none; }

.snap-section{
  height:100vh;
  width:100%;
  background:transparent; /* das Universum dahinter bleibt durchgehend sichtbar */
}

.hero{
  height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
}
.logo{
  position:relative;
  display:flex; justify-content:center;
  font-size:clamp(3rem, 10vw, 6rem);
  font-weight:800;
  letter-spacing:6px;
  color:var(--star-white);
}
.logo span{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  text-shadow:0 0 30px rgba(125,184,255,.5), 0 0 80px rgba(76,29,149,.4);
  animation:letterIn .5s forwards;
}
.logo span:nth-child(1){ animation-delay:.05s; }
.logo span:nth-child(2){ animation-delay:.18s; }
.logo span:nth-child(3){ animation-delay:.31s; }
.logo span:nth-child(4){ animation-delay:.44s; }
.logo span:nth-child(5){ animation-delay:.57s; }
.logo span:nth-child(6){ animation-delay:.70s; }
@keyframes letterIn{
  to{ opacity:1; transform:translateY(0); }
}

/* Heftiges Flimmern beim Sektionswechsel (Klasse wird per JS kurz gesetzt).
   Die echten Buchstaben-Spans werden bewusst NICHT per CSS-Animation
   angefasst (sonst wuerde die letterIn-Aufbauanimation beim Entfernen der
   Klasse erneut abgespielt) - das Flackern der Spans passiert per JS ueber
   inline opacity. Das ganze Wort ruckelt zusaetzlich per CSS, dazu die
   geisterhaften RGB-Split-Ebenen - beides laeuft "infinite" solange die
   Klasse gesetzt ist, fuer ein deutlich heftigeres Flackern. */
.logo.glitching{
  animation: glitchShake .1s steps(2, end) infinite;
}
@keyframes glitchShake{
  0%{ transform:translate(0,0) skewX(0deg); }
  25%{ transform:translate(-5px,3px) skewX(-3deg); }
  50%{ transform:translate(5px,-3px) skewX(3deg); }
  75%{ transform:translate(-4px,-4px) skewX(-2deg); }
  100%{ transform:translate(3px,4px) skewX(2deg); }
}

.logo.glitching::before,
.logo.glitching::after{
  content:attr(data-text);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  mix-blend-mode:screen;
}
.logo.glitching::before{
  color:var(--glitch1);
  animation:glitchLayerA .38s steps(3, end) infinite;
}
.logo.glitching::after{
  color:var(--glitch2);
  animation:glitchLayerB .32s steps(3, end) infinite;
}
@keyframes glitchLayerA{
  0%{ opacity:0; transform:translate(0,0); clip-path:inset(0 0 85% 0); }
  15%{ opacity:1; transform:translate(-10px,2px); clip-path:inset(10% 0 55% 0); }
  30%{ opacity:.3; transform:translate(8px,-3px); clip-path:inset(55% 0 10% 0); }
  45%{ opacity:1; transform:translate(-9px,0); clip-path:inset(20% 0 65% 0); }
  60%{ opacity:.2; transform:translate(10px,3px); clip-path:inset(70% 0 5% 0); }
  75%{ opacity:1; transform:translate(-7px,-2px); clip-path:inset(5% 0 80% 0); }
  90%{ opacity:.4; transform:translate(6px,0); clip-path:inset(45% 0 25% 0); }
  100%{ opacity:0; transform:translate(0,0); clip-path:inset(0 0 100% 0); }
}
@keyframes glitchLayerB{
  0%{ opacity:0; transform:translate(0,0); clip-path:inset(85% 0 0 0); }
  15%{ opacity:1; transform:translate(9px,-2px); clip-path:inset(45% 0 30% 0); }
  30%{ opacity:.3; transform:translate(-8px,3px); clip-path:inset(10% 0 60% 0); }
  45%{ opacity:1; transform:translate(7px,0); clip-path:inset(65% 0 10% 0); }
  60%{ opacity:.2; transform:translate(-10px,-3px); clip-path:inset(30% 0 50% 0); }
  75%{ opacity:1; transform:translate(8px,2px); clip-path:inset(5% 0 85% 0); }
  90%{ opacity:.4; transform:translate(-6px,0); clip-path:inset(60% 0 15% 0); }
  100%{ opacity:0; transform:translate(0,0); clip-path:inset(100% 0 0 0); }
}

.tagline{
  margin-top:1rem;
  font-size:clamp(1rem, 2vw, 1.3rem);
  color:var(--star-blue);
  letter-spacing:1px;
  opacity:0;
  transition:opacity 1s ease;
}
.tagline.show{ opacity:.85; }

/* ===== Sektion 2: bleibt fix stehen, Panels fliegen einzeln von rechts rein ===== */
.section-two{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.2rem;
  flex-wrap:wrap;
  padding:2rem;
}
.fly-panel{
  opacity:0;
  transform:translateX(220px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  padding:2rem;
  max-width:280px;
  text-align:left;
  backdrop-filter:blur(6px);
}
.fly-panel.in{
  opacity:1;
  transform:translateX(0);
}
.fly-panel h2{
  font-size:1.3rem;
  margin-bottom:.7rem;
  color:var(--star-white);
}
.fly-panel p{
  font-size:.95rem;
  line-height:1.5;
  color:var(--star-blue);
  opacity:.9;
  font-family:'Segoe UI', Arial, sans-serif;
  font-weight:400;
}