/* ============================================================
   Persistent drone rig — lives outside .reveal so it survives
   slide transitions untouched. Two nested transform layers:
     #drone-outer  -> slide-to-slide reposition + bank (JS-driven)
     #drone-inner  -> continuous idle hover bob (CSS keyframes)
   ============================================================ */

.drone-rig {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drone-shadow {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 210px;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(11, 18, 32, 0.28) 0%, rgba(11, 18, 32, 0) 72%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.55;
  filter: blur(1px);
  transition: opacity 2.4s var(--ease-soft), transform 2.4s var(--ease-soft);
}

.drone-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform-origin: 50% 60%;
  will-change: transform;
  /* base grounded pose: low, tilted, slightly smaller */
  transform: translate(-50%, -50%) translate(0px, 205px) rotate(-5deg) scale(0.82);
  transition: transform 2.5s cubic-bezier(0.22, 0.9, 0.24, 1);
  filter: drop-shadow(0 22px 30px rgba(18, 58, 140, 0.28));
}

.drone-rig.airborne .drone-outer {
  transition: transform 900ms var(--ease-soft);
}

.drone-rig.airborne .drone-shadow {
  /* Shadow only sells the ground->liftoff moment on the title slide;
     it doesn't track the rig's per-slide reposition, so hide it once airborne. */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.drone-inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.drone-rig.hovering .drone-inner {
  animation: drone-bob 4.2s ease-in-out infinite;
}

.drone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Propellers, pinned to each motor hub ---------- */

.prop {
  position: absolute;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.prop__tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(58deg);
  filter: drop-shadow(0 2px 3px rgba(11, 18, 32, 0.35));
}

.prop__spin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  /* static (grounded) by default; spins up only once .drone-rig is .flying */
  transition: opacity 0.35s ease;
}

.prop__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* translucent motion-blur disc — fades in as the blades fade out, so at
   full spin the prop reads as an indistinct blurred disc rather than a
   strobing shape (a literal fast CSS rotation of two blades just flickers). */
.prop__disc {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(234, 242, 252, 0.5) 14%, rgba(212, 226, 242, 0.34) 46%, rgba(200, 214, 232, 0.12) 66%, transparent 76%);
  filter: blur(3.5px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.drone-rig.flying .prop__spin {
  animation: prop-fast-spin 0.16s linear infinite;
  opacity: 0.45;
}

.drone-rig.flying .prop__disc {
  opacity: 0.85;
}

@keyframes prop-fast-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes drone-bob {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-10px) rotate(0.8deg); }
  50%  { transform: translateY(2px) rotate(-0.6deg); }
  75%  { transform: translateY(-6px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@media (max-width: 900px), (max-height: 620px) {
  .drone-outer {
    width: 210px;
    height: 210px;
  }
}