/* ════════════════════════════════════════════════
   NeverAge – Modul-Animationen (Hero, rechte Lücke)
   Positionierung; die Zeichnung übernimmt module-anim.js
   ════════════════════════════════════════════════ */

.hero { position: relative; }

/* Hero-Text auf eine linke Spalte begrenzen → rechts entsteht Platz */
.hero h1,
.hero .desc,
.hero .hero-label,
.hero .hero-meta { max-width: 580px; }

/* Inhalt liegt über der Animation (Sicherheit) */
.hero > *:not(.module-anim) { position: relative; z-index: 1; }

.module-anim {
  position: absolute;
  top: 0; bottom: 0;
  margin: auto 0;                 /* vertikal im Hero zentriert */
  right: 0;
  width: clamp(230px, 22vw, 340px);
  height: clamp(230px, 24vw, 320px);
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: modAnimIn 1.2s .5s ease forwards;
}
@keyframes modAnimIn { from { opacity: 0; } to { opacity: .9; } }

/* Mobil & Tablet: leuchtendes Objekt oben, Text per Scrim klar davor */
@media (max-width: 980px) {
  .hero h1,
  .hero .desc,
  .hero .hero-label,
  .hero .hero-meta { max-width: none; }
  /* Objekt in die obere Hero-Zone rücken, kompakt & kräftig */
  .module-anim {
    top: 0; right: 0; left: 0; bottom: auto;
    margin: 0 auto;
    width: min(88vw, 440px);
    height: min(52vh, 400px);
    filter: saturate(1.18) brightness(1.12);
    animation: modAnimInBg 1.4s .4s ease forwards;
  }
  @keyframes modAnimInBg { from { opacity: 0; } to { opacity: .62; } }
  /* Lesbarkeits-Scrim: über der Animation (z 0), unter dem Text (z 1) */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(135% 60% at 50% 74%,
        rgba(11,11,16,.9) 0%, rgba(11,11,16,.6) 42%, rgba(11,11,16,0) 78%);
  }
  .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
  .hero .desc { text-shadow: 0 2px 16px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.6); }
}

@media (prefers-reduced-motion: reduce) {
  .module-anim { animation: none; opacity: .75; }
}