/* ============================================================
   Tresmont Capital — Startseite
   Die Bühne: gepinnter Hero, Durchflug durch die Wortmarke,
   Skyline waechst, Positionierung tritt hervor.
   ============================================================ */

/* ---------- Scrollraum ---------- */
.stage {
  position: relative;
  height: 340vh;            /* Laufweg des Effekts */
  background: var(--ink);
}

/* ---------- Gepinnte Sicht ---------- */
.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* ---------- Hintergrundbild ---------- */
.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Die Tuerme stehen links, der ausgewaschene Himmel liegt rechts oben.
     Der Ausschnitt haelt deshalb die Tuerme im Bild und drueckt den Himmel
     an den Rand. */
  object-position: 42% 56%;
  transform: scale(1.02);   /* deckt Subpixel-Kanten beim Skalieren ab */
  transform-origin: 44% 54%;
  will-change: transform;
  /* Tagmotiv im goldenen Licht: deutlich abgedunkelt und leicht entsaettigt,
     damit die weisse Schrift auf dem hellen Himmel Kontrast behaelt. */
  filter: saturate(0.86) contrast(1.05) brightness(0.78);
}

/* ---------- Schleier ---------- */
.stage__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Faengt den ausgewaschenen Himmel rechts oben zusaetzlich ab. */
    radial-gradient(105% 78% at 72% 6%, rgba(7, 9, 12, 0.52) 0%, rgba(7, 9, 12, 0.18) 58%, rgba(7, 9, 12, 0) 100%),
    radial-gradient(125% 88% at 50% 44%, rgba(7, 9, 12, 0.10) 0%, rgba(7, 9, 12, 0.58) 66%, rgba(7, 9, 12, 0.90) 100%),
    linear-gradient(to bottom, rgba(7, 9, 12, 0.74) 0%, rgba(7, 9, 12, 0.30) 40%, rgba(7, 9, 12, 0.46) 78%, rgba(7, 9, 12, 0.62) 100%);
  will-change: opacity;
}

/* ---------- Verlauf am Fuss ----------
   Das Bild endet nicht an einer Kante, sondern laeuft nach unten in den
   Grund der folgenden Sektion aus. Bewusst eine eigene Ebene: der Schleier
   darueber wird beim Scrollen in seiner Deckkraft bewegt, dieser Verlauf
   muss dagegen in jedem Scrollzustand gleich bleiben. */
.stage__fade {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: -1px;
  height: 46vh;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(7, 9, 12, 0) 0%,
    rgba(7, 9, 12, 0.22) 26%,
    rgba(7, 9, 12, 0.58) 52%,
    rgba(7, 9, 12, 0.86) 74%,
    rgba(7, 9, 12, 0.98) 90%,
    #07090C 100%
  );
}

/* ---------- Wortmarke, durch die geflogen wird ---------- */
.stage__title {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-weight: 600;
  /* Versalien tragen keine Unterlaengen, die Zeilen duerfen enger stehen.
     Die Laufweite geht dagegen ins Positive, sonst wirkt der Satz gedraengt. */
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  text-wrap: balance;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.55);
  font-size: clamp(2.5rem, 10.5vw, 8.75rem);
}

.stage__title span { display: block; }

.stage__title .is-light {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  /* Optischer Blocksatz: die zweite Zeile traegt ein Zeichen weniger und
     einen leichteren Schnitt. Die Laufweite ist so bemessen, dass beide
     Zeilen gleich breit enden. Der negative Aussenabstand nimmt die
     nachlaufende Laufweite hinter dem letzten Buchstaben wieder heraus. */
  letter-spacing: 0.27em;
  margin-right: -0.27em;
}

@media (max-width: 560px) {
  /* Auf schmalen Geraeten bleibt zu wenig Raum fuer die Sperrung */
  .stage__title .is-light { letter-spacing: 0.12em; margin-right: -0.12em; }
}

/* ---------- Positionierung, die hervortritt ---------- */
.stage__claim {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  max-width: 1180px;
  margin-inline: auto;
  top: 50%;
  translate: 0 -50%;
  padding-inline: var(--gutter);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.stage__claim::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 128%;
  height: 320%;
  background: radial-gradient(58% 50% at 50% 50%, rgba(7, 9, 12, 0.72) 0%, rgba(7, 9, 12, 0.42) 46%, rgba(7, 9, 12, 0) 74%);
  pointer-events: none;
}

.stage__claim-line {
  display: block;
  font-size: clamp(1.25rem, 3.5vw, 2.875rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}

.stage__claim-sep {
  display: inline-block;
  margin-inline: 0.42em;
  translate: 0 -0.14em;
  font-size: 0.72em;
  color: #E0C285;
  font-weight: 500;
  text-shadow: 0 0 20px rgba(224, 194, 133, 0.6);
}

.stage__claim-sub {
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: clamp(0.625rem, 1.1vw, 0.8125rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.82);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.85);
}

