/* Hero = das Intro (Imrans Arbeit, als Hero eingebaut) */

/* ---------- Hero = das Intro ---------- */
/* Imrans Intro ist der Hero. Eine Nähnadel näht den Schriftzug auf
   ruhendes Leinen, die Kamera fährt von den Fasern zurück — und wenn
   der letzte Stich sitzt, blenden Untertitel und Anruf um den fertigen
   Schriftzug ein. Kein Schnitt, ein Stück. Bewusst einfarbig hell;
   alle Farben stehen explizit. */
:root {
  --cloth: #efebe2;
  --cloth-lit: #fffdf8;
  --cloth-deep: #c3baa9;
  --thread: #4a2c18;
  --thread-lit: #8a5c3c;
  --ink-faint: #8d8579;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--cloth);
  isolation: isolate;
}

#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cloth);
  cursor: pointer;
}

/* Unterkante: das Bühnenlicht des Heros läuft in den ruhigen Stoff der
   Seite aus. Dazu blendet hier derselbe Stoff (Bindung + Fasern, ohne
   Falten und Licht) weich ein — so gibt es keine Kante, nur ein Ende
   der Beleuchtung. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 280px;
  z-index: 1;
  background-color: var(--cloth);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.28'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(88, 74, 54, 0.05) 0px, rgba(255, 253, 247, 0.22) 4px, rgba(88, 74, 54, 0.05) 8px),
    repeating-linear-gradient(0deg, rgba(88, 74, 54, 0.045) 0px, rgba(255, 253, 247, 0.18) 4px, rgba(88, 74, 54, 0.045) 8px);
  background-blend-mode: multiply, multiply, multiply;
  /* S-Kurve statt linear: oben und unten Steigung null, kein Knick,
     den das Auge als Querlinie liest (siehe main::before in stoff.css) */
  --einblenden: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.007) 5%,
    rgba(0, 0, 0, 0.028) 10%,
    rgba(0, 0, 0, 0.061) 15%,
    rgba(0, 0, 0, 0.104) 20%,
    rgba(0, 0, 0, 0.156) 25%,
    rgba(0, 0, 0, 0.216) 30%,
    rgba(0, 0, 0, 0.282) 35%,
    rgba(0, 0, 0, 0.352) 40%,
    rgba(0, 0, 0, 0.425) 45%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.575) 55%,
    rgba(0, 0, 0, 0.648) 60%,
    rgba(0, 0, 0, 0.718) 65%,
    rgba(0, 0, 0, 0.784) 70%,
    rgba(0, 0, 0, 0.844) 75%,
    rgba(0, 0, 0, 0.896) 80%,
    rgba(0, 0, 0, 0.939) 85%,
    rgba(0, 0, 0, 0.972) 90%,
    rgba(0, 0, 0, 0.993) 95%,
    #000 100%);
  -webkit-mask-image: var(--einblenden);
  mask-image: var(--einblenden);
  pointer-events: none;
}

/* Sobald das Intro durch ist, lässt die Bühne Klicks nach unten durch */
.hero.ist-fertig #stage {
  cursor: default;
  pointer-events: none;
}

/* Kamera: fährt langsam von nah nach weit */
#camera {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Der Stoff liegt still. Nur Nadel und Faden bewegen sich. */
#cloth {
  position: absolute;
  inset: -40%;
  background-color: var(--cloth);
}

/* Bindung: Kette und Schuss, dazu ein Hauch Köper-Diagonale */
#cloth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      90deg,
      rgba(88, 74, 54, 0.055) 0px,
      rgba(255, 253, 247, 0.24) 4px,
      rgba(88, 74, 54, 0.055) 8px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(88, 74, 54, 0.048) 0px,
      rgba(255, 253, 247, 0.2) 4px,
      rgba(88, 74, 54, 0.048) 8px
    ),
    repeating-linear-gradient(
      46deg,
      rgba(96, 80, 58, 0.03) 0px,
      rgba(255, 255, 250, 0.11) 7px,
      rgba(96, 80, 58, 0.03) 14px
    );
  mix-blend-mode: multiply;
}

/* Fasern, Flusen, Dichteschwankungen — entsättigt, sonst rauscht es bunt */
#cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23b)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 260px 260px, 340px 340px, 1500px 1500px;
  opacity: 0.42;
  mix-blend-mode: multiply;
}

/* Falten */
#folds {
  position: absolute;
  inset: -40%;
  mix-blend-mode: multiply;
  opacity: 0.85;
  background: linear-gradient(101deg, transparent 12%, var(--cloth-deep) 19%, transparent 27%),
    linear-gradient(97deg, transparent 22%, rgba(255, 255, 250, 0.9) 26%, transparent 31%),
    linear-gradient(94deg, transparent 38%, var(--cloth-deep) 46%, transparent 55%),
    linear-gradient(91deg, transparent 56%, rgba(255, 255, 250, 0.8) 60%, transparent 65%),
    linear-gradient(86deg, transparent 64%, var(--cloth-deep) 72%, transparent 80%),
    linear-gradient(168deg, transparent 26%, rgba(172, 162, 146, 0.6) 34%, transparent 44%),
    linear-gradient(174deg, transparent 60%, rgba(178, 168, 152, 0.5) 68%, transparent 78%);
}

/* Der Schriftzug sitzt etwas über der Mitte — darunter ist Platz für
   Untertitel und Anruf, ohne dass die Nadel im Weg liegt. */
#logo-wrap {
  position: absolute;
  inset: 0 0 22% 0;
  display: grid;
  place-items: center;
}

#logo {
  width: min(86vw, 820px);
  overflow: visible;
}

