/* === Design-Variablen === */
:root {
  /* Zeile (gesamter Buchstabenblock) */
  --zeilen-breite: 100vw;
  --zeilen-hoehe: 100vh;

  /* Viewport-Padding (Raender zum Browserfenster) */
  --viewport-padding-x: 0px;         /* links & rechts */
  --viewport-padding-y: 0;         /* oben & unten */

  /* Offset (Verschiebung wenn nicht zentriert) */
  --offset-x: 0px;
  --offset-y: 0px;

  /* === Individuelle Buchstaben-Steuerung ===
     width:  flex-grow (1 = Standard, 0.8 = schmaler, 1.2 = breiter)
     height: Hoehe relativ zum Container (100% = voll)
     gap:    Abstand rechts zum naechsten Buchstaben */

  --letter-0-width: 1;       /* F */
  --letter-0-height: 100%;
  --letter-0-gap: 0%;

  --letter-1-width: 1;       /* E */
  --letter-1-height: 100%;
  --letter-1-gap: 0%;

  --letter-2-width: 1;       /* I */
  --letter-2-height: 100%;
  --letter-2-gap: 0%;

  --letter-3-width: 1;       /* N */
  --letter-3-height: 100%;
  --letter-3-gap: 0%;

  --letter-4-width: 1;       /* S */
  --letter-4-height: 100%;
  --letter-4-gap: 0%;

  --letter-5-width: 1;       /* C */
  --letter-5-height: 100%;
  --letter-5-gap: 0%;

  --letter-6-width: 1;       /* H */
  --letter-6-height: 100%;
  --letter-6-gap: 0%;

  --letter-7-width: 1;       /* D */
  --letter-7-height: 100%;
  --letter-7-gap: 0%;

  --letter-8-width: 1;       /* E */
  --letter-8-height: 100%;
  --letter-8-gap: 0%;

  --letter-9-width: 1;       /* N */
  --letter-9-height: 100%;
  --letter-9-gap: 0%;

  --letter-10-width: 1;      /* S */
  --letter-10-height: 100%;
  --letter-10-gap: 0%;
}

/* === Reset & Basis === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ffffff;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: "Bebas Neue", sans-serif;
}

/* === Page Wrapper === */
.page-wrapper {
  position: relative;
}

/* === Sticky Wrapper: FEINSCHDENS bleibt fixiert waehrend Scroll === */
.scene-sticky-wrapper {
  position: relative;
  height: 100vh;
}

/* === Scene: weisser Vollbild-Container, sticky waehrend Scroll === */
.scene {
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Buchstaben-Zeile === */
.letters-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  width: var(--zeilen-breite);
  height: var(--zeilen-hoehe);
  padding: var(--viewport-padding-y) var(--viewport-padding-x);
  position: relative;
  z-index: 2;
  transform: translate(var(--offset-x), var(--offset-y));
}

/* === Einzelner Buchstabe === */
.letter {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  margin: 0;

  /* Ein Bild fuer alle Buchstaben – einmal ueber ganzen Viewport gestreckt */
  background-size: 100vw 100vh;
  background-repeat: no-repeat;

  /* Unsichtbar bis Animation startet */
  opacity: 0;

  /* GPU-Layer erzwingen fuer performante Animation */
  transform: translateZ(0);

  transition: filter 0.5s ease;

  /* Maske startet weit oberhalb des Viewports */
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center -200vh;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center -200vh;

  will-change: mask-position, opacity;
}

/* === Wrapper fuer Buchstaben-Rand (drop-shadow ausserhalb der Maske) === */
.letter-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  -webkit-filter:
    drop-shadow(2px 0 0 rgba(0, 0, 0, 0.9))
    drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.9));
  filter:
    drop-shadow(2px 0 0 rgba(0, 0, 0, 0.9))
    drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.9));
}

/* === Animation: Maske faellt von oben herab === */
@keyframes maskFall {
  from {
    -webkit-mask-position: center -200vh;
    mask-position: center -200vh;
    opacity: 0;
  }
  to {
    -webkit-mask-position: center 50%;
    mask-position: center 50%;
    opacity: 1;
  }
}

.letter.animate {
  animation: maskFall forwards;
}

