/* Hero trailer -------------------------------------------------------------
 *
 * Its own file rather than an entry in dronivo.css: that one is regenerated
 * from the Webflow build by scrape/transform_css.py and would overwrite any
 * edit made to it.
 *
 * The layer sits exactly on top of .img_hero. Same z-index, but later in the
 * DOM — so it paints above the image without having to shift anything in the
 * Webflow stack (.hero_overlay stays at -1).
 */

.video_hero {
  z-index: -2;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The trailer is 16:9, the hero is 100svh. On tall, narrow viewports cover
     would otherwise crop to the centre — but the subject tends to sit in the
     upper third (horizon, drones against the sky). */
  object-position: center 40%;
  pointer-events: none;
  /* Starts invisible: until `canplay` the still frame underneath shows through,
     then it cross-fades. No hard cut, no black frame. */
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.video_hero.is-ready {
  opacity: 1;
}

/* Deliberately no CSS `filter` on the video: that forces a full-surface repaint
   every frame. The darkening is done by .hero_overlay, which already sits on
   top and is static. */

/* Strengthened scrim -----------------------------------------------------
 *
 * The Webflow gradient only darkens the top 26%. That was enough for the still
 * frame, which is uniformly dark — but the trailer has 20 shots, several of
 * them near-white sky. On those the headline becomes invisible and the body
 * copy unreadable.
 *
 * Hence a full-height gradient: dark at the top (nav + headline), open through
 * the middle (nothing sits there, so let the footage breathe), dark again at
 * the bottom (paragraph, button, "Learn more").
 *
 * Deliberately tied to `.is-ready` via an adjacent-sibling selector: with no
 * video — reduced motion, data saver, load failure — the rule never applies and
 * the hero looks exactly like the Webflow original.
 */
.video_hero.is-ready + .hero_overlay,
.video_hero.is-ready + .hero_overlay-4 {
  background-image: linear-gradient(
    180deg,
    rgba(6, 6, 6, 0.88) 0%,
    rgba(6, 6, 6, 0.68) 20%,
    rgba(6, 6, 6, 0.5) 38%,
    rgba(6, 6, 6, 0.32) 52%,
    rgba(6, 6, 6, 0.6) 70%,
    rgba(6, 6, 6, 0.76) 86%,
    rgba(6, 6, 6, 0.86) 100%
  );
}

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