/* ============================================================
   SlugV Roleplay — Landingpage
   Scroll-getriebener Hero, Kapitel mit wechselndem Hintergrund
   ============================================================ */

:root {
  --bg: #07060c;
  --bg-soft: #0d0b14;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text: #f6f4fb;
  --text-muted: rgba(246, 244, 251, 0.66);
  --text-faint: rgba(246, 244, 251, 0.40);

  --accent: #fc00ff;
  --accent-soft: rgba(252, 0, 255, 0.14);
  --sunset: #ff7a3d;
  --violet: #7b3cff;
  --on-accent: #0a0a0c;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --margin-x: clamp(20px, 5vw, 80px);

  --font: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --shell: 1360px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Topbar ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 16px var(--margin-x);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.topbar.is-stuck {
  background: rgba(7, 6, 12, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-right: auto;
  flex: none;
  text-decoration: none;
}

.topbar__logo img { height: 100%; width: auto; object-fit: contain; }

.topbar__fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  font-weight: 700;
  font-size: 16px;
  color: var(--on-accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
}

.nav a {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav a:hover,
.nav a:focus-visible { color: var(--text); }

.nav a[aria-current="page"] { color: var(--text); }

.nav-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--violet), var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  flex: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-connect:hover,
.nav-connect:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(252, 0, 255, 0.32);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: rgba(7, 6, 12, 0.6);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero mit Scroll-Zoom ---------- */

.hero { position: relative; }

/* Der Track ist hoch — dadurch entsteht die Scroll-Strecke für den Zoom. */
.hero__track { height: 260vh; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: scale(1.02);
}

.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 20%, transparent 25%, rgba(7, 6, 12, 0.55) 80%),
    linear-gradient(to bottom, rgba(7, 6, 12, 0.55) 0%, rgba(7, 6, 12, 0.15) 35%, rgba(7, 6, 12, 0.95) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--margin-x);
  text-align: center;
  will-change: transform, opacity;
}

.hero__logo {
  display: block;
  width: clamp(190px, 24vw, 340px);
  height: auto;
  margin: 0 auto clamp(18px, 3vh, 30px);
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6));
}

.hero__logo-text {
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero__claim {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 4vh, 40px);
}

.hero__cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  will-change: opacity;
}

