/* ============================================================
   Florida Drone Experts - hero to services drone flight

   A scroll driven line art quadcopter, drawn in plan view per the
   Blueprint design system. It is a fixed overlay, so it adds no
   height between the hero and the services section and leaves both
   Elementor containers untouched.

   The line colour is set by the script as the drone crosses from the
   dark hero and stats band onto the white services section.
   ============================================================ */

.fde-drone-layer {
  --fde-drone-size: clamp(96px, 10.5vw, 168px);

  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  visibility: hidden;
  color: #FFFFFF;
}

.fde-drone-layer.is-flying {
  visibility: visible;
}

/* Position. Translated to a point, then pulled back by half its own box
   so the path coordinates describe the centre of the aircraft. */
.fde-drone {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fde-drone-size);
  opacity: var(--fde-drone-o, 0);
  transform:
    translate3d(var(--fde-drone-x, -50vw), var(--fde-drone-y, -50vh), 0)
    translate(-50%, -50%);
}

.fde-drone-layer.is-flying .fde-drone {
  will-change: transform, opacity;
}

/* Yaw and distance, kept off the positioning transform so the two do not
   fight over the same matrix. */
.fde-drone__yaw {
  transform: rotate(var(--fde-drone-rot, 180deg)) scale(var(--fde-drone-scale, 1));
  transform-origin: 50% 50%;
}

.fde-drone__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* -------- Hover wobble --------
   Percentages resolve against the aircraft's own box, so the wobble keeps
   its proportions at every breakpoint. */
.fde-drone__bob {
  animation: fde-drone-bob 5.2s ease-in-out infinite;
}

@keyframes fde-drone-bob {
  0%   { transform: translate3d(0.55%, -2%, 0)  rotate(-0.6deg); }
  34%  { transform: translate3d(-0.5%, 1.5%, 0) rotate(0.32deg); }
  67%  { transform: translate3d(0.4%, 2.1%, 0)  rotate(0.6deg); }
  100% { transform: translate3d(0.55%, -2%, 0)  rotate(-0.6deg); }
}

/* -------- Rotors --------
   Diagonal pairs turn the same way and adjacent rotors oppose, the way a
   real quadcopter cancels its own torque. Slightly different periods keep
   them from locking into one mechanical rhythm. */
.fde-drone__blades {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: fde-drone-rotor 1.35s linear infinite;
}

.fde-drone__blades--a { animation-duration: 1.28s; }
.fde-drone__blades--b { animation-duration: 1.42s; animation-direction: reverse; }
.fde-drone__blades--c { animation-duration: 1.36s; animation-direction: reverse; }
.fde-drone__blades--d { animation-duration: 1.49s; }

@keyframes fde-drone-rotor {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -------- Navigation lights -------- */
.fde-drone__led {
  animation: fde-drone-led 2.6s ease-in-out infinite;
}

.fde-drone__led--rear {
  animation-duration: 2.15s;
  animation-delay: -1.05s;
}

@keyframes fde-drone-led {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.92; }
}

/* Nothing loops while the aircraft is off screen. */
.fde-drone-layer:not(.is-flying) .fde-drone__bob,
.fde-drone-layer:not(.is-flying) .fde-drone__blades,
.fde-drone-layer:not(.is-flying) .fde-drone__led {
  animation-play-state: paused;
}

/* -------- Reduced motion --------
   The flight is decoration, so it is removed outright rather than frozen
   somewhere on the page. The script also bails before it binds anything. */
@media (prefers-reduced-motion: reduce) {
  .fde-drone-layer {
    display: none !important;
  }
}