/* ── DRONE CURSOR ── */
/* Only hide system cursor when drone cursor is actively initialized and running */
html.drone-cursor-active,
html.drone-cursor-active *,
html.drone-cursor-active *::before,
html.drone-cursor-active *::after {
  cursor: none !important;
}

#drone-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  pointer-events: none;
  z-index: 999999;
  will-change: left, top, transform;
  opacity: 0;
  transition: opacity 0.2s, filter 0.2s;
}
#drone-cursor.hovering {
  filter: drop-shadow(0 0 6px rgba(58,181,255,0.9)) drop-shadow(0 0 12px rgba(58,181,255,0.5));
}
#drone-cursor.clicking {
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.9));
}

.prop-cw  { animation: prop-spin 0.18s linear infinite; transform-box: fill-box; transform-origin: center; }
.prop-ccw { animation: prop-spin 0.18s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes prop-spin { to { transform: rotate(360deg); } }

/* ── DRONE LED ── */
.drone-led { animation: led-blink 2.4s linear infinite; }
.led-halo  { animation: led-halo-pulse 2.4s linear infinite; }

@keyframes led-blink {
  0%, 100% { opacity: 1; }
  6%        { opacity: 0.05; }
  12%       { opacity: 1; }
  18%       { opacity: 0.05; }
  24%       { opacity: 1; }
}
@keyframes led-halo-pulse {
  0%, 100% { opacity: 0.38; }
  6%        { opacity: 0; }
  12%       { opacity: 0.38; }
  18%       { opacity: 0; }
  24%       { opacity: 0.38; }
}

#drone-cursor.clicking .drone-led,
#drone-cursor.clicking .led-halo {
  fill: #ff2222;
  animation: none;
  opacity: 1;
}
#drone-cursor.clicking .led-halo { opacity: 0.45; }


/* ── NAV LOGO SPACING ── */
.nav-logo {
  height: 130px !important;
  width: auto;
  display: block;
  opacity: 0.65;
  filter: drop-shadow(0 0 8px rgba(58,181,255,0.2));
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.nav.scrolled .nav-logo {
  opacity: 0.82;
  filter: drop-shadow(0 0 10px rgba(58,181,255,0.35));
}

.nav-logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(58,181,255,0.75)) drop-shadow(0 0 30px rgba(58,181,255,0.35));
}

.nav-inner { min-height: 140px !important; }


/* ── BUTTON BASE ── */
.btn-hero, .btn-hero-outline, .btn-cta,
a[class*="btn"]:not([class*="-btns"]),
button[class*="btn"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.23,1,.32,1),
              box-shadow 0.22s ease !important;
}

/* ── HOVER GLOW — clean, no bars ── */
.btn-hero:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1px rgba(58,181,255,0.4),
    0 0 20px rgba(58,181,255,0.5),
    0 8px 32px rgba(58,181,255,0.25) !important;
}

.btn-hero-outline:hover, .btn-cta:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1px rgba(58,181,255,0.35),
    0 0 16px rgba(58,181,255,0.35),
    0 6px 20px rgba(58,181,255,0.15) !important;
}

/* ── CLICK RIPPLE ── */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 0; height: 0;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ripple-out 0.65s cubic-bezier(.23,1,.32,1) forwards;
}

@keyframes ripple-out {
  to {
    width: 360px;
    height: 360px;
    opacity: 0;
  }
}

/* ── ACTIVE STATE ── */
[class*="btn"]:active,
.btn-hero:active,
.btn-hero-outline:active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: none !important;
}