/* =========================================================================
   ALTUS — Alpine WebGL Template
   Strikt 2 Hex-Farben. Alles andere sind nur Transparenzen dieser beiden.
   Diese beiden Werte MÜSSEN identisch in main.js (COLOR_A / COLOR_B) stehen.
   ========================================================================= */
:root{
  --fog:   #dce1e7;   /* Farbe A — Nebel / Himmel / Hintergrund  */
  --slate: #1c2026;   /* Farbe B — Berge / Schrift               */

  /* Abgeleitete Transparenzen (keine neuen Farben) */
  --slate-90: rgba(28,32,38,.90);
  --slate-55: rgba(28,32,38,.55);
  --slate-35: rgba(28,32,38,.35);
  --slate-15: rgba(28,32,38,.15);
  --fog-70:   rgba(220,225,231,.70);

  --display: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:auto; }
body{
  background: var(--fog);
  color: var(--slate);
  font-family: var(--display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La toile vit derrière tout le contenu */
#scene{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  z-index: 0;
}

/* ---------- Loader ---------- */
#loader{
  position: fixed; inset: 0; z-index: 50;
  background: var(--fog);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  transition: opacity .9s ease;
}
#loader.done{ opacity: 0; pointer-events: none; }
.loader-mark{
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 200; letter-spacing: .5em; text-indent: .5em;
}
.loader-bar{ width: 140px; height: 1px; background: var(--slate-15); overflow: hidden; }
.loader-bar i{ display:block; width:0; height:100%; background: var(--slate); transition: width .3s ease; }

/* ---------- Navigation ---------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: difference;            /* bleibt auf hell & dunkel lesbar */
  color: var(--fog);
}
.brand{
  font-weight: 300; font-size: .95rem; letter-spacing: .42em; text-indent: .42em;
  text-decoration: none; color: inherit;
}
.menu{ display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); }
.menu a{
  font-family: var(--mono); font-size: .72rem; font-weight: 300;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: inherit; opacity: .85; transition: opacity .25s ease;
}
.menu a:hover{ opacity: 1; }
.menu-toggle{
  display: none; background: none; border: none; color: inherit; cursor: pointer;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- HUD / Telemetrie (Signature) ---------- */
.hud{
  position: fixed; left: clamp(1.2rem, 4vw, 3rem); bottom: clamp(1.2rem, 4vw, 2.4rem);
  z-index: 30;
  display: flex; flex-direction: column; gap: .35rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--slate-55);
}
.hud-row{ display: flex; align-items: baseline; gap: .5rem; }
.hud-row b{ font-weight: 400; width: 3.4rem; color: var(--slate-35); }
.hud-row i{ font-style: normal; font-weight: 400; color: var(--slate-90); font-variant-numeric: tabular-nums; }
.hud-row u{ text-decoration: none; color: var(--slate-35); }
.hud-live{ margin-top: .5rem; color: var(--slate-55); }
.hud-live::first-letter{ color: var(--slate-90); }   /* der Punkt */

/* ---------- Scroll-Panels ---------- */
main{ position: relative; z-index: 10; }
.panel{
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12vh clamp(1.4rem, 6vw, 7rem);
}
.eyebrow{
  font-family: var(--mono); font-size: .72rem; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase; color: var(--slate-55);
  margin-bottom: 1.6rem;
}

/* Hero */
.panel--hero{ align-items: center; text-align: center; }
.panel--hero .eyebrow{ color: var(--slate-55); }
.wordmark{
  font-weight: 200; line-height: .9;
  font-size: clamp(3.2rem, 17vw, 13rem);
  letter-spacing: .14em; text-indent: .14em;
}
.lede{
  max-width: 32ch; margin: 2rem auto 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 300; line-height: 1.6;
  color: var(--slate-90);
}
.scroll-hint{
  position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-55);
  animation: float 2.6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translate(-50%,0); opacity:.55 } 50%{ transform: translate(-50%,8px); opacity:1 } }

/* Text-Panels */
.panel--text{ max-width: 1300px; }
.panel--text h2{
  font-weight: 200; line-height: 1.04;
  font-size: clamp(2.1rem, 6vw, 5rem); letter-spacing: -.01em;
  margin-bottom: 1.8rem; max-width: 18ch;
}
.panel--text p{
  max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300; line-height: 1.7; color: var(--slate-90);
}

/* End-Panel */
.panel--end{ align-items: center; text-align: center; }
.end-mark{
  font-weight: 200; font-size: clamp(2.6rem, 12vw, 9rem);
  letter-spacing: .16em; text-indent: .16em; line-height: 1;
}
.end-line{
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-55); margin: 1.6rem 0 2.4rem;
}
.end-cta{
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); text-decoration: none;
  border: 1px solid var(--slate-35); border-radius: 999px;
  padding: .85rem 1.7rem; transition: background .3s ease, color .3s ease;
}
.end-cta:hover{ background: var(--slate); color: var(--fog); }

/* Reveal beim Scrollen */
.panel--text .eyebrow,
.panel--text h2,
.panel--text p,
.panel--end > *{
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.panel.in .eyebrow{ transition-delay: 0s; }
.panel.in h2{ transition-delay: .08s; }
.panel.in p{ transition-delay: .16s; }
.panel.in > *{ opacity: 1; transform: none; }

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .menu{ display: none; }
  .menu-toggle{ display: block; }
  .hud{ font-size: .62rem; }
  .hud-row b{ width: 3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .scroll-hint{ animation: none; }
  .panel--text .eyebrow,
  .panel--text h2,
  .panel--text p,
  .panel--end > *{ opacity: 1; transform: none; transition: none; }
}