/* LyngsA drone animation — isolated test build */
.hero-media--drone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-media--drone > video,
.hero-media--drone > img {
  position: relative;
  z-index: 1;
}

.hero-media--drone figcaption {
  position: relative;
  z-index: 8;
}

.drone-animation {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.drone-animation__craft {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(88%, 690px);
  opacity: 0;
  transform: translate3d(-125%, -48%, 0) rotate(-12deg) scale(.72);
  transform-origin: 52% 52%;
  will-change: transform, opacity;
}

.drone-animation__image {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, .48))
    drop-shadow(0 0 12px rgba(255, 255, 255, .18));
}

.drone-animation__shadow {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 40%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  filter: blur(14px);
  opacity: 0;
  transform: translateX(-50%) scale(.6);
  will-change: transform, opacity;
}

.drone-animation__rotor {
  position: absolute;
  display: block;
  width: 27%;
  aspect-ratio: 3.5 / 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-left-color: rgba(255, 255, 255, .08);
  border-right-color: rgba(255, 255, 255, .12);
  filter: blur(.35px);
  opacity: .8;
  transform-origin: center;
}

.drone-animation__rotor::after {
  content: "";
  position: absolute;
  inset: 42% 5% auto;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .85),
    transparent
  );
}

.drone-animation__rotor--one {
  left: 1%;
  top: 42%;
}

.drone-animation__rotor--two {
  left: 22%;
  top: 8%;
  width: 25%;
}

.drone-animation__rotor--three {
  right: 8%;
  top: 58%;
  width: 27%;
}

.drone-animation__rotor--four {
  right: 0;
  top: 27%;
}

.drone-animation__gimbal {
  position: absolute;
  left: 35.5%;
  top: 60%;
  width: 9.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: 50% 22%;
  will-change: transform;
}

.drone-animation__lens {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #fff 0 10%, #8ffff0 16%, #27c7c0 38%, #07333b 70%);
  box-shadow:
    0 0 18px rgba(83, 255, 228, .72),
    inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.drone-animation.is-running .drone-animation__craft {
  animation: lyngsa-flight-route 9.6s cubic-bezier(.22, .72, .24, 1) both;
}

.drone-animation.is-running .drone-animation__shadow {
  animation: lyngsa-flight-shadow 9.6s ease-in-out both;
}

.drone-animation.is-running .drone-animation__rotor {
  animation: lyngsa-rotor-spin .12s linear infinite;
}

.drone-animation.is-running .drone-animation__gimbal {
  animation: lyngsa-gimbal-look 4.2s ease-in-out 3.05s both;
}

@keyframes lyngsa-flight-route {
  0% {
    opacity: 0;
    transform: translate3d(-125%, -35%, 0) rotate(-14deg) scale(.68);
  }

  7% {
    opacity: 1;
  }

  24% {
    opacity: 1;
    transform: translate3d(26%, -53%, 0) rotate(8deg) scale(.92);
  }

  31% {
    transform: translate3d(44%, -57%, 0) rotate(-5deg) scale(1.04);
  }

  38% {
    transform: translate3d(40%, -54%, 0) rotate(1.5deg) scale(1);
  }

  45% {
    transform: translate3d(40%, -56%, 0) rotate(-.8deg) scale(1);
  }

  54% {
    transform: translate3d(40%, -52%, 0) rotate(.8deg) scale(1);
  }

  63% {
    transform: translate3d(40%, -56%, 0) rotate(-.6deg) scale(1);
  }

  72% {
    opacity: 1;
    transform: translate3d(40%, -53%, 0) rotate(0deg) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate3d(57%, -64%, 0) rotate(8deg) scale(1.03);
  }

  100% {
    opacity: 0;
    transform: translate3d(165%, -95%, 0) rotate(19deg) scale(.68);
  }
}

@keyframes lyngsa-flight-shadow {
  0%, 8% {
    opacity: 0;
    transform: translateX(-105%) scale(.45);
  }

  28% {
    opacity: .34;
    transform: translateX(-20%) scale(.82);
  }

  42%, 72% {
    opacity: .3;
    transform: translateX(10%) scale(1);
  }

  82% {
    opacity: .18;
    transform: translateX(45%) scale(.72);
  }

  100% {
    opacity: 0;
    transform: translateX(145%) scale(.4);
  }
}

@keyframes lyngsa-rotor-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lyngsa-gimbal-look {
  0%, 10% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  28% {
    transform: translate(-44%, -58%) rotate(12deg);
  }

  50% {
    transform: translate(-61%, -44%) rotate(-13deg);
  }

  72% {
    transform: translate(-47%, -48%) rotate(6deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@media (max-width: 900px) {
  .drone-animation__craft {
    top: 48%;
    width: min(92%, 560px);
  }

  @keyframes lyngsa-flight-route {
    0% {
      opacity: 0;
      transform: translate3d(-125%, -35%, 0) rotate(-13deg) scale(.68);
    }

    7% {
      opacity: 1;
    }

    25% {
      opacity: 1;
      transform: translate3d(7%, -52%, 0) rotate(7deg) scale(.9);
    }

    33% {
      transform: translate3d(18%, -56%, 0) rotate(-4deg) scale(1.03);
    }

    40%, 72% {
      opacity: 1;
      transform: translate3d(15%, -53%, 0) rotate(0deg) scale(1);
    }

    80% {
      transform: translate3d(30%, -63%, 0) rotate(8deg) scale(1.02);
    }

    100% {
      opacity: 0;
      transform: translate3d(155%, -92%, 0) rotate(18deg) scale(.68);
    }
  }
}

@media (max-width: 620px) {
  .drone-animation__craft {
    top: 47%;
    width: min(96%, 410px);
  }

  @keyframes lyngsa-flight-route {
    0% {
      opacity: 0;
      transform: translate3d(-125%, -35%, 0) rotate(-12deg) scale(.68);
    }

    7% {
      opacity: 1;
    }

    27% {
      opacity: 1;
      transform: translate3d(-2%, -52%, 0) rotate(7deg) scale(.9);
    }

    35% {
      transform: translate3d(7%, -56%, 0) rotate(-4deg) scale(1.02);
    }

    42%, 72% {
      opacity: 1;
      transform: translate3d(5%, -53%, 0) rotate(0deg) scale(1);
    }

    80% {
      transform: translate3d(18%, -62%, 0) rotate(8deg) scale(1.02);
    }

    100% {
      opacity: 0;
      transform: translate3d(150%, -90%, 0) rotate(17deg) scale(.68);
    }
  }
}