/* ============================================================
   Persistent drone rig, carried over from the zeroth review deck.
   Lives outside .reveal so it survives slide transitions.
     #drone-outer -> per-slide reposition + bank (JS driven)
     #drone-inner -> continuous idle hover bob (CSS keyframes)
   Flat fills only: the blades are solid stock, the hub is solid
   metal grey, and the motion blur is a single translucent tint.
   ============================================================ */

.drone-rig {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

.drone-rig.hidden { opacity: 0; }

/* small hover corner state is the default everywhere; .big is only set on
   the title and closing slides, where the drone returns to centre stage */
.drone-rig:not(.big) .drone-outer { filter: drop-shadow(0 8px 10px rgba(13, 21, 36, 0.2)); }
.drone-rig:not(.big).hovering .drone-inner { animation-name: drone-bob-small; }

.drone-shadow {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 190px;
  height: 16px;
  background: rgba(13, 21, 36, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(6px);
  transition: opacity 2.2s var(--ease), transform 2.2s var(--ease);
}

.drone-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 264px;
  height: 264px;
  transform-origin: 50% 60%;
  will-change: transform;
  /* grounded pose */
  transform: translate(-50%, -50%) translate(0px, 190px) rotate(-4deg) scale(0.8);
  transition: transform 2.4s cubic-bezier(0.22, 0.9, 0.24, 1);
  filter: drop-shadow(0 16px 22px rgba(13, 21, 36, 0.22));
}

.drone-rig.airborne .drone-outer { transition: transform 850ms var(--ease); }
.drone-rig.airborne .drone-shadow { 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.4s 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(13, 21, 36, 0.3));
}

.prop__spin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.35s ease;
}

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

/* single flat tint standing in for the blur disc at full spin */
.prop__disc {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: rgba(219, 229, 242, 0.42);
  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(-9px) rotate(0.7deg); }
  50%  { transform: translateY(2px) rotate(-0.5deg); }
  75%  { transform: translateY(-5px) rotate(0.9deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* smaller amplitude at the tiny corner scale, so the bob reads as a hover
   rather than a shake */
@keyframes drone-bob-small {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-4px) rotate(0.5deg); }
  50%  { transform: translateY(1px) rotate(-0.4deg); }
  75%  { transform: translateY(-2.5px) rotate(0.6deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .drone-rig.hovering .drone-inner { animation: none; }
  .drone-rig.flying .prop__spin { animation: none; }
}