/* Ignition hero · the Seedance film + living constellation, ported from
   modemarketing.ai (approved hero f869087) onto the .co.uk homepage.
   Self-contained layer · loaded by front-page.php only · adds media layers
   INSIDE .gp-hero under the existing copy. No other template affected. */

.gp-hero { position: relative; overflow: hidden; }
.gp-hero__content { position: relative; z-index: 2; }

.gp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Film wrapper · leans gently toward the cursor (JS transform · 1.06
   overscale keeps edges covered during the drift) */
.gp-hero__film {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  will-change: transform;
}
.gp-hero__media-poster,
.gp-hero__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
}
.gp-hero__media-video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.gp-hero__media-video.ready { opacity: 1; }
.gp-hero__media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.82) 34%, rgba(10, 10, 10, 0.35) 58%, rgba(10, 10, 10, 0.08) 78%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0) 18%),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 22%);
}
/* Living constellation over the film · above the shade so the
   cursor-reactive web spans the whole hero */
.gp-hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gp-hero__media-video { display: none; }
}