/* ============================================================
   FARU EXPERIMENTAL — Partikel-Hero
   Heller Studio-Look: warmes Papier + Palme als Partikel-Held.
   Desktop: Palme als Echtzeit-Partikelsystem (Three.js), zerfaellt beim Scrollen.
   Reduced-motion / kein WebGL: Papier-Hero + Text ohne Partikel.
   Headline/CTA ab Frame 1 (rein CSS, schnelles LCP).
   ============================================================ */

/* Header dunkel über dem hellen Hero (überschreibt die Dark-Hero-Regeln der
   Startseite, die für den früheren dunklen Video-Hero gedacht waren). */
body[data-page="start"] .site-header:not(.is-scrolled) .brand { color: var(--ink); }
body[data-page="start"] .site-header:not(.is-scrolled) .site-nav > ul > li > a { color: var(--muted); }
body[data-page="start"] .site-header:not(.is-scrolled) .site-nav > ul > li > a:hover { color: var(--ink); }
body[data-page="start"] .site-header:not(.is-scrolled) .nav-toggle { color: var(--ink); border-color: var(--hair-strong); }
body[data-page="start"] .site-header:not(.is-scrolled) .header-cta { background: var(--ink); color: var(--bg); }

/* Die Section gibt den Scrollweg vor; die sichtbare Bühne (.hi-sticky) bleibt
   dabei fixiert, damit sich die Palme über einen längeren Scroll auflöst
   (nicht schon nach dem ersten Viewport). min-height steuert die Effektlänge.
   WICHTIG: .hero-island darf KEIN overflow:hidden/clip haben, sonst bricht
   das sticky-Verhalten. Das Clipping der Partikel macht .hi-sticky. */
.hero-island {
  position: relative;
  min-height: 190svh;
  isolation: isolate;
  background: var(--bg);
}
.hi-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* warmer Studio-Verlauf: Licht rechts hinter der Insel, Papier links */
  background:
    radial-gradient(115% 95% at 70% 40%, #FBF8F2 0%, var(--bg) 46%, #E4DACB 100%);
}

.hi-stage { position: absolute; inset: 0; z-index: 0; }
.hi-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.hi-canvas.is-on { opacity: 1; }

/* weiche Vignette + Lichtkegel: Tiefe + Textlesbarkeit links */
.hi-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 6%, rgba(243, 238, 230, 0.55) 32%, transparent 56%),
    radial-gradient(90% 60% at 50% 118%, rgba(20, 16, 12, 0.10), transparent 62%);
}

.hi-inner { position: relative; z-index: 2; max-width: 640px; }
.hi-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 6.6vw, 5.4rem);
  line-height: 1.01;
  letter-spacing: -0.03em;
  margin: 16px 0 22px;
  color: var(--ink);
}
.hi-lead {
  max-width: 44ch;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

/* Eintritts-Animation (dezent, einmalig) – rein CSS, damit die Headline nicht
   auf das Three.js-Modul wartet (schnelles LCP). Gestaffelt über nth-child. */
@keyframes hi-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.js .hi-inner [data-hi] { opacity: 0; animation: hi-rise 0.7s var(--ease) both; }
.js .hi-inner [data-hi]:nth-child(1) { animation-delay: 0.04s; }
.js .hi-inner [data-hi]:nth-child(2) { animation-delay: 0.12s; }
.js .hi-inner [data-hi]:nth-child(3) { animation-delay: 0.20s; }
.js .hi-inner [data-hi]:nth-child(4) { animation-delay: 0.28s; }

.hi-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}
.hi-hint::before {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin: 0 auto 12px;
  background: linear-gradient(var(--accent), transparent);
}

/* Mobile: Insel/Video als Bühne oben, Text unten mit Papier-Scrim */
@media (max-width: 820px) {
  .hi-sticky { align-items: flex-end; padding-bottom: clamp(84px, 16vh, 120px); }
  /* Stärkerer, weicher Papier-Schleier unten: die dichte Palme darf oben stehen,
     aber die Textzone bekommt genug gedämpftes Weiß für klare Lesbarkeit. */
  .hi-glow {
    background: linear-gradient(0deg,
      var(--bg) 32%,
      rgba(242, 237, 227, 0.94) 55%,
      rgba(242, 237, 227, 0.62) 72%,
      transparent 88%);
  }
  .hi-inner { max-width: 100%; }
  /* Eyebrow sitzt oben, wo der Schleier weicher ist -> kräftiger + dunkler,
     damit "Studio für digitale Auftritte" sicher lesbar bleibt. */
  .hi-inner .eyebrow { color: var(--ink); font-weight: 700; }
  .hi-title { font-size: clamp(2.4rem, 11vw, 3.7rem); }
  .hi-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hi-inner [data-hi] { animation: none; opacity: 1; transform: none; }
  .hi-canvas { display: none; }
}