/* ---------- Scroll-Hinweis ---------- */
.stage__hint {
  position: absolute;
  z-index: 5;
  bottom: clamp(1.75rem, 4vh, 3rem);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.5);
  will-change: opacity;
}

.stage__hint-rail {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(243, 244, 246, 0.45), rgba(243, 244, 246, 0));
  overflow: hidden;
  position: relative;
}

.stage__hint-rail::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -46px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(185, 151, 91, 0), var(--brass));
  animation: rail 2.6s var(--ease-io) infinite;
}

@keyframes rail {
  0%   { transform: translateY(0); }
  100% { transform: translateY(92px); }
}

/* ---------- Positionierung ---------- */
.coda {
  position: relative;
  z-index: 3;
  background: var(--ink);
  padding-block: clamp(6rem, 20vh, 14rem) clamp(6rem, 16vh, 11rem);
  overflow: hidden;   /* keine Trennlinie: das Bild laeuft nahtlos in diese Flaeche */
}

/* Die grosse Aussage, bewusst ohne Konkurrenz auf der Zeile */
.coda__head {
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.875rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 24ch;
}

.coda__intro {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  margin-inline: auto;
  text-align: center;
  /* Bewusst breit gesetzt und im leichtesten Schnitt. Der Satz soll als
     ruhige Zeile unter der Aussage liegen, nicht als zweiter Block. */
  max-width: min(84ch, 100%);
  color: var(--paper-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.8;
  letter-spacing: 0.002em;
  text-wrap: pretty;
}

/* ---------- Die drei Saeulen ---------- */
.coda__pillars {
  margin-top: clamp(6rem, 18vh, 13rem);
  border-top: 1px solid var(--line);
}

.coda__pillar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 52vh, 32rem);
  padding-block: clamp(5rem, 13vh, 10rem);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}

/* Die Ziffer steht als Flaeche hinter dem Text, nicht als Aufzaehlung davor */
.coda__pillar-num {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  translate: -50% 0;
  font-size: clamp(15rem, 24vw, 22rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.06em;
  /* Die Ziffer steht oben klar und laeuft nach unten in den Grund aus.
     Der Verlauf braucht Raum unterhalb der Grundlinie, sonst endet er an
     der Textbox und die Glyphe reisst hart ab. Daher das padding. */
  padding-bottom: 0.22em;
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(243, 244, 246, 0.17) 0%,
    rgba(243, 244, 246, 0.13) 26%,
    rgba(243, 244, 246, 0.06) 56%,
    rgba(243, 244, 246, 0.015) 78%,
    rgba(243, 244, 246, 0) 94%
  );
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

.coda__pillar-text {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 9vh, 7rem);
  margin-inline: auto;
  max-width: 46ch;
}

.coda__pillar-name {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.coda__pillar-note {
  margin-top: clamp(0.75rem, 1.4vw, 1.125rem);
  margin-inline: auto;
  max-width: 42ch;
  color: var(--paper-dim);
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  line-height: 1.7;
  text-wrap: balance;
}

/* ---------- Abbinder ---------- */
.coda__outro {
  margin-top: clamp(5rem, 14vh, 10rem);
  margin-inline: auto;
  max-width: 58ch;
  text-align: center;
}

.coda__outro p {
  color: var(--paper-dim);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.72;
}

.coda__outro p + p { margin-top: 1.25rem; }

.coda__outro a {
  color: var(--paper);
  border-bottom: 1px solid var(--line-hard);
  transition: border-color 0.25s var(--ease-out);
}

.coda__outro a:hover { border-color: var(--brass); }

/* ---------- Anflug beim Scrollen ----------
   Der Anflug laeuft ueber einen Klassenwechsel statt ueber Inline-Werte
   einer Bibliothek. Bleibt ein Beobachter einmal stumm, ist der Inhalt
   im schlimmsten Fall sofort sichtbar statt dauerhaft unsichtbar. */
.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.rise.is-in {
  opacity: 1;
  transform: none;
}

.no-js .rise,
.is-static .rise {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Ohne JavaScript und ohne Bewegung ---------- */
.no-js .stage,
.is-static .stage { height: auto; }

.no-js .stage__pin,
.is-static .stage__pin {
  position: relative;
  height: 100svh;
}

.no-js .stage__claim,
.is-static .stage__claim {
  position: relative;
  top: auto;
  translate: none;
  opacity: 1;
  margin-top: clamp(2rem, 5vh, 4rem);
}

.no-js .stage__hint,
.is-static .stage__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .stage__pin { position: relative; height: 100svh; }
  .stage__hint-rail::after { animation: none; }
}

/* ---------- Feinschliff kleine Viewports ---------- */
@media (max-width: 640px) {
  .stage { height: 300vh; }
  .coda__pillar { min-height: clamp(18rem, 44vh, 24rem); }
  .coda__pillar-num { font-size: 15rem; }
  .stage__bg { object-position: 38% 58%; }
  .stage__claim-sep { display: block; margin: 0.15em 0; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .stage__title { font-size: clamp(2rem, 8vh, 4rem); }
  .stage__hint { display: none; }
}