/* ==========================================================================
   AI BRIDGE PARTNERS — hero-video.css

   Der AI-Core im Hero. Kein Videoplayer, sondern eine Fläche, die nach
   links in den dunklen Grund ausläuft: weiche Maske statt harter Kante,
   radialer Lichtschein statt Rahmen, keine Bedienelemente.

   Auf schmalen Geräten wird aus dem angeschnittenen Panel eine ruhige
   16:9-Fläche unter den Handlungsaufforderungen.
   ========================================================================== */

.hero-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);

  /* Mobil zuerst: eigenständige Fläche unter den CTAs. Das feste
     Seitenverhältnis reserviert den Platz, bevor das Poster geladen ist. */
  margin-top: clamp(2rem, 6vw, 3rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hair);
}

/* ---------- Poster und Video liegen deckungsgleich ---------- */
.hero-media__poster,
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.hero-media__poster {
  z-index: 1;
  transition: opacity 0.8s var(--ease);
}

.hero-media__video {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

/* Läuft das Video, tritt das Poster zurück. Beide zeigen dasselbe Bild —
   das Poster ist der erste Frame der Schleife, deshalb springt nichts. */
.hero-media[data-state='playing'] .hero-media__video { opacity: 1; }
.hero-media[data-state='playing'] .hero-media__poster { opacity: 0; }

/* ---------- Lichtschein statt Rahmen ---------- */
.hero-media::before {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: 2;
  background: radial-gradient(
    ellipse 44% 50% at 50% 48%,
    rgba(96, 214, 255, 0.14),
    rgba(76, 141, 255, 0.08) 46%,
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Sehr dezente Vignette, damit die Fläche nicht als Rechteck aufliegt. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    ellipse 78% 74% at 50% 50%,
    transparent 52%,
    rgba(4, 6, 12, 0.55) 100%
  );
  pointer-events: none;
}

/* ==========================================================================
   Ab 1100 px — Split-Hero: Text links, Core rechts über die Spalte hinaus
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__inner { position: relative; }

  /* Der Text behält seine Spalte, der Core bekommt den Rest. */
  .hero .eyebrow,
  .hero__title,
  .hero__grid,
  .hero__foot {
    position: relative;
    z-index: 2;
    max-width: 58%;
  }

  /* Die Überschrift muss in der schmaleren Spalte zweizeilig bleiben —
     sonst zerfällt die Zeilenchoreografie in vier Fragmente. */
  .hero__title { font-size: clamp(3.2rem, 5.2vw, 4.9rem); }

  /* Beschreibung und Knöpfe stehen jetzt untereinander statt nebeneinander.
     Nebeneinander schöbe die Knopfreihe bis an den rechten Rand der
     Textspalte — und damit vor den hellen Teil des Videos. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 2.4vw, 2.4rem);
    align-items: start;
  }

  .hero-media {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);

    /* Läuft bis an den Bildschirmrand, statt in der Spalte zu enden —
       das nimmt dem Panel die Anmutung einer Videobox. Die Rechnung
       überbrückt die Randspalte, die die Shell bei breiten Fenstern
       rechts frei lässt. */
    left: 44%;
    right: calc((100% - 100vw) / 2);

    /* Der 40vw-Anteil hält das Panel bei schmalen Fenstern flach genug,
       damit der Core beim Zuschneiden nicht rechts abgeschnitten wird. */
    height: min(62vh, 34rem, 40vw);

    margin-top: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Beschnitten wird überwiegend rechts: Der Core sitzt in der Bildmitte
     und soll nicht in die weich ausgeblendete linke Kante rutschen. Die
     äußeren Datenflächen dürfen dabei angeschnitten werden. */
  .hero-media__poster,
  .hero-media__video {
    object-position: 28% center;
  }

  /* Der Lichtschein wandert mit dem Core nach rechts. */
  .hero-media::before {
    background: radial-gradient(
      ellipse 42% 52% at 56% 48%,
      rgba(96, 214, 255, 0.16),
      rgba(76, 141, 255, 0.09) 44%,
      transparent 70%
    );
  }

  /* Weiches Auslaufen nach links, oben und unten. Ohne Maskenunterstützung
     übernimmt der Verlauf in ::after die Aufgabe (siehe unten). */
  @supports (mask-image: linear-gradient(#000, #000)) or
            (-webkit-mask-image: linear-gradient(#000, #000)) {
    .hero-media {
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 28%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 8%, #000 24%,
                        #000 74%, rgba(0, 0, 0, 0.4) 90%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 28%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 8%, #000 24%,
                        #000 74%, rgba(0, 0, 0, 0.4) 90%, transparent 100%);
      mask-composite: intersect;
    }
    /* Bei aktiver Maske übernimmt sie das Ausblenden — die Vignette darüber
       würde die Kanten sonst doppelt abdunkeln. */
    .hero-media::after { display: none; }
  }

  /* Rückfallebene ohne Masken: Verläufe über das Video legen. */
  @supports not ((mask-image: linear-gradient(#000, #000)) or
                 (-webkit-mask-image: linear-gradient(#000, #000))) {
    .hero-media::after {
      background:
        linear-gradient(90deg, var(--ink-800) 0%, rgba(5, 7, 14, 0.6) 16%, transparent 34%),
        linear-gradient(180deg, var(--ink-800) 0%, transparent 15%, transparent 84%, var(--ink-800) 100%);
    }
  }
}

@media (min-width: 1500px) {
  .hero-media {
    left: 46%;
    height: min(66vh, 40rem);
  }
}

/* ==========================================================================
   Keine Bewegung erwünscht — Poster steht still, nichts blendet
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-media__poster,
  .hero-media__video {
    transition: none;
  }
}