/* === Gestaffelte Verzoegerung: von aussen nach innen === */
.letter[data-index="0"]  { animation-delay: 0s; }
.letter[data-index="10"] { animation-delay: 0s; }
.letter[data-index="1"]  { animation-delay: 0.15s; }
.letter[data-index="9"]  { animation-delay: 0.15s; }
.letter[data-index="2"]  { animation-delay: 0.3s; }
.letter[data-index="8"]  { animation-delay: 0.3s; }
.letter[data-index="3"]  { animation-delay: 0.45s; }
.letter[data-index="7"]  { animation-delay: 0.45s; }
.letter[data-index="4"]  { animation-delay: 0.6s; }
.letter[data-index="6"]  { animation-delay: 0.6s; }
.letter[data-index="5"]  { animation-delay: 0.75s; }

/* === Individuelle Buchstaben-Groessen & Abstaende === */
.letter[data-index="0"]  { flex-grow: var(--letter-0-width);  height: var(--letter-0-height);  margin-right: var(--letter-0-gap); }
.letter[data-index="1"]  { flex-grow: var(--letter-1-width);  height: var(--letter-1-height);  margin-right: var(--letter-1-gap); }
.letter[data-index="2"]  { flex-grow: var(--letter-2-width);  height: var(--letter-2-height);  margin-right: var(--letter-2-gap); }
.letter[data-index="3"]  { flex-grow: var(--letter-3-width);  height: var(--letter-3-height);  margin-right: var(--letter-3-gap); }
.letter[data-index="4"]  { flex-grow: var(--letter-4-width);  height: var(--letter-4-height);  margin-right: var(--letter-4-gap); }
.letter[data-index="5"]  { flex-grow: var(--letter-5-width);  height: var(--letter-5-height);  margin-right: var(--letter-5-gap); }
.letter[data-index="6"]  { flex-grow: var(--letter-6-width);  height: var(--letter-6-height);  margin-right: var(--letter-6-gap); }
.letter[data-index="7"]  { flex-grow: var(--letter-7-width);  height: var(--letter-7-height);  margin-right: var(--letter-7-gap); }
.letter[data-index="8"]  { flex-grow: var(--letter-8-width);  height: var(--letter-8-height);  margin-right: var(--letter-8-gap); }
.letter[data-index="9"]  { flex-grow: var(--letter-9-width);  height: var(--letter-9-height);  margin-right: var(--letter-9-gap); }
.letter[data-index="10"] { flex-grow: var(--letter-10-width); height: var(--letter-10-height); margin-right: var(--letter-10-gap); }

/* === Handschrift-Slogan Section === */
.handwriting-section {
  position: relative;
  min-height: 80vh;
  background: transparent;
  padding: 0 5vw;
  margin-top: -8vh;
}

.handwriting-svg {
  position: sticky;
  top: 5vh;
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 900px;
  height: auto;
  overflow: visible;
}

.handwriting-text {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(48px, 13vw, 160px);
  fill: #1a1a1a;
  stroke: none;
}

/* === Portfolio Preview Slider === */
.portfolio-preview {
  position: relative;
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.slider-track {
  display: flex;
  height: 100%;
  will-change: transform;
  user-select: none;
}

.slider-track img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Glasmorphism PORTFOLIO Label */
.portfolio-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(60px, 12vw, 200px);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.15em 0.5em;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
  white-space: nowrap;
}

.portfolio-label.visible {
  opacity: 1;
}

/* Fade-out beim Klick */
body.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* === Responsivitaet Mobile === */
@media (max-width: 1024px) {
  /* Name: 25% des Bildschirms */
  .scene-sticky-wrapper {
    height: 25vh;
  }
  .scene {
    height: 25vh;
  }
  .letters-row {
    height: 25vh;
  }

  /* Slogan: direkt darunter, kein Sticky, kein Scroll nötig */
  .handwriting-section {
    margin-top: -5vh;
    min-height: 0 !important;
    height: auto;
    padding: 0vh 5vw;
  }
  .handwriting-svg {
    position: static;
    width: 100%;
    height: 20vh;
    overflow: visible;
  }

  /* Slogan-Schrift Mobile */
  .handwriting-text {
    font-size: clamp(120px, 30vw, 180px);
  }

  /* Rand dünner auf Mobile */
  .letter-wrapper {
    -webkit-filter:
      drop-shadow(1px 0 0 rgba(0, 0, 0, 0.9))
      drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.9))
      drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9))
      drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9));
    filter:
      drop-shadow(1px 0 0 rgba(0, 0, 0, 0.9))
      drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.9))
      drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9))
      drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9));
  }
}