/* Graskind-Welt – Kapitel hero: Regeln für den Welt-Modus (.has-world [data-world="ready"] …) und Szenen-Ergänzungen.
 * Erster Bildschirm (Überschrift, Text, Knöpfe, Chips) bleibt an derselben Stelle; dahinter folgt Scrollweg für
 * das Eintauchen in das Pop-up-Buch (scenes/hero.js). Die DOM-Bühne wird weich ausgeblendet, die 3D-Bühne übernimmt.
 */

/* Längerer Scrollbereich – nur im Welt-Modus. Desktop: Inhalt bleibt im ersten Bildschirm mittig */
@media (min-width: 901px) {
  .has-world #start[data-world="ready"] {
    align-items: flex-start;
    min-height: calc(max(100svh, 700px) + 150svh);
  }
  .has-world #start[data-world="ready"] .hero__inner {
    min-height: calc(max(100svh, 700px) - var(--header-h) - 2.5rem - clamp(90px, 10vw, 150px));
    align-content: center;
  }
}
@media (max-width: 900px) {
  .has-world #start[data-world="ready"] { padding-bottom: calc(clamp(90px, 10vw, 150px) + 130svh); }
}

/* DOM-Bühne (Bogen + Pop-ups) weicht der 3D-Bühne; Platz im Layout bleibt erhalten */
.has-world #start[data-world="ready"] .hero__world {
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease-out, ease), visibility 0s linear .9s;
}

/* Lesbarkeit: weicher Papierschleier hinter dem Text (liegt über der Landschaft) */
.has-world #start[data-world="ready"] .hero__copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -22% -12% -40%;
  background: radial-gradient(closest-side, rgba(251, 247, 238, .82), rgba(251, 247, 238, .55) 55%, rgba(251, 247, 238, 0));
  animation: hero-veil .9s var(--ease-out, ease) both;
}
@keyframes hero-veil { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  /* Mobil: Text oben und unten, Buch dazwischen – Schleier hinter Einleitung, Knöpfen und Chips */
  .has-world #start[data-world="ready"] .hero__copy::before { content: none; }
  .has-world #start[data-world="ready"] .hero__inner { position: relative; }
  .has-world #start[data-world="ready"] .hero__inner::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: -16px; right: -16px; bottom: -2.5rem; height: 21rem;
    background: linear-gradient(to bottom, rgba(251, 247, 238, 0), rgba(251, 247, 238, .78) 30%, rgba(251, 247, 238, .78) 80%, rgba(251, 247, 238, 0));
  }
  .has-world #start[data-world="ready"] .hero__copy .lead,
  .has-world #start[data-world="ready"] .hero__actions { position: relative; z-index: 1; }
  /* Einleitung als Papierkarte: liegt sonst auf Wiese und Pop-up-Buch und ist schlecht lesbar */
  .has-world #start[data-world="ready"] .hero__copy .lead {
    margin-top: .8rem; padding: .85rem 1rem .95rem; border-radius: 18px;
    color: var(--ink); background: rgba(251, 247, 238, .95);
    box-shadow: 0 10px 28px rgba(24, 34, 20, .16), 0 1px 3px rgba(24, 34, 20, .08);
  }
  .has-world #start[data-world="ready"] .hero__actions .btn--ghost { background: rgba(251, 247, 238, .95); }
}

/* Beschriftung beim Überfahren eines Produkts */
.world-label.hero-label { background: rgba(251, 247, 238, .95); color: var(--gk-green-deep, #04785C); }

/* DOM-Fassung: Wiese bleibt in der Hero-Sektion (eigener Stapelkontext), damit die gerissene
   Papierkante des Quartett-Kapitels über den Grashalm-Wurzeln liegt statt einer harten Kante */
.hero { isolation: isolate; }