.hero__cue svg {
  width: 18px;
  height: 18px;
  animation: cue-bob 2.2s ease-in-out infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-primary {
  color: #fff;
  /* Waagerecht statt schraeg: bei einem geneigten Verlauf liegen die reinen
     Endfarben in den Ecken — die eine runde Kappe gar nicht hat. Der Verlauf
     brach deshalb sichtbar ab, bevor er den Rand erreichte. */
  background: linear-gradient(to right, var(--violet), var(--accent));
  /* Der Button hat einen 1px breiten, durchsichtigen Rahmen. Ohne diese Zeile
     berechnet der Browser den Verlauf nur fuer die Innenflaeche, malt ihn aber
     ueber den Rahmen mit — der Streifen bekommt dann die wiederholte Kachel und
     damit links einen Magenta- und rechts einen Blaustich. Muss nach der
     Kurzschreibweise stehen, die setzt den Wert sonst zurueck. */
  background-origin: border-box;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(252, 0, 255, 0.35);
}

.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.btn__arrow { width: 16px; height: 10px; flex: none; transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Statement ---------- */

.statement {
  position: relative;
  z-index: 1;
  padding: clamp(90px, 16vh, 180px) var(--margin-x);
  background: var(--bg);
  text-align: center;
}

.statement__kicker {
  margin: 0 0 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.statement__text {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(30px, 5.4vw, 74px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.statement__text .word {
  display: inline-block;
  opacity: 0.14;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(6px);
}

.statement__text .word.is-lit {
  opacity: 1;
  transform: translateY(0);
}

.statement__sub {
  margin: 28px auto 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Kapitel: fixer Hintergrund, aufploppende Infofelder ---------- */

.chapters {
  position: relative;
  background: var(--bg);
}

.chapters__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.chapters__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.9s ease, transform 1.6s ease;
}

.chapters__layer.is-active {
  opacity: 1;
  transform: scale(1);
}

.chapters__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 6, 12, 0.92) 0%, rgba(7, 6, 12, 0.30) 24%, rgba(7, 6, 12, 0.34) 68%, rgba(7, 6, 12, 0.95) 100%);
}

.chapters__panels {
  position: relative;
  margin-top: -100vh;
}

.chapter {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12vh var(--margin-x);
}

.chapter--right { justify-content: flex-end; }

.card-info {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  background: rgba(11, 9, 18, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(38px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-info.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-info__num {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-info__title {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.card-info__text {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.68;
  color: var(--text-muted);
}

.card-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.card-info__tags span {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Allgemeine Sektionen ---------- */

.section {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 12vh, 140px) var(--margin-x);
  background: var(--bg);
}

.section--soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.shell { max-width: var(--shell); margin: 0 auto; }

.section__head { max-width: 660px; margin: 0 0 clamp(36px, 6vh, 64px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__head--center .eyebrow { justify-content: center; }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.section__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.section__lead {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--text-muted);
}

.section__head--center .section__lead { margin-left: auto; margin-right: auto; }

/* ---------- Feature-Kacheln ---------- */

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.tile {
  position: relative;
  padding: clamp(26px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(123, 60, 255, 0.22), rgba(252, 0, 255, 0.16));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tile:hover { transform: translateY(-4px); border-color: var(--accent); }
.tile:hover::before { opacity: 1; }

.tile > * { position: relative; }

.tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
}

.tile__icon svg { width: 22px; height: 22px; }

.tile__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.tile__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-muted);
}

/* ---------- Schritte ---------- */

.step {
  position: relative;
  padding: clamp(26px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.step:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--surface-hover);
}

.step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Platz fuer ein eigenes Foto — ohne Datei bleibt das SVG-Symbol sichtbar. */
.step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  color: var(--accent);
}

.step__icon-svg { width: 28px; height: 28px; }

/* Das SVG ist nur der Rueckfall, falls kein Bild da ist oder es nicht laedt
   (siehe onerror="this.remove()" am <img>). Solange ein <img> im Markup steht,
   liegt es unsichtbar darunter — bei einem randlosen, deckenden Foto (object-fit:
   cover) fiel das nicht auf, weil das Foto es komplett verdeckte. Bei einem
   Icon mit transparentem Hintergrund (object-fit: contain) schien es durch und
   sah aus wie ein doppeltes, unterschiedlich grosses Bild. */
.step__icon:has(.step__icon-img) .step__icon-svg { display: none; }

.step__icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fuer randlos gefuellte Icon-Grafiken (z.B. Discord-/Buch-Symbol) statt echter
   Fotos: object-fit: cover wuerde sie am Rand abschneiden, weil kein Rand zum
   Wegschneiden da ist. contain zeigt sie vollstaendig, der Abstand zum Rahmen
   sorgt dafuer, dass sie trotzdem wie die anderen Kacheln wirken. */
.step__icon-img--icon {
  /* inset + width/height:auto ist bei absolut positionierten Bildern eine
     bekannte Stolperfalle: der Browser berechnet die Groesse uneinheitlich,
     das Bild landete oben/links mit Abstand, unten/rechts aber ueber den
     Rand hinausragend. Feste Masse per calc() vermeiden das und ergeben
     garantiert symmetrischen Abstand auf allen vier Seiten. */
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
}

.step:hover .step__icon-img { transform: scale(1.07); }

.step__num {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.step__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.step__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ---------- Rollen-Karten ---------- */

.role {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.role__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.role:hover .role__img { transform: scale(1.06); }

.role::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 6, 12, 0.96) 8%, rgba(7, 6, 12, 0.35) 55%, transparent 100%);
}

.role__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(22px, 2.4vw, 30px);
}

.role__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.role__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(246, 244, 251, 0.78); }

/* ---------- Discord-CTA ---------- */

.join {
  padding: clamp(56px, 9vh, 100px) clamp(24px, 5vw, 64px);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(123, 60, 255, 0.20), transparent 60%),
    var(--bg-soft);
}

.join__title {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.join__lead {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--text-muted);
}

.join__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 40px);
}

.join__note {
  margin: 22px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Footer ---------- */
/* Der Markenname bleibt immer zusammen — nie "Slug" in der einen und "V" in
   der naechsten Zeile. */
.brand-name { white-space: nowrap; }


.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 32px var(--margin-x) 44px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  color: var(--text-faint);
}

.site-footer a { color: var(--text-faint); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); }
.site-footer__links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Reveal-Helfer ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__track { height: 220vh; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { gap: 12px; }

  .nav.is-open {
    position: fixed;
    inset: 72px 0 auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--margin-x) 22px;
    background: rgba(7, 6, 12, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .nav.is-open a {
    padding: 16px 0;
    font-size: 15px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__track { height: 190vh; }
  .chapter { padding: 10vh var(--margin-x); }
  .chapter--right { justify-content: flex-start; }
  .hero__kicker { font-size: 10px; letter-spacing: 0.2em; }
  .hero__actions .btn, .join__actions .btn { width: 100%; max-width: 320px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }

  /* Ohne Animation soll trotzdem alles sichtbar sein */
  [data-reveal],
  .card-info { opacity: 1 !important; transform: none !important; }
  .statement__text .word { opacity: 1 !important; transform: none !important; }
  .hero__media { transform: none !important; }
  .chapters__layer.is-active { transform: none; }
}