#stitches {
  fill: none;
  stroke: var(--thread);
  stroke-width: 4.1;
  stroke-linecap: round;
}
/* Schatten der Naht während des Nähens: ein zweiter Pfad, leicht versetzt
   und weich — billig. Der echte Filter (#f-stitch, zwei Schlagschatten)
   liegt erst auf der fertigen Naht, sonst rechnet er bei jedem Bild. */
#stitches-schatten {
  fill: none;
  stroke: rgba(84, 74, 60, 0.42);
  stroke-width: 5.2;
  stroke-linecap: round;
  transform: translate(1.6px, 2.1px);
}
.hero.ist-fertig #stitches { filter: url(#f-stitch); }
.hero.ist-fertig #stitches-schatten { display: none; }
#needle { will-change: transform; }

/* Faden, der von der Nadel wegläuft */
#thread-line {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.th-core {
  fill: none;
  stroke: var(--thread);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.th-sheen {
  fill: none;
  stroke: rgba(150, 150, 160, 0.75);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.th-cast {
  fill: none;
  stroke: rgba(92, 80, 62, 0.28);
  stroke-width: 3.4;
  stroke-linecap: round;
}

/* Die Nadel — transform-origin sitzt auf der Spitze, dadurch bleibt
   sie beim Skalieren und Drehen genau auf dem Stichpunkt. */
#needle {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 40px 298px;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

/* Nählicht, ruhig über der Szene */
#light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(44% 40% at 50% 42%, rgba(255, 251, 240, 0.5) 0%, transparent 72%),
    radial-gradient(120% 108% at 50% 50%, transparent 36%, rgba(88, 74, 54, 0.4) 100%);
}

#veil {
  position: absolute;
  inset: 0;
  background: var(--cloth-lit);
  opacity: 0;
  pointer-events: none;
}

/* Weiter: lesbar, mittig unten, groß genug für den Daumen */
#skip {
  position: absolute;
  right: var(--rand);   /* unten rechts — der Hero-Inhalt steht jetzt schon während der Naht unten mittig */
  bottom: 18px;
  z-index: 3;
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--schrift-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinte-leise);
  background: rgba(255, 253, 248, 0.55);
  border: 1px solid rgba(43, 29, 21, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.4s ease, border-color 0.2s ease;
}
#skip:hover {
  color: var(--tinte);
  border-color: var(--tinte);
}

/* Der Fuß des Heros: alles — Zeile „was ist das", Lead, Knöpfe,
   Kontaktzeile — steht, sobald die Kopfzeile kommt (body.kopf-da, kurz
   nach dem ersten Stich, die Kamera ist dann draußen); leicht gestaffelt
   von oben nach unten. Die Naht läuft derweil weiter. */
.hero__inhalt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 6vh, 64px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--raum-2);
  padding-inline: var(--rand);
  text-align: center;
  pointer-events: none;
}
.hero__inhalt > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease-out 0.15s, transform 0.9s var(--kurve) 0.15s;
}
.hero__inhalt > :nth-child(2) { transition-delay: 0.3s, 0.3s; }
.hero__inhalt > :nth-child(3) { transition-delay: 0.45s, 0.45s; }
.hero__inhalt > :nth-child(4) { transition-delay: 0.6s, 0.6s; }
.hero.ist-fertig .hero__inhalt,
body.kopf-da .hero__inhalt {
  pointer-events: auto;
}
.hero.ist-fertig .hero__inhalt > *,
body.kopf-da .hero__inhalt > * {
  opacity: 1;
  transform: none;
}

/* Kopfzeile: kommt kurz nach dem ersten Stich — der Anruf-Knopf wartet
   nicht bis zum Ende der Naht */
.kopf {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
body.kopf-da .kopf {
  opacity: 1;
}

.hero__was {
  margin: 0;
  font-family: var(--schrift-sans);
  font-size: 1.0625rem;   /* eine Stufe über --t-eyebrow (Abra: „ein kleines Stück größer") */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--thread);
}

.hero__zeile {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte-leise);
}
.hero__punkt { margin-inline: 0.35em; }
.hero__mehr {
  margin-left: 0.5em;
  color: var(--tinte);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--garn);
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease-out;
}
.hero__mehr:hover { text-decoration-color: var(--tinte); }
@media (max-width: 559px) {
  .hero__zeile { font-size: 0.95rem; }
}

.hero__lead {
  max-width: 44ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinte);
}

/* Mehr Licht auf dem Stoff hinter dem Text — hebt den Kontrast, ohne
   einen Kasten zu ziehen. Der Fleck endet exakt an der Hero-Unterkante
   (der Hero schneidet mit overflow:hidden ab) und ist dort schon
   transparent — sonst steht in der Mitte eine Kante im Verlauf. */
.hero__inhalt::before {
  content: "";
  position: absolute;
  inset: -40% -10% calc(-1 * clamp(24px, 6vh, 64px));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  background: radial-gradient(
    60% 50% at 50% 46%,
    rgba(255, 253, 248, 0.62) 0%,
    rgba(255, 253, 248, 0.3) 40%,
    rgba(255, 253, 248, 0.08) 78%,
    transparent 100%
  );
  pointer-events: none;
}
.hero.ist-fertig .hero__inhalt::before,
body.kopf-da .hero__inhalt::before {
  opacity: 1;
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--raum-1);
}

/* Sobald faden.js den Faden übernimmt, verschwindet der Hero-eigene */
body.faden-aktiv #thread-line {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__inhalt > *,
  .hero__inhalt::before,
  .kopf {
    transition: none;
